Babel 7.0 和 webpack 失败答案

【问题标题】：Babel 7.0 and webpack failBabel 7.0 和 webpack 失败
【发布时间】：2018-11-13 05:22:57
【问题描述】：

我正在尝试运行 babel

npx webpack -p --env production && babel src --out-dir dist --source-maps inline

我看到错误出现在命令的后面部分。

运行命令后出现的错误：

Error: Requires Babel "^7.0.0-0", but was loaded with "6.25.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
at throwVersionError (/mnt/c/Users/Arkadiy/Desktop/project4/node_modules/@babel/helper-plugin-utils/lib/index.js:65:11)
at Object.assertVersion (/mnt/c/Users/Arkadiy/Desktop/project4/node_modules/@babel/helper-plugin-utils/lib/index.js:13:11)
at _default (/mnt/c/Users/Arkadiy/Desktop/project4/node_modules/@babel/plugin-proposal-decorators/lib/index.js:35:7)
at /mnt/c/Users/Arkadiy/Desktop/project4/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
at Function.memoisePluginContainer (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
at Function.normalisePlugin (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
at /mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
at Array.map (<anonymous>)
at Function.normalisePlugins (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transform (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/lib/babel/util.js:50:22)
at Object.compile (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/lib/babel/util.js:59:12)
at write (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/lib/babel/dir.js:21:21)
at handleFile (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/lib/babel/dir.js:43:7)
at /mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/lib/babel/dir.js:61:9
at Array.forEach (<anonymous>)
at handle (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/lib/babel/dir.js:59:29)
at Array.forEach (<anonymous>)
at module.exports (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/lib/babel/dir.js:69:15)
at Object.<anonymous> (/mnt/c/Users/Arkadiy/AppData/Roaming/npm/node_modules/babel-cli/lib/babel/index.js:129:1)
at Module._compile (module.js:662:30)

这是我的 config.js 信息：

开发依赖：

"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-flowtype": "^2.50.3",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.27.2",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"flow-bin": "^0.82.0",
"flow-typed": "^2.5.1",
"jest": "^23.6.0",
"jest-cli": "^23.6.0",

依赖关系：

"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.5",
"@babel/node": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.2",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.5",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"

Webpack 配置

module: {
rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: 'babel-loader',
  },
  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
  },
],

【问题讨论】：

标签： webpack babeljs babel-loader

【解决方案1】：

尝试运行npm cache clean 并使用npm install 重新安装，然后重新构建。

【讨论】：

给出错误npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead. On the other hand, if you're debugging an issue with the installer, you can use `npm install --cache /tmp/empty-cache` to use a temporary cache instead of nuking the actual one. npm ERR! npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.
您可以尝试npm cache clean --force，但风险自负。不过，如果你这样做，我不确定会有什么重大影响。