在 babel 中预设反应和反应之间的区别答案

【问题标题】：difference between preset-react and react in babel在 babel 中预设反应和反应之间的区别
【发布时间】：2020-06-19 11:29:52
【问题描述】：

我正在从头开始创建一个没有 create-react-app 的 React 项目。但它在我的 Mac 上运行良好，但在我的其他 ubuntu 笔记本电脑上却不行。下面是我之前的 .babelrc 文件内容。

"presets": [
    "@babel/preset-react",
    "@babel/preset-env"
]

它在我的 mac（npm 版本 6.12.0）上运行良好，但在 ubuntu（npm 版本 6.14.5）上运行良好它显示无法编译 src/index.js -> 行下的错误

ReactDOM.render(<App />, document.getElementById('root'));

所以我将 .babelrc 环境文件更改为

"presets": [
    "@babel/react",
    "@babel/env"
]

最终两者都奏效了。但我不确定@babel/preset-react 和@babel/react 之间的确切区别。如果有人知道这两者之间的确切区别，请告诉我。感谢您的帮助！

【问题讨论】：

根据babeljs.io/docs/en/presets#preset-shorthand，您通常可以在预设名称中省略babel-preset，但babeljs.io/docs/en/babel-preset-react 并不建议将特定的@babel/preset 作为选项。

标签： reactjs npm babeljs

【解决方案1】：

https://babeljs.io/docs/en/v7-migration#package-renames

{
-  "presets": ["@babel/preset-react"],
+  "presets": ["@babel/react"], // this is equivalent
-  "plugins": ["@babel/transform-runtime"],
+  "plugins": ["@babel/plugin-transform-runtime"], // same
}

【讨论】：