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

时间:2019-03-08 16:19:24

标签: reactjs webpack jestjs babel

我正在尝试将我们的项目从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/*软件包。另外,添加了笑话。

  "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 /反应吗?”为什么,是的-那就是我所说的!有什么想法吗?

我在node_modules目录中添加了对“ babel-preset-react”的引用,并从依赖项(不是devDependencies)部分的程序包中获得了一些成功。但是,我假设npm install将负责满足那些程序包的依赖性。我错了吗?

最后,当提到使用“ module:react”时,第四行在说什么?这有关系吗?

2 个答案:

答案 0 :(得分:0)

我使用提到的updgrade工具遇到了类似的问题,但是对我来说解决此问题的方法是在我的webpack配置中,该工具未检测到语法上的必要更改...

enter image description here

答案 1 :(得分:-1)

如评论中所述,我没有遇到升级工具。使用它有助于尝试手动升级,从而消除了我在package.json中引入的一些错误。

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

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

具有此部分的原因是导致我的编译错误。显然,我们能够在Webpack的配置选项旁边运行几个月,并且(在无知的情况下)没有遇到任何问题。删除它后,Babel 7的一切运行都很好,完全依靠webpack的配置。

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

再次感谢您的帮助!