babeljs - 使用自定义 babel 插件构建聚合物？

Question

我们希望能够通过配置自定义 babel 插件向 polymer build 和 polymer 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
  };
}

...然后我们可以服务或构建我们的项目，支持可选链接等

不幸的是，这目前不起作用。 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 的使用没有(babel/core 已加载)配置信息。

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

谢谢。

Answer 1

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