如何使用 TS 配置 CRA 以支持 nullish-coalescing-operator

Question

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

不幸的是开箱即用，告诉我安装babel插件，但是添加到.babelrc后还是不行。

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

Answer 1

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 的 'internal' babel 将得到扩展。

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

react-app-rewired

customize-cra especially the api-docs（例如传递插件数组，关于在测试脚本中使用插件的注意事项...）

我已经使用 CRA 新创建的应用程序对此进行了测试，效果非常好。当我使用 Javascript 时，它应该以类似的方式与 Typescript 一起使用。

Answer 2

感谢Tweini 3.3.0之前旧版本的解答

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

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

如何使用 TS 配置 CRA 以支持 nullish-coalescing-operator

How to configure CRA with TS to support nullish-coalescing-operator

typescript

create-react-app

null-coalescing