typescript - 如何允许 CRA 中的命名空间？

Question

我使用以下方法创建了一个 TypeScript React 应用程序:

yarn create react-app my-app --template typescript

这样，我的项目编译为Babel然后由 webpack 捆绑.现在我想使用 TypeScript namespaces ，默认情况下 Babel 不支持，但它们 can be enabled .我安装了所有必要的软件包:

• @babel/plugin-transform-typescript
• react-app-rewired
• customize-cra

在 package.json 我将 react-scripts start 更改为 react-app-rewired start。

最后，我创建了一个 config-overrides.js 文件:

const {
    override,
    addExternalBabelPlugin
  } = require("customize-cra");

module.exports = override(
    addExternalBabelPlugin([
        "@babel/plugin-transform-typescript",
        { allowNamespaces: true }
    ])
);

但是编译还是会抛出语法错误，好像没有启用插件一样:

SyntaxError: /home/m93a/my-app/script.ts: Namespace not marked type-only declare. Non-declarative namespaces are only supported experimentally in Babel. To enable and review caveats see: https://babeljs.io/docs/en/babel-plugin-transform-typescript

如何正确设置我的项目，以便它甚至可以编译非声明性命名空间？

---

编辑:我的项目没有成功的原因实际上与我的想法完全不同。查看我自己的答案以获取更多详细信息。

Answer 1

您必须使用 addBabelPlugin而不是 addExternalBabelPlugin .

tl;博士

如果我们检查文档，我们会看到:

addExternalBabelPlugin(plugin)

create-react-app actually has two rules in its webpack config for babel-loader: one for code in addSrc (src/ by default) and the other for code external to that folder (like node_modules). You can add plugins to the external loader using addExternalBabelPlugin in the same way you'd use addBabelPlugin.

如果我们检查内部 react-scripts/config/webpack.config.js我们可以看到这两个 babel-loader 条目:

1. 在 webpack.config.js#L396 include: paths.appSrc 和 \.(js|mjs|jsx|ts|tsx)$/ 有 babel-loader > 其中addBabelPlugin添加插件，并带有注释:

   // Process application JS with Babel.
   // The preset includes JSX, Flow, TypeScript, and some ESnext features.
   

2. 在 webpack.config.js#L452是 /\.(js|mjs)$/ 的 babel-loader 其中addExternalBabelPlugin添加插件，并带有注释:

   // Process any JS outside of the app with Babel.
   // Unlike the application JS, we only compile the standard ES features.
   

我们想要 @babel/plugin-transform-typescript应用到关于应用程序 src 文件夹的第一个 babel-loader 所以我们必须使用 addBabelPlugin这适用于那个 babel-loader 配置。

最后但并非最不重要的一点是，确保您已更新您的 package.json 脚本以从 react-app-rewired 运行:

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"

您可以在此处使用命名空间中的类检查一个非常简单的 CRA Typescript 项目:https://github.com/clytras/cra-ts-namespaces