babel polyfill

[jay8t6]

@FredKSchott I wanna include Babel polyfill as part of the build process. How do I do that?

I tried doing this, but it says only one instance of babel-polyfill is allowed, looks like its being used elsewhere in the project:

const addSrc = require('gulp-add-src');
const polyfill = require('../node_modules/babel-polyfill/dist/babel-polyfill.js');
...
function source() {
  return project.splitSource().
    pipe(gulpif('**/*.html', htmlmin({
      collapseWhitespace: true
    }))).
    pipe(addSrc(polyfill)).
    pipe(gulpif('**/*.js', babel(babelConfig))).
    pipe(gulpif('**/*.js', uglify())).
    pipe(project.rejoin()); // Call rejoin when you're finished
}

[FredKSchott]

Because polymer-build is built with vinyl streams, it is are compatible with anything that works with gulp. Have you tried using https://www.npmjs.com/package/gulp-babel ?

[jay8t6]

@FredKSchott I am using gulp-babel, but some of the es6 code I am using requires polyfill, and cannot be transpiled by gulp babel. That's is why I need to inject polyfill into the code. I guess I don't need this since I only need this for IE anyways, I'll just do a conditional import to load in babel polyfill. Thanks for looking into this.

[FredKSchott]

No problem, we're looking at adding babel to the CLI so I'm interested in any problems you had.

are you sure require('../node_modules/babel-polyfill/dist/babel-polyfill.js') is a vinyl stream, like gulp-babel? I believe gulpif needs a stream for that second argument.

[jay8t6]

I dont think it is, I am just trying to add the code in somehow using plugins like https://github.com/urish/gulp-add-src, which is a vinyl stream, but it throws an error like I mentioned above.

I have created this generator off of @robdodson custom build generator, check it out, its got Babel: https://www.npmjs.com/package/generator-polymer-init-custom-build-es6

I am going to clone polymer starter kit and customize the default page a little bit to better suit our internal projects, thats my next step.

[FredKSchott]

@jay8t6 awesome! We've been wanting something like this for a while now! If you can push it to github I'd love to take a look and fix anything that's still not working.

[jay8t6]

Here you go: https://github.com/jay8t6/generator-polymer-init-custom-build-es6

[FredKSchott]

Awesome! I'll try to take a look this week

[learmond]

Hi guys, First off, this is all fantastic,! Having support for es6 directly in the polymer-cli would be most excellent. @jay8t6 or @FredKSchott , can you confirm whether https://www.npmjs.com/package/generator-polymer-init-custom-build-es6 is supposed to work out of the box with es6 code? I've added a small es6 test section into my-app.html just above the call to Polymer({...}) and executing polymer build with verbose logging (via the plylog import in gulpfile.js) produces error output at the first arrow function, ie:

// my-app.html
...
<script>
    // EDIT -> Changed es6 testing body to actual code
    // es6 testing     
    (() => {               // <-- 'SyntaxError: Unexpected token: punc ()'
            let MyClassCtor = class MyClass {
                constructor() {
                    console.log("MyClass Ctor");
                }

                static get name() {
                    return "my-class";
                }

                Log(msg) {
                    console.log(`Logging msg [${msg}]`);
                }
            }

            var myClass = new MyClassCtor;
            myClass.Log(`that string template tho .. ${MyClassCtor.name}`);
    })();

      Polymer({
      is: 'my-app',
      ....
</script>

The whole test closure was verified to work in the latest chrome's dev tools console. EDIT: Running the closure in chrome's dev tools console produces:

MyClass Ctor
Logging msg [that string template tho .. my-class]

It looks to be breaking on the uglify-js step (I removed the 'uglifyJS' entry from the htmlmin config), so it's almost like the babel step isn't working. Excerpt from build output:

info:    Building application...
info:    Generating build/unbundled...
info:    Generating build/bundled...
warn:    Unable to optimize .js file <path-to-app>/test_es6_app/src/my-app.html_script_0.js 
{ err: 
   { message: 'SyntaxError: Unexpected token: punc ())',
     filename: 0,
     line: 3,
     col: 4,
     pos: 22,
     stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (<path-to-node>/.node_mods_global/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1545:18)\n ... most stack.

Am I missing something? Thanks!

[jay8t6]

@learmond this is what we use on our internal polymer projects. I know it works if you use es6 inside Polymer({}), never tried an arrow function outside Polymer definition. Let me give it a try and let you know whats going on...

[jay8t6]

looks like your closing curly braces is on the same line as your comment...

// other es6 test code }

I moved it to the next line, it works fine.

[learmond]

@jay8t6 Oops, that's a mistake in the comment. I updated with the actual test code. Interesting though, that you were successful in your build. I still have the same error.

[jay8t6]

Can you put your code in a repo so I can take a look?

[learmond]

@jay8t6 Yep, thanks for taking a look! https://github.com/learmond/polymer_cust_build_es6_test

[jay8t6]

@learmond I was able to build your code just fine. However, I see that .babelrc is missing in your project. Try adding it to the project, it should work fine. here is the file content:

{
  "presets": ["es2015-script"],
  "plugins":["array-includes"]
}

[learmond]

@jay8t6 Okay, bizarre. It looks like it's my version of gulp cli. My global version is 3.9.1 which, when executed gives the following error:

/<path-to-node>/.node_modules_global/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                  ^

TypeError: Cannot read property 'apply' of undefined
    at /<path-to-node>/.node_modules_global/lib/node_modules/gulp/bin/gulp.js:129:19
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

My node version is 6.7.0. Using the project's local gulp cli (v1.2.2, solution from this post produced a successful build! Yay!

Still, however, executing polymer build gives the same SyntaxError: Unexpected token: punc ()) as posted above. I guess I'm wondering if this is supposed to work with polymer build, or does it only build successfully with gulp?

Thanks again.

[jay8t6]

@learmond you need gulp 4.0

npm install -g gulpjs/gulp#4.0

[learmond]

@jay8t6 Ah, of course! I should have realized that. Thanks for your help.

[caranicas]

@jay8t6 have you had any luck adding a watch process to your build? I've tried a bunch of different approaches, and I just keep hitting my head against this error Error: no writecb in Transform class

[jay8t6]

you can use a plugin like browsersync to achieve this... https://www.browsersync.io/docs/gulp

[iexplore]

@jay8t6 Thank you very much for this babel polyfill, it is great! I do have one suggestion: I tried to get your polymer-build working today and I just got it working because I looked at this page. There were two things I needed to do to get it working: install gulp#4.0 and ad the .babelrc. I think it could help other people if you add these to the instructions on npmjs.com.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!