使用自定义 babel 插件构建聚合物？答案

【问题标题】：Polymer build with custom babel plugins?使用自定义 babel 插件构建聚合物？
【发布时间】：2019-05-15 05:31:58
【问题描述】：

我们希望能够通过配置自定义 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
  };
}

...然后我们可以提供或构建我们的项目，支持可选链等。这将允许我们通过编写额外的 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 时没有（babel/core 已加载）配置信息。

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

谢谢。

【问题讨论】：

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

【解决方案1】：

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

【讨论】：