1

所以我开始了一个新的 CRA 项目，我正在使用 TS beta 来获得一些不错的功能，比如链接运算符，但我也想使用nullish-coalescing-operator ifExists ?? elseUseThis

不幸的是，它没有开箱即用并告诉我安装 babel 插件，但是将其添加到 .babelrc 后，它仍然无法正常工作。

有没有办法在 Create React App 中添加这种支持？

4

2 回答 2

3

CRA 不会读取您的.babelrc.

不弹出通常的方法是使用这两个包：

npm install --save-dev react-app-rewired customize-cra

更改 package.json 中的脚本部分：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
},

然后你可以安装你喜欢的 babel 插件：

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator

config-overrides.js然后在根目录下创建一个文件。

const {override, addBabelPlugin} = require('customize-cra')

module.exports = override(
  addBabelPlugin("@babel/plugin-proposal-nullish-coalescing-operator")
);

来自 CRA 的“内部”通天塔将被扩展。

从已安装的软件包中查阅 github 上的文档以进行进一步调查：

react-app-rewired

custom-cra尤其是api-docs（例如，传递一系列插件，关于在测试脚本中使用插件的警告......）

我已经用一个新创建的带有 CRA 的应用程序对此进行了测试，它就像一个魅力。当我使用 Javascript 时，它应该以类似的方式与 Typescript 一起使用。

于 2019-10-28T03:58:38.720 回答
0

感谢 Tweini 对 3.3.0 之前的旧版本的回答。

对于较新版本的 CRA [包括如果您更新反应脚本]，支持此功能！

https://github.com/facebook/create-react-app/releases/tag/v3.3.0

于 2020-03-11T14:51:29.730 回答