尝试从 Babel 6 升级到 Babel 7 时，webpack 模块构建失败

Posted 2023-02-22

【中文标题】尝试从 Babel 6 升级到 Babel 7 时，webpack 模块构建失败

【英文标题】：webpack module build fails when attempting to upgrade from Babel 6 to Babel 7

【发布时间】：2019-07-30 17:09:52

【问题描述】：

我正在尝试将我们的项目从 Babel 6 升级到 7。我对 package.json 进行了以下更改：

  "devDependencies": 
    "babel-core": "6.26.3",
    "babel-eslint": "10.0.1",
    "babel-loader": "7.1.5",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-es2015-destructuring": "6.23.0",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "webpack": "4.28.4",
    "webpack-bundle-analyzer": "3.1.0",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "3.1.14",
    "workbox-webpack-plugin": "3.6.3"
  ,

摆脱了babel-preset-* 并添加了新的@babel/* 包。此外，还添加了 Jest。

  "devDependencies": 
    "@babel/cli": "7.2.3",
    "@babel/core": "7.3.4",
    "@babel/preset-env": "7.3.4",
    "@babel/preset-react": "7.0.0",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-es2015-destructuring": "6.23.0",
    "babel-polyfill": "6.26.0",
    "jest": "24.3.0",
    "react-test-renderer": "16.8.4",
    "webpack": "4.28.4",
    "webpack-bundle-analyzer": "3.1.0",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "3.1.14",
    "workbox-webpack-plugin": "3.6.3"
  ,

我们的项目使用Babel和Webpack，我们通过webpack.config.js管理Babel配置。因此，对该文件进行了以下更改：

webpack.config.js

  module: 
    rules: [
      
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      ,
      
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: 
          presets: ['react', 'es2015', 'env'],
          plugins: ['transform-class-properties', 'syntax-dynamic-import', 'transform-es2015-destructuring', 'transform-object-rest-spread']
        
      ,
    ]
  

更新了预设部分以使用@babel/react 和@babel/env。

  module: 
    rules: [
      
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      ,
      
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: 
          presets: ['@babel/react', '@babel/env'],
          plugins: ['transform-class-properties', 'syntax-dynamic-import', 'transform-es2015-destructuring', 'transform-object-rest-spread']
        
      ,
    ]
  

当我运行webpack --mode development 时，webpack 抛出以下错误：

ERROR in ./src/entry2.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react' from 'C:\MyApp'
- If you want to resolve "react", use "module:react"
- Did you mean "@babel/react"?
    at Function.module.exports [as sync] (C:\MyApp\node_modules\resolve\lib\sync.js:58:15)
    at resolveStandardizedName (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
    at resolvePreset (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
    at loadPreset (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
    at createDescriptor (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
    at items.map (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at presets (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)
    at mergeChainOpts (C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:320:26)
    at C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at buildRootChain (C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:120:22)
    at loadPrivatePartialConfig (C:\MyApp\node_modules\@babel\core\lib\config\partial.js:85:55)
    at Object.loadPartialConfig (C:\MyApp\node_modules\@babel\core\lib\config\partial.js:110:18)
    at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:140:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\MyApp\node_modules\babel-loader\lib\index.js:3:103)
    at _next (C:\MyApp\node_modules\babel-loader\lib\index.js:5:194)
    at C:\MyApp\node_modules\babel-loader\lib\index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:5:97)
    at Object.loader (C:\MyApp\node_modules\babel-loader\lib\index.js:56:18)
    at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:51:12)

当我更新了 babel-loader 的预设部分以使用“@babel/react”时，我不明白为什么 webpack 正在寻找 babel-preset-react 模块。哎呀，它甚至问，“你是说@babel/react 吗？”为什么，是的——我就是这么说的！有什么想法吗？

我在 node_modules 目录中找到了对“babel-preset-react”的引用，并从我们的依赖项（不是 devDependencies）部分中的包中获得了几个命中。但是，我假设npm install 会负责满足这些包的依赖关系。我错了吗？

最后，当第 4 行提到使用“module:react”时，它在说什么？这相关吗？

【问题讨论】：

不确定这是否会有太大帮助，但看起来您在同一个应用程序中混合了 babel 6 模块和 babel 7 模块。您可能想要更新以使用 @ 版本的 babel 模块，例如 @babel/preset-react babeljs.io/docs/en/babel-preset-react。此外，还有一个工具可以帮助升级到 babel 7 - github.com/babel/babel-upgrade

@soundslikeodd 感谢您提供指向升级工具的链接。它帮助我消除了可能性。

【参考方案1】：

我在使用上述升级工具时遇到了类似的问题，但为我解决的问题是在我的 webpack 配置中，该工具没有检测到必要的语法更改...

【参考方案2】：

正如 cmets 中提到的，我没有遇到过升级工具。通过尝试手动升级，使用它帮助我消除了我在package.json 中引入的一些错误。

但是，错误仍然存​​在。但是，在应用升级工具建议的更改后，我看到（并删除了）以下不必要的部分：

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

有这个部分是导致我的编译错误的原因。显然，我们能够在 webpack 的配置选项旁边运行几个月，并且（在幸福的无知中）没有遇到任何问题。在我删除它之后，一切都很好，使用 Babel 7，完全依赖于 webpack 配置。

如果有一个工具可以帮助在使用 webpack 和 Babel 的项目中优化配置（即识别冗余/冲突），那就太好了。在 .babelrc、package.json 和 webpack.config.js 之间，目前存在太多潜在的陷阱。

再次感谢您的帮助！