react-native - React 原生从 babel 6 升级到 babel 7

Question

将现有的 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 文档之后)我应该做什么来进行升级、运行命令以及应该在依赖项中添加什么以及在 devDependencies 中添加什么。

此外，我也不太清楚 babel 6 和 babel 7 之间关于 react-native 项目中 JS 代码发生了什么的区别。

请不要只回复 babel doc 或 react-native 0.57 更改日志的链接。

我至少需要一些基本步骤来进行此升级，以及基于 babel 7 的 RN 项目的 package.json 示例。

Answer 1

简答:
run npx babel-upgrade
(然后你可以查看 package.json 以查看发生了什么变化)

长答案 :

对于 RN 0.57.x，在阅读了 babel 和 babel-upgrade 文档后，我意识到在我的项目的 devDependencies 中拥有所有旧的 babel 依赖项就足够了:

"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) 我用过 npx和 babel-upgrade ( npx 已经包含在 npm 版本 >= 5.2.0 中)
如果您有年龄较大的 npm您必须安装的版本 npx全局。
npx让你运行 babel-upgrade无需在本地安装。

2) 我跑了 npx babel-upgrade (没有 --write option )看看升级将如何影响我的 package.json deps)

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

如 RN 更改日志说明中所述。

现在 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

对于 注册护士 0.58.6 我注意到我不需要这么多 babel deps。我注意到这使用 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 中构建它而无需任何 react/react-native pod 文件中的 deps。我在里面添加/重新添加了 链接的框架和库 部分