Question

我正在努力使用gulp为Polymer工作定制。我的目标是获得一个用es6编写的Polymer 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新版本发布大约需要六年时间。 ES6 / ES2015

2015年6月：也许所有困惑的原因都从这里开始。您会看到ES6和ES2015是同一回事。”

聚合物：Gulp build transpile + bundle

1 个答案: