【问题标题】:React native upgrade from babel 6 to babel 7React 从 babel 6 到 babel 7 的原生升级
【发布时间】:2019-03-11 22:15:26
【问题描述】:

将现有的 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 示例。

【问题讨论】:

    标签: react-native babeljs


    【解决方案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) 我使用了npxbabel-upgradenpx 已经包含在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

    对于 RN 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 中构建它,而 pod 文件中没有任何 react/react-native deps。我在 Linked Frameworks and Libraries 部分中添加/重新添加了那些

    【讨论】:

    • 为什么这么多 babel 依赖? devDependencydependencies 是什么意思
    • "为什么有这么多 babel 依赖?"因为 babel 有很多依赖项:P "devDependency" - 仅在开发时使用的东西 "dependencies" - 在应用程序运行时使用的东西
    【解决方案2】:

    使用babel-upgrade

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

    它非常易于使用,即使无需全局安装。

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

    npx babel-upgrade --write
    

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

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

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

    【讨论】:

    • 我在下面的回答中说了同样的话:)
    • @FlorinDobre :) 是的,我想我发现了这一点,但对你的回答有点迷失了。我想为其他登陆这里的人发布更简洁的内容。我希望你没有被冒犯。 :)
    • 不用担心,我重新编辑了我的答案,但我认为社区最好也有像你一样的答案。它们提醒您让事情尽可能简单,并且可以为不需要详细信息的用户节省时间:)
    • @FlorinDobre 绝对。但出于后代和历史目的,我也喜欢保留您的原始答案。 :+1:
    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 2019-07-30
      • 2019-03-17
      • 2019-02-08
      • 2020-05-15
      • 1970-01-01
      • 1970-01-01
      • 2019-05-20
      • 1970-01-01
      • 2019-02-05
      相关资源
      最近更新 更多