Babel Standalone 無效插件 @babel/plugin-proposal-decorators

Question

我正在嘗試在反應應用程序中獨立使用 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',
  ],
};

我的編譯 function （大大簡化）：

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 版本解決了這個問題，這讓我可以訪問更多可用的插件。 我發布了另一個問題，我認為這是一個不同的問題，但事實證明它們是相關的。 如果有人感興趣，我會在這里參考這個問題： Angular Uncaught Error: Template parse errors: is not a known element

Answer 2

使用 babel-standalone.babelrc 將無法工作。您可能需要使用轉換來應用插件。我想知道為什么您確實需要使用獨立 babel？ 如果它的反應或 angular 你可以只使用 babel 而不需要使用變換