使用自定义babel插件构建聚合物吗?

时间:2018-12-13 23:07:31

标签: babeljs polymer-3.x polymer-cli

我们希望能够通过配置自定义babel插件向polymer buildpolymer serve添加自定义功能。

例如,由于polymer-cli在内部使用babel,我们将在工作区/项目根目录中添加一个babel.config.js文件,例如:

module.exports = function (api) {

  api.cache(true);


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


  return {
    presets,
    plugins
  };
}

...然后我们可以通过支持可选链来服务或构建我们的项目,等等。这将使我们能够通过编写其他babel插件来处理各种事情,例如在模板HTML字符串中处理诸如缩小之类的事情...

不幸的是,这目前不起作用。 polymer-build似乎正在加载配置(由于使用了babel / core?),但polymer-analyze却没有。一旦它在我们的源代码中遇到可选的链接语法,就会在Polymer-analyze执行的构建优化步骤中生成错误:

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还会生成错误:

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' ] }

在两种情况下,我都已确认正在加载babel.config.js文件 。但是babel包含在polymer-cli中使用的几种不同的软件包中,所以我怀疑在其中一些中,babel的使用没有(巴贝尔/内核已加载)配置信息。

参与聚合物项目的任何人都可以确认我在确定主要问题上是否正确吗?如果范围不太大,我正在研究是否提供修复/增强功能。

谢谢。

1 个答案:

答案 0 :(得分:1)

为此,您需要编写自己的自定义版本。 Polymer-cli也将为此提供工具。看一下这个例子: https://github.com/PolymerElements/generator-polymer-init-custom-build