React Native从Babel 6升级到Babel 7

15

如何将现有的React Native项目从Babel 6升级到Babel 7?

以下是旧依赖项:

 "dependencies": {
    .........
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "prop-types": "^15.5.10",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-redux": "5.0.7",
    "redux": "^4.0.0",
    "redux-actions": "^2.6.1",
    "redux-mock-store": "^1.5.1",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.1.0",
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "eslint": "^4.18.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-flowtype": "^2.46.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.1",
    "eslint-plugin-react": "^7.4.0",
    "gulp": "^3.9.0",
    "gulp-eslint": "4.0.2",
    "gulp-mocha": "6.0.0",
    "jest": "^23.5.0",
    .....
  },
你需要遵循哪些步骤来进行更新?新的依赖关系应该是什么样子的?
在阅读了 Babel 文档之后,我并不清楚应该做什么才能完成升级,需要运行哪些命令,在 dependencies 和 devDependencies 中应该添加什么。
另外,我也不太清楚在 React Native 项目中,Babel 6 和 Babel 7 之间有什么区别,以及对 JS 代码会发生什么影响。
请不要只回复 Babel 文档或 React Native 0.57 变更日志的链接。
我至少需要一些基本步骤来完成这次升级,并且一个基于 Babel 7 的 RN 项目的 package.json 示例。
3个回答

7

简短回答:

运行 npx babel-upgrade

(然后您可以查看package.json以检查更改了什么)

详细回答:

对于RN 0.57.x,在阅读了babel和babel-upgrade文档之后,我意识到只需将所有旧的babel依赖项放在我的项目的devDependencies中即可:

"dependencies": {
    .........
    "react": "16.3.1",
    "react-native": "0.55.4",
 },

"devDependencies": {
   "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "react-native": "0.55.4",
    "babel-eslint": "^8.2.2",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",        
    .....
  },

1) 我使用了 npxbabel-upgradenpx 已经包含在 npm 版本 >= 5.2.0 中)如果你的 npm 版本较老,你需要全局安装 npx

npx 让你无需本地安装即可运行 babel-upgrade

2) 我运行了 npx babel-upgrade(没有使用 --write 选项),以查看升级将如何影响我的 package.json 依赖项)

3) 我运行了 npx babel-upgrade --write

4) 我将 RN 版本设置为 0.57.1,并将 babel-preset 依赖项从 "babel-preset-react-native": "^5" 更改为 "metro-react-native-babel-preset": "^0.45.0",并将 .babelrc 配置更改为:

{
    "presets": ["module:metro-react-native-babel-preset"]
}

现在package.json看起来是这样的:
  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.1",
    .......
  }

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-do-expressions": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    .....

}

我不确定gradle-upgrade添加的所有新依赖项是否都是必需的,但该项目在Android和iOS上都能够成功构建和运行。

如果您找到了更好的解决方案或改进Babel更新,请添加评论或新增答案,我将很乐意更新我的答案或接受一个更好的答案。

来源:

https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#057

https://github.com/babel/babel-upgrade

对于RN 0.58.6,我注意到我不需要那么多的babel依赖项。我注意到这一点是通过使用react-native init命令创建一个新项目。
我的package.json文件现在看起来像这样:
{
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.6",
    // ....

  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.6.3",
    // .... 

  },
  "jest": {
    "preset": "react-native", 
   // ...
  }

}

注意: 对于IOS:我能够在IOS上构建它,而不需要在pod文件中使用任何react/react-native依赖项。我在链接的框架和库部分添加/重新添加了这些内容。


为什么会有这么多的Babel依赖?devDependencydependencies是什么意思? - Khemraj Sharma
为什么有这么多的babel依赖?因为babel有很多依赖:P"devDependency" - 只在开发期间使用的东西 "dependencies" - 在应用程序运行时使用的东西 - boogie666

6

使用 babel-upgrade

您可以尝试使用babel-upgrade自动升级您的Babel依赖项。

即使不全局安装,也很容易使用。

我建议您拥有一个干净的工作目录(没有未提交的更改),并简单地运行以下命令:

npx babel-upgrade --write

这将使用正确的Babel版本和包更新您的package.json.babelrc文件。

--write命令只是告诉工具将更改保存到磁盘。这就是为什么我建议拥有一个干净的工作目录,这样您就可以使用git diff查看更改。如果省略--write,它将只在控制台中显示所需的更改。

您可以在https://github.com/babel/babel-upgrade查看更多信息。


我在下面的回答中说了同样的话 :) - Florin Dobre
1
@FlorinDobre :) 是的,我想我注意到了,但是你的回答让我有点迷失了。我希望为其他来到这里的人发布一些更简洁的内容。希望你不会生气。 :) - Joshua Pinter
1
没关系,我重新编辑了我的答案,但我认为像你这样的答案对社区更好。它们提醒我们尽可能保持简单,并可以节省不想要细节的用户的时间 :) - Florin Dobre
@FlorinDobre 当然可以。但是我也喜欢保留你的原始答案,以备后人参考和历史记录。:+1: - Joshua Pinter

0

对于在2021年遇到此问题的任何人: npm install --save-dev @babel/core @babel/cli


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接