Babel 独立插件无效@babel/plugin-proposal-decorators

Question

我正在尝试在 React 应用程序中使用独立的 babel 来转译 Angular TypeScript。

简短版本：

如何将 @babel/plugin-proposal-decorators 和 @babel/plugin-proposal-class-properties 与独立的 babel 一起使用？

长版：

本教程 https://medium.com/@hubert.zub/using-babel-7-and-preset-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',
  ],
};

我的转译函数（大大简化）：

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

  return myCode;
}

不管我怎么写插件都不行。我不断收到

的错误

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

使用 syntax-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-standalone .babelrc 将无法工作。您可能需要使用转换来应用插件。我想知道为什么您确实需要使用独立的 babel？。如果它有反应或者 angular 你可以只使用 babel 而不需要使用 transform

Answer 2

我通过升级我使用的 Babel 版本解决了这个问题，这让我可以访问更多可用的插件。我发布了另一个我认为是不同问题的问题，但事实证明它们是相关的。如果有人感兴趣，我会在这里提到这个问题：

Babel 独立插件无效@babel/plugin-proposal-decorators

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

transpiler

typescript

reactjs

babeljs

angular