Polymer: Gulp build transpile + bundle

Question

I'm struggling to get a working custom build for Polymer using gulp. My goal is to get a Polymer 1 project written in es6 transpiled & bundled. I followed this guide https://github.com/PolymerElements/generator-polymer-init-custom-build.

The transpilation works well for single files, but any bundled js code is untranspiled (as written in es6). Here is my gulp task :

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);

Thank you for your help.

Maarten Albers · Answer 1 · 2019-07-23T08:39:41.180

es2015 is the same as es6, so you are telling babel to transpile to es6. (I'm still looking for the correct preset name for es5)

https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c "ES5 December 2009: Nearly 10 years later, ES5 was released in 2009. It would then take almost six years for the next version of ECMAScript to be released. ES6 / ES2015

June 2015: Perhaps the cause for all of your confusion begins here. You see, ES6 and ES2015 are the same thing."

maybe that's a babel thing.

Using babel 7 and gulp 4 (and webcomponents polymer 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;

Then usage in 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 -->

Polymer: Gulp build transpile + bundle

1 Answers1