ReactJS+Webpack编译报错：扩展语法(...)无法识别求助

嘿，我之前也碰到过完全一样的问题！你这个报错的核心原因很明确：虽然你已经安装了babel-plugin-transform-object-rest-spread插件，但Babel并没有在编译流程里启用它——毕竟光安装不配置，插件是不会自动生效的。

具体解决方案分两种配置场景： #

1. 使用独立Babel配置文件（.babelrc）

在项目根目录创建或修改.babelrc文件，把插件添加到配置列表中：

{
  "presets": ["react", "env"],
  "plugins": ["transform-object-rest-spread"]
}

2. 直接在Webpack配置里配置babel-loader

如果你习惯把Babel配置写在webpack.config.js里，那就在babel-loader的options字段中补充插件配置：

module.exports = {
  // ...其他Webpack配置项
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react', 'env'],
            plugins: ['transform-object-rest-spread'] // 关键配置行
          }
        }
      }
    ]
  }
}

额外验证步骤 #

为了确保依赖没有安装异常，可以重新安装一遍插件，避免缓存或安装不完全的问题：

# npm用户执行
npm install --save-dev babel-plugin-transform-object-rest-spread

# yarn用户执行
yarn add --dev babel-plugin-transform-object-rest-spread

为什么单独运行代码没问题？ #

你单独运行代码时，应该是依赖了Node 8.9.1原生支持对象扩展语法的特性，但Webpack编译时会通过Babel处理代码，而Babel默认不会转换这个语法，必须靠专门的插件来完成转换，所以就出现了编译报错的情况。

做完上面的配置后，重新启动Webpack编译，这个语法错误应该就消失啦！

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