如何使用 Create React App 和 TypeScript 启用可选链接答案

【问题标题】：How to enable optional chaining with Create React App and TypeScript如何使用 Create React App 和 TypeScript 启用可选链接
【发布时间】：2020-03-24 09:25:21
【问题描述】：

目前不支持实验性语法“optionalChaining” 启用

我收到了上述错误。我关注了这个post 并将"@babel/plugin-proposal-optional-chaining": "^7.7.4" 添加到我的devDependencies 中。

然后我得到这个错误，

将@babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) 添加到 Babel 配置的“插件”部分以启用转换。

所以我按照这个post 并将.babelrc 文件添加到我的项目的根目录中

{
    "presets": ["react", "es2015","stage-1"],
    "plugins": ["transform-runtime", "transform-optional-chaining"]
}

这似乎没有任何作用。我还听到有人提到Create React App 不允许你修改 babel 的配置。所以我的问题是如何启用可选链接无需重新布线整个CRA？

P.S. 我正在使用"typescript": "^3.7.2"，或者至少我的package.json 是这么说的。我尝试了npm install 以确保它已更新。不确定CRA 是否在下面做了一些奇怪的事情并以某种方式使用旧版本的TypeScript。

编辑： 当我使用CRA 开始这个项目时，我相信我们使用的是TypeScript: 3.6.x。我想使用Optional Chaining，所以我将我的package.json 文件更改为"typescript": "^3.7.2" 然后npm install。我认为问题是，TypeScript 知道我正在使用3.7.2，但CRA 仍然有旧配置，我不确定如何更新它。

【问题讨论】：

您可以使用typescript 3.7。可选链接现在是本机支持的功能。
我正在使用 TypeScript ^3.7.2。或者至少我的package.json 是这么说的。我也试过npm install。

标签： typescript babeljs create-react-app

【解决方案1】：

Create-React-App 使用 babel 转译 TypeScript，因此它不使用您安装的 npm 版本的 TypeScript。 react-scripts 3.3.0 版本支持 TypeScript 3.7。您可以安装并使用它：

yarn add react-scripts@3.3.0

-或-
npm install -s react-scripts@3.3.0

【讨论】：

你可以在不使用 TS 的情况下在 react-scripts 3.3.0 上使用可选链吗？
否 - 可选链是一种 TypeScript 功能，需要转译为 JavaScript 才能在浏览器或 NodeJS 中工作。
@Badrush Optional Chaining 是 TS 功能，没有 TS 怎么用？就像我说的，我可以不打破鸡蛋就吃蛋黄吗？简单回答是不！但是希望他们尽快将其添加到 vanilla JS 中。

【解决方案2】：

React 脚本 3.3.0 及更高版本支持它。无需安装 react-scripts@next。

只需放入 package.json "react-scripts": "^3.3.0" 即可。

【讨论】：

好吧，我不再与我为之进行 React 应用程序配置的公司合作。所以我不能很容易地测试这个。但很高兴知道。这可能对未来的读者有所帮助。
现在回头看，和@LukeP 建议的一样，哈哈
@HafizTemuri Luke 更新了他的答案。他的回答是从 react-scripts@next 开始

【解决方案3】：

package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "customize-cra": "^0.4.1",
    "react-app-rewired": "^2.1.3"
  }
  ...other
}

config-overrides.js

const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());

.babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

detailed blogpost

【讨论】：

我在 OP 中提到过，我不想重新连接整个事情。 "So my question is how can I enable optional chaining without re-wiring the whole CRA?"
如果我已经在使用customize-cra 来覆盖配置，我该如何使用它？例如：module.exports = function override(config) { config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']; return config; };