如何在 CRA 中允许命名空间？

Question

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

\n\n

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

\n\n

这样，我的项目就用Babel编译，然后由webpack捆绑。现在我想使用 TypeScript命名空间，默认情况下 Babel 不支持它们，但可以启用它们。我\xc2\xa0安装了所有必需的软件包：

\n\n

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

\n\n

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

\n\n

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

\n\n

const {\n    override,\n    addExternalBabelPlugin\n  } = require("customize-cra");\n\nmodule.exports = override(\n    addExternalBabelPlugin([\n        "@babel/plugin-transform-typescript",\n        { allowNamespaces: true }\n    ])\n);\n

\n\n

但是，编译仍然会抛出语法错误，就好像没有启用插件一样：

\n\n

\n

语法错误：/home/m93a/my-app/script.ts：命名空间未标记为仅类型声明。Babel 仅实验性地支持非声明性命名空间。要启用和查看警告，请参阅：https://babeljs.io/docs/en/babel-plugin-transform-typescript

\n

\n\n

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

\n\n

---

\n\n

编辑：我的项目不起作用的原因实际上与我的想法有很大不同。检查我自己的答案以获取更多详细信息。

\n

Answer 1

你必须使用addBabelPlugin而不是addExternalBabelPlugin.

太长了；博士

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

addExternalBabelPlugin(plugin)

create-react-appwebpack实际上，它的配置中有两个规则babel-loader：一个用于代码addSrc（src/默认情况下），另一个用于external该文件夹的代码（如node_modules）。您可以external使用addExternalBabelPlugin与使用addBabelPlugin.

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

1. 在for the和 for which添加插件 forwebpack.config.js#L396处，并添加注释：babel-loaderinclude: paths.appSrc\.(js|mjs|jsx|ts|tsx)$/addBabelPlugin

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

2. Atwebpack.config.js#L452是添加插件的babel-loader地方，带有注释：/\.(js|mjs)$/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应用于第一个babel-loader相关应用程序src文件夹，因此我们必须使用addBabelPlugin适用于该babel-loader配置的文件夹。

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

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

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