时间戳

首页 > 解决方案 > Babel 7.5 针对 babel-preset-es2015 而不是 @babel/preset-env

reactjs - Babel 7.5 针对 babel-preset-es2015 而不是 @babel/preset-env

问题描述

我已经安装了 babel 7.5，它应该理想地针对 preset-env 包，但不确定它为什么要寻找“babel-preset-es2015”。

你们能告诉我我犯了什么错误吗？下面是我的代码

包.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0"
  }
}

.babelrc

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

以下是错误：

模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：
错误：无法从 'D:\Shashank\Projects\UploadUtility' 找到模块 'babel-preset-es2015'

标签： reactjsbabeljs

解决方案

你好@Shashank Srivastava，

在webpack.config.js文件中，您具有模块属性

module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react'] // here is the problem!
            }
         }
      ]
   },

我发现预设的旧术语是这里的问题。

对于 babel 7.5+，在这种特殊情况下，正确的预设名称是“@babel/preset-env”和“@babel/preset-react” 。

因此，长话短说，您已经在.babelrc文件中拥有了新的正确预设名称，因此您应该使用新的预设名称更新webpack.config.js文件：

query: {
   presets: ["@babel/preset-env", "@babel/preset-react"] // updated preset names
}

它将指示 babel-loader 查找并加载正确的预设。

这个解决方案对我有用，所以我希望它也对你有用。

推荐阅读