聚合物: Gulp build transpile + bundle

Question

我正在努力获得一个工作的自定义构建的聚合物使用gulp。我的目标是让一个用es6编写的聚合物1项目被转译和捆绑。我遵循了这个指南https://github.com/PolymerElements/generator-polymer-init-custom-build。

转译适用于单个文件，但任何捆绑的js代码都是未转译的(就像用es6编写的一样)。这是我的任务：

function build() {
  return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
    // Okay, so first thing we do is clear the build directory
    console.log(`Deleting ${buildDirectory} directory...`);
    del([buildDirectory])
      .then(() => {
        // Okay, now let's get your source files
        let sourcesStream = polymerProject.sources()
          // Here's how splitHtml & gulpif work
          .pipe(polymerProject.splitHtml())
          // Transpile
          .pipe($.sourcemaps.init())
          .pipe($.if('*.js', $.babel({
            presets: ['es2015']
          })))
          .pipe($.sourcemaps.write())
          // Oh, well do you want to minify stuff? Go for it!
          .pipe(gulpif(/\.js$/, uglify()))
          .pipe(gulpif(/\.html$/, htmlMinifier()))
          .pipe(gulpif(/\.(png|gif|jpg|svg)$/, imagemin()))
          .pipe(polymerProject.rejoinHtml());

        // Okay, now let's do the same to your dependencies
        let dependenciesStream = polymerProject.dependencies()
          // .pipe(polymerProject.bundler)
          .pipe(polymerProject.splitHtml())
          .pipe(gulpif(/\.js$/, uglify()))
          .pipe(gulpif(/\.html$/, htmlMinifier()))
          .pipe(polymerProject.rejoinHtml());

        // Okay, now let's merge them into a single build stream
        let buildStream = mergeStream(sourcesStream, dependenciesStream)
          .once('data', () => {
            console.log('Analyzing build dependencies...');
          });

        // #PROBLEM# -> All included sources won't be transpiled
        buildStream = buildStream.pipe(polymerProject.bundler);

        // Okay, time to pipe to the build directory
        buildStream = buildStream.pipe(gulp.dest(buildDirectory));

        // waitFor the buildStream to complete
        return waitFor(buildStream);
      })
      .then(() => {
        // Okay, now let's generate the Service Worker
        console.log('Generating the Service Worker...');
        return polymerBuild.addServiceWorker({
          project: polymerProject,
          buildRoot: buildDirectory,
          bundled: true,
          swPrecacheConfig: swPrecacheConfig
        });
      })
      .then(() => {
        // You did it!
        console.log('Build complete!');
        resolve();
      });
  });
}

gulp.task('build', build);

谢谢你的帮助。

Answer 1

es2015与es6相同，所以您告诉babel将其转换为es6。(我仍在为es5寻找正确的预设名称)

https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c "ES5 2009年12月:近10年后，ES5于2009年发布。然后，下一个版本的ECMAScript将需要近6年的时间才能发布。ES6 / ES2015

2015年6月:也许你所有困惑的原因都从这里开始。你看，ES6和ES2015是一回事。“

也许那是巴别塔的事。

使用babel 7和gulp 4(以及webcomponents聚合物3)：

const polymerBuild = require('polymer-build');
const config = require('./polymer.json')
const project = new polymerBuild.PolymerProject(config);
const polymerProject = new polymerBuild.PolymerProject(config); //yes two, I don't know why but it fails if I don't
const configBuild = require('gulp-polymer-build');
const babel = require("gulp-babel");

let build = (cb) => {
   return configBuild.createBuildStreams(polymerProject).then(builds => {
let promises = [];

for (let name in builds) {
  let dir = path.join(buildDir, name);
  builds[name]
    .pipe(gulpif (/\.js$/, babel({
      presets: [
        ['env', {
          "browserslist": "> 2%, ie 11, chrome 58, firefox 45"
        }
      ]
    ],plugins: ["@babel/plugin-transform-modules-amd"]
  })))
    //.pipe(gulpif(/\.js$/, uglify()))
    .pipe(project.addCustomElementsEs5Adapter())
    .pipe(project.bundler())
    .pipe(dest(dir));

  promises.push(waitFor(builds[name]));
}

// ensure gulp waits for all streams to end
Promise.all(promises).then(() => cb(), (e) => console.error("something went wrong: ", e));
  });
 };

exports.build = build;

然后在html中使用：

<head>
<script src="/build/es5prod/array-polyfill.js"></script> <!-- from mdn https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill#Polyfill -->
<script src="/node_modules/polymer-build/lib/babel-helpers-full.min.js"></script>
<script src="/node_modules/@polymer/esm-amd-loader/lib/esm-amd-loader.min.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- make sure you have the bundles dir also there -->
</head>
<script src="/app.js"></script> <!-- entry point to js bundle -->