Question

我尝试将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"

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

Answer 1

在 node@10.15.3 ， npm@6.4.1 和 babel@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，请不要忘记将解析器设置为 babel-eslint ，就像在您的 .eslintrc 文件中那样：

{
    "parser": "babel-eslint"
}

Answer 2

Babel引入了一个名为@babel/core的东西。只需运行npm install @babel/core。

Babel的大部分内容都已重命名为@babel/PACKGAGE_NAME

Answer 3

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

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

在那之后，您可能需要npm prune才能丢弃node_modules中过时的软件包。

编辑：

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

.babelrc

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

webpack配置

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

如何升级到Babel 7

3 个答案: