我们希望能够通过配置自定义巴别塔插件来为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
};
}
...然后我们可以服务或建立我们的项目与支持可选链接等这将允许我们做各种各样的事情通过编写额外的巴别塔插件来处理像模板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
文件**正在被加载。但是在polymer-cli中使用的几个不同的包都包含了babel,所以我怀疑在其中一些包中,babel在没有(babel/core已经加载)配置信息的情况下被使用。
任何参与聚合物项目的人都可以确认我是否正确地识别了主要问题吗?如果范围不是太大,我正在研究贡献修复/增强的可能性。
- 谢谢-谢谢
2条答案
按热度按时间f0brbegy1#
我认为你需要编写你自己的自定义版本。Polymer-cli也会为此提供工具。看看这个例子:https://github.com/PolymerElements/generator-polymer-init-custom-build
djp7away2#
对我们来说,这个问题阻碍了我们使用现代JS语言特性(比如可选链接和空合并操作符),而这些特性在现代浏览器中得到了广泛的支持。
我们能想到的唯一解决方案是forking聚合物
tools
monorepo,并添加对适当的巴别塔插件自己的支持。我们讨论的文件是
/packages/build/src/js-transform.ts
。serve
和build
都使用这个文件进行Babel转换。我们在构建过程中改用Rollup,但是我们仍然需要一个开发服务器,并且无法使用其他服务器,所以我们派生了repo,构建了我们自己的独立版本polyserve
包。希望有一天能改用Modern Web的@web/dev-server
。