Babel Standalone Invalid plugin @babel/plugin-proposal-decor

Question

我正试图在react应用程序中使用babel单机版来转换Angular TypeScript。

简称：

如何在babel standalone中使用@babel/plugin-projection-decorator和@babel/projection-class属性？

长版本：

本教程https://medium.com/@hubert.zub/using-babel-7-and-prest-typescript-to-compile-angular-6-app-448eb1880f2c说"；显然@babel/plugin-syntax-decorators没有完成这项工作，并导致转换错误&"；。他建议在babelrc文件中使用以下配置：

{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true,
}
],
"@babel/plugin-proposal-class-properties"
]
}

使用语法装饰器"；工作；对我来说，但后来我得到了另一个错误，即它无法识别导入组件的选择器。

由于我使用babel单机版，我需要使用babel.transform，如下所示：

const TS_OPTIONS = {
presets: [
'typescript',
['es2017', { 'modules': false }],
],
plugins: [
// the following two options "work" but with another error
// 'syntax-decorators',
// 'syntax-class-properties',

// none of these options work
["@babel/plugin-proposal-decorators"],
["@babel/plugin-proposal-class-properties"],
//['plugin-proposal-decorators', { 'legacy': true }],
//['plugin-proposal-class-properties', { 'loose': true }],
// 'plugin-proposal-decorators',
// 'plugin-proposal-class-properties',
// ['syntax-decorators', { 'legacy': true }],

'transform-es2015-modules-commonjs',
],
};

我的transfile功能(大大简化(：

export default function transpile(myCode) {
const { code } = Babel.transform(myCode, TS_OPTIONS);
return myCode;
}

无论我如何编写插件，它都不起作用。我一直收到的错误

Error: Invalid plugin specified in Babel options: "proposal-decorators"

使用语法装饰器插件将转换代码，但在导入组件并尝试使用组件选择器时，我收到以下错误：

Uncaught Error: Template parse errors:
'search-bar' is not a known element:
1. If 'search-bar' is an Angular component, then verify that it is part of this module.
2. If 'search-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Answer 1

我通过升级我使用的Babel版本来解决这个问题，这让我可以访问更多可用的插件。我发布了另一个问题，我认为这是一个不同的问题，但事实证明它们是相关的。如果有人感兴趣，我会在这里引用这个问题：角度未捕获错误：模板解析错误：不是已知的元素

Answer 2

使用babel standalone。babelrc不起作用。你可能需要使用transform来应用插件。我想知道为什么你需要使用独立的babel？。如果它的反应或角度，你可以只使用babel，而不需要使用转换