如何升级到 babel 7

IT技术 reactjs babeljs webpack-4 babel-loader
2021-05-04 11:36:17

我尝试将 Webpack 和 babel 分别升级到 4、7,但无法使其工作。此外,官方文档对升级没有太大帮助

我遇到以下问题

编译器错误:找不到module“@babel/core”@multi main 中的错误

我正在使用的依赖项:

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

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

3个回答

使用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 将module的名称更改babel-core@babel/core就跑npm install @babel/core这将安装最新版本的 Babel 核心。

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

要升级到 Babel 7,您可以使用此迁移指南

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

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

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

编辑:

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

.babelrc

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

网络包配置

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