Webpack 4 + React项目使用扩展运算符(...)遇Unexpected Token报错求助

你说得没错，这个Unexpected token错误确实是因为Babel没有正确转译对象扩展运算符导致的。对象的...扩展语法属于ES2018的特性，默认的基础Babel配置通常不会包含对它的转译支持，下面是具体的解决步骤：

1. 安装必要的Babel依赖 #

首先确保你安装了基础Babel工具链，同时添加对象扩展运算符对应的插件：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-object-rest-spread babel-loader

2. 配置Babel以支持对象扩展语法 #

你有两种配置方式，选其一即可：

方式一：使用单独的.babelrc配置文件 #

在项目根目录创建.babelrc文件，写入以下内容：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

方式二：直接在Webpack配置中修改babel-loader选项 #

修改webpack.config.js里的babel-loader配置块：

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ["@babel/preset-env", "@babel/preset-react"],
      plugins: ["@babel/plugin-proposal-object-rest-spread"]
    }
  }
}

3. 可选：通过@babel/preset-env自动适配目标环境 #

如果你使用的是较新版本的@babel/preset-env，也可以通过配置目标浏览器，让它自动识别并转译所需特性，无需手动添加插件：
修改.babelrc为：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }],
    "@babel/preset-react"
  ]
}

这样preset-env会根据你指定的浏览器范围，自动引入所有必要的转译插件，包括对象扩展运算符的支持。

4. 验证修复 #

重新运行开发命令：

npm run dev

这时候对象扩展运算符的语法应该能被正确转译，之前的语法错误就会消失了。

内容的提问来源于stack exchange，提问作者Murali N