如何升级到 babel 7

Posted

技术标签:

【中文标题】如何升级到 babel 7【英文标题】:How to upgrade to babel 7 【发布时间】:2019-02-08 23:56:27 【问题描述】:

我尝试将 Webpack 和 babel 分别升级到 4 和 7,但无法正常工作。 official doc 也对升级没有太大帮助

我遇到以下问题

编译器错误:找不到模块'@babel/core'@multi 中的错误 主要的

我正在使用的依赖项:

"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

如果需要更多详细信息,请告诉我。

【问题讨论】:

【参考方案1】:

使用babel-upgrade

node@10.15.3npm@6.4.1babel@7.4.0

上测试

您可以使用以下脚本。 (仅节点 5+ 上的 npx)

npx babel-upgrade --write

--write 标志将更新写入你的 package.json 和 .babelrc。

您将对 package.json 进行以下修改:

"devDependencies": 
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-private-methods": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0"

.babelrc


  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    [
      "@babel/plugin-proposal-class-properties"
    ],
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-private-methods"
    ]
  ]

在上述插件中,如果您选择实现它们,您需要@babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods 才能使私有属性正常工作。

如果你使用 eslint,不要忘记在你的 .eslintrc 文件中将你的解析器设置为 babel-eslint


    "parser": "babel-eslint"

【讨论】:

这对于 babel.config 是否也有效,因为某些版本是名称而不是 .babelrc? @CarmineTambascia。自 v7.x 以来,情况略有变化。就像 babel 文档声称的那样:根据configuration 页面中提到的用例,允许所有 Babel API 选项。 这也应该被视为一个答案【参考方案2】:

Babel 将模块名称 babel-core 更改为 @babel/core。只需运行npm install @babel/core。这将安装最新版本的 Babel 核心。

Babel 中的大多数包都已重命名为遵循@babel/PACKAGE_NAME 的模式。因此,如果要升级,请更改软件包名称以遵循模式并运行 npm install

要升级到 Babel 7,你可以使用这个migration guide。

【讨论】:

【参考方案3】:

您可以使用 babel-upgrade 进行平滑升级。

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

之后您可能需要npm prune 才能丢弃 node_modules 中过时的包。

编辑:

当我尝试 babel-upgrade 时,babel 和 webpack 配置没有被修改。所以我不得不手动更改它。这是一个例子。

.babelrc

"presets": ["@babel/env", "@babel/react"]

webpack 配置

loader: 'babel-loader',
options:  presets: ['@babel/env', '@babel/react']

【讨论】:

以上是关于如何升级到 babel 7的主要内容,如果未能解决你的问题,请参考以下文章

多应用程序中的错误:将 babel 升级到 v7 后无法解析模块“babel-loader”

babel升级7.x的心得

JS周刊#401 - Babel 7.0 发布babel-upgrade 自动升级工具,ECMAScript 2018语言特性

babel 7 - 如何防止添加“严格模式”[重复]

[转] 如何写好.babelrc?Babel的presets和plugins配置解析

如何在 react-native 0.57+ 上为 react-relay(经典)配置 babel