Vue项目启动遇Module parse failed错误求助（Webpack3+Babel6环境）

你的问题核心是Webpack 3 + Babel 6默认不会转译node_modules目录下的文件，但idb（Firebase 9.x依赖的包）的代码里用了未经转译的ES6扩展运算符...oldTraps，导致Webpack无法解析。不用修改node_modules里的代码，按下面的步骤改配置就能解决：

1. 调整Webpack配置，让Babel处理idb包 #

打开你的webpack.dev.conf.js，找到module.rules里的babel-loader规则，修改exclude或添加include，把idb纳入转译范围：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      // 排除node_modules里除了idb之外的所有包
      exclude: /node_modules(?!\/idb)/,
      // 同时明确指定要转译的目录，包括idb
      include: [resolve('src'), resolve('test'), resolve('node_modules/idb')]
    }
    // 其他规则...
  ]
}

2. 确保Babel 6支持扩展运算符 #

Babel 6本身不默认支持对象扩展运算符，需要安装对应的插件：

npm install babel-plugin-transform-object-rest-spread --save-dev

然后在你的.babelrc（或Babel配置文件）里添加这个插件：

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-object-rest-spread"]
}

3. 验证修复 #

重启Webpack开发服务器，错误应该会消失。

如果之前升级降级依赖没用，是因为Webpack 3和Babel 6的组合对新ES语法的支持需要显式配置转译范围，上述配置就是让Babel专门处理idb包的ES6代码，同时不影响其他依赖。

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