聚合物：Gulp構建可堆放的材料+束

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是同一回事。”

也許那是通天塔的事。

使用babel 7和gulp 4（和網狀組件聚合物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 -->

聚合物：Gulp構建可堆放的材料+束

問題描述

1 個解決方案

解決方案1
0 2019-07-19 14:11:27

聚合物：Gulp構建可堆放的材料+束

問題描述

1 個解決方案

解決方案1 0 2019-07-19 14:11:27

解決方案1
0 2019-07-19 14:11:27