从7升级到Babel-loader 8？我需要更改什么？

Question

我正在尝试从7升级到版本8。但是我遇到了一些错误。

我想我需要升级一些东西，但不确定

这就是我要打包的东西（我删除了与我的问题无关的插件）

 "dependencies": {
    "babel-plugin-emotion": "^9.2.5",
    "babel-polyfill": "^6.26.0",
    "http-proxy-middleware": "^0.18.0",
    "koa-connect": "^2.0.1",
    "koa-router": "^7.4.0",
    "koa2-connect-history-api-fallback": "0.0.6",
    "npm": "^6.1.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-emotion": "^9.2.5",
    "react-responsive-modal": "^3.3.0",
    "react-router-dom": "^4.2.2",

  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mobx-react-router": "^4.0.4",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.16.5",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  }

我在.baelrc中

{
  "presets": ["env", "react"],
   "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "emotion"]
}

我看到我需要升级babel-core，preset-env，preset-react之类的东西，但我不确定还有什么。

我得到这个错误

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.

编辑我最新的配置（现在似乎可以使用）

.babelrc

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-proposal-object-rest-spread",
    "transform-class-properties"
  ]
}

package.json

  "dependencies": {
    "@babel/polyfill": "^7.0.0",
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
  }

Answer 1

使用Babel 7将所有插件移至@babel范围。要更新package.json，您需要使用^ 7.0.0版本相应地重命名所有插件和预设。

您可以在这里找到所有官方插件。

如果您打开自己感兴趣的插件，则会看到它们都被重命名为，例如：@babel/plugin-proposal-class-properties。

• babel-polyfill => @babel/polyfill
• babel-core => @babel/core
• babel-plugin-transform-class-properties => @babel/plugin-proposal-class-properties
• 你明白了。babel-现在是@babel/，某些插件以开头proposal。

babel-plugin-emotion当然不是官方插件，所以它和保持不变 babel-loader。对于所有其他插件，请确保将名称与上面提供的链接上的新命名进行比较。打开每个插件的文件夹，以查看以以下名称开头的新名称@babel/。

现在，相同的命名也适用于.babelrc文件（或通常的babel配置），我建议您不要使用速记命名，而应在babel配置中包含插件和预设的完整软件包名称：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
   // ...
}

希望这可以帮助！干杯。