反应从Babel 6到Babel 7的本机升级 [英] React native upgrade from babel 6 to babel 7

问题描述

将现有的原生项目从babel 6升级到babel 7会采取什么步骤?

What would be the steps to upgrade from babel 6 to babel 7 an existing react-native project?

这些是旧的依赖项:

 "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",
    .....
  },

要执行此更新，您必须遵循什么步骤? 新的依赖项应如何显示?

What steps do you have to follow to make this update? How should the new dependencies looks like?

对我来说(在阅读Babel文档之后)还不是很清楚，我应该做些什么来进行此升级，要运行的命令以及应在依赖项中添加什么以及在devDependencies中应添加什么.

It is not very clear for me (after reading the babel doc) what I should do to make this upgrade, commands to run and what should be added in dependencies and what in devDependencies.

对于我来说，不清楚babel 6和babel 7在本机项目中使用JS代码发生了什么区别.

Also it is not very clear for me what is the difference between babel 6 and babel 7 regarding what is happening with the JS code in a react-native project.

请不要仅使用指向Babel文档或本机0.57更改日志的链接来回复.

Please don't respond with just links to babel doc or to react-native 0.57 change log.

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

I would need at least some basic steps to do this upgrade and an example of a package.json of a RN project based on babel 7.

推荐答案

简短答案:

run npx babel-upgrade

(然后您可以在package.json中查看以查看更改的内容)

(then you can take a look in package.json to check what changed)

答案:

对于RN 0.57.x，在阅读了babel和babel升级文档之后，我意识到将所有旧的babel依赖项包含在我的项目的devDependencies中就足够了:

For RN 0.57.x after reading the babel and babel-upgrade docs I realized it was enough to have all the old babel dependencies inside devDependencies for my project:

"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.

1) I used npx and babel-upgrade (npx is already included in npm versions >= 5.2.0) If you have older npm versions you have to install npx globally.

npx允许您运行babel-upgrade而不在本地安装它.

npx lets you run babel-upgrade without installing it locally.

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

2) I ran npx babel-upgrade ( without the --write option) to see how the upgrade will affect my 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配置更改为:

4) I set RN version to 0.57.1 and changed the babel-preset dependency from "babel-preset-react-native": "^5", to "metro-react-native-babel-preset": "^0.45.0",and .babelrc configuration to:

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

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

as written in the RN change log instructions.

现在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都可以构建并正常运行.

I am not sure if all the new dependencies added by gradle-upgrade are needed but the project builds and runs ok for both android and ios.

如果您发现此Babel更新有更好的解决方案或改进，请添加评论或添加新答案，我将很乐意更新我的答案或接受新的更好的答案.

If you find a better solution or improvements for this babel update please add a comment or add a new answer, I will be happy to update my answer or accept a new better one.

来源:

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 deps.我注意到这使用 react-native init 命令创建了一个新项目.

For RN 0.58.6 I noticed I do not need so many babel deps. I noticed this creating a new project with a react-native init command.

我的 package.json 文件现在看起来像这样:

My package.json file looks now like this:

{
  "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:我能够在Pod文件中没有任何react/react-native dep的情况下在IOS中构建它.我在链接的框架和库部分

NOTE: For IOS: I was able to build it in IOS without any react/react-native deps in pod file. I added/re-added those inside Linked Frameworks and Libraries section

这篇关于反应从Babel 6到Babel 7的本机升级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！