简短回答:
运行 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) 我使用了 npx
和 babel-upgrade
(npx
已经包含在 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
依赖项。我在链接的框架和库部分添加/重新添加了这些内容。
devDependency
和dependencies
是什么意思? - Khemraj Sharma