Polymer build with custom babel plugins?

Question

We'd like to be able to add custom functionality to polymer build and polymer serve by configuring custom babel plugins.

For example, since polymer-cli uses babel internally, we would add a babel.config.js file to our workspace/project-root, e.g.:

module.exports = function (api) {

  api.cache(true);


  const presets = [ ];
  const plugins = [
 "@babel/plugin-proposal-optional-chaining"
 ];


  return {
    presets,
    plugins
  };
}

...and then we could serve or build our project with support for optional-chaining, etc This would allow us to do all sorts of things by writing additional babel plugins to handle stuff like minification inside template HTML strings...

Unfortunately, this doesn't currently work. polymer-build seems to load the configuration (due to its use of babel/core?), but polymer-analyze doesn't. An error is generated in the build-optimization step performed by polymer-analyze as soon as it encounters optional-chaining syntax in our source:

error:  Error: Unable to get document file:///.../somefile.js: This experimental syntax requires enabling the parser plugin:  
'optionalChaining' (423:6)  
    at BuildAnalyzer.<anonymous> (/usr/local/share/.config/yarn/global/node_modules/polymer-build/lib/analyzer.js:342:23)
    at Generator.next (<anonymous>)  
    at fulfilled  (/usr/local/share/.config/yarn/global/node_modules/polymer-build/lib/analyzer.js:17:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)

polymer serve also generates an error:

Error { SyntaxError: This experimental syntax requires enabling the parser plugin: 'optionalChaining' (423:6)
    at Parser.raise (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:776:15)  
    at Parser.expectPlugin (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2084:18)  
...   
pos: 13056,   loc: Position { line: 423, column: 6 },  
missingPlugin: [ 'optionalChaining' ] }

In both cases, I've confirmed that the babel.config.js file is being loaded. But babel is included by several different packages used in polymer-cli, so my suspicion is that in some of them, babel is being used without (babel/core having loaded) configuration info.

Can anyone involved with the polymer project confirm whether I'm correct in identifying the main issue? I'm looking into the possibility of contributing a fix/enhancement if the scope isn't too large.

Thanks.

Answer 1

For us, this issue was preventing us from using modern JS language features (like optional chaining and the nullish coalescing operator) which have wide support in modern browsers.

The only solution we could come up with was forking the Polymer tools monorepo and adding in support for the appropriate Babel plugins ourselves.

---

The file in question is /packages/build/src/js-transform.ts. Both serve and build use this file for Babel transforms. We switched to using Rollup for our build process, but we still needed a development server and couldn't get any others to work, so we forked the repo and built our own version of the standalone polyserve package. Would love to some day switch to Modern Web's @web/dev-server.

Answer 2

I think for this you need to write your own custom build. Polymer-cli will provide its tool also for this. Have a look at this example: https://github.com/PolymerElements/generator-polymer-init-custom-build