Question

所以我开始了一个新的CRA项目，我正在使用TS beta获得一些甜美的功能，例如链接运算符，但我也想使用import express from 'express' import onHeaders from 'on-headers' const router = express.Router() function responseDebugger() { console.log(JSON.stringify(this.getHeaders())) } router.post('/', (req, res, next) => { onHeaders(res, responseDebugger) res.json({}) }) export default router nullish-coalescing-operator

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

是否无法在Create React App中添加此支持？

Answer 1

CRA不会读取您的.babelrc。

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

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

更改package.json中的scripts部分：

"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

customize-cra，尤其是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

2 个答案: