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


14

目前未启用对实验语法“ optionalChaining”的支持

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

然后我得到这个错误,

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

所以我关注了这篇文章,并将.babelrc文件添加到了项目的根目录中

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

这似乎什么也没做。我还听到有人提到Create React App不允许您修改babel的配置。所以我的问题是,如何在不重新布线情况下启用可选链接CRA

PS我正在使用"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仍具有较旧的配置,我不确定如何更新它。


您可以使用打字稿3.7。可选链接现在是本机支持的功能。
尼古拉斯

我正在使用TypeScript ^3.7.2。或至少那是我package.json所说的。我也尝试npm install过。
哈菲兹·特姆里

Answers:


15

Create-React-App使用babel转换TypeScript,因此它不使用npm安装的TypeScript版本。3.3.0版本的react-scripts支持TypeScript 3.7。您可以将其安装并与以下产品一起使用:

  • yarn add react-scripts@3.3.0

    -要么-

  • npm install -s react-scripts@3.3.0


谢谢,正确的解决方案在这里。
拉蒙·冈萨雷斯

1
您可以在react-scripts 3.3.0不使用TS的情况下使用可选链接吗?
Badrush

否-可选链接是TypeScript功能,需要将其转换为JavaScript才能在浏览器或NodeJS中工作。
LukeP

@Badrush可选链接是TS功能,如何在没有TS的情况下使用它?就像我说的那样,我能不打碎鸡蛋就吃蛋黄吗?简单回答是不!但是希望他们尽快将其添加到香草JS中。
哈菲兹·特姆里

6

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

只需将package.json放进去即可"react-scripts": "^3.3.0"


1
好吧,我不再与正在为React应用配置的公司合作。因此,我无法真正轻松地对此进行测试。但是很高兴知道。这可能对将来的读者有所帮助。
哈菲兹·特姆里

现在,我回头看,它与@LukeP建议的内容相同,哈哈
Hafiz Temuri

@HafizTemuri luke更新了他的答案。他的回答是开始与反应的脚本@未来
以利沙太极扣

2

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"]
}

详细的博客文章


我提到过在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; };
Subhendu Kundu
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.