Webpack中配置Babel处理node模块及npm run build ES6语法错误排查

你在执行npm run build时碰到Uglify抛出ES6相关语法错误，推测是sec-to-min这个node模块没被Babel正确处理——这个问题很常见，毕竟默认情况下Webpack的Babel loader只会转译你项目自己的源码，不会碰node_modules里的包，而如果这个模块本身用了未转译的ES6语法，Uglify（它只认ES5）自然就报错了。

下面给你两种可行的解决办法：

方法一：调整Babel Loader配置，让它处理特定模块 #

找到Webpack配置里的module.rules部分，找到对应babel-loader的规则。默认配置通常会排除所有node_modules目录，我们需要修改这个规则，让Babel跳过排除sec-to-min。

举个例子，原来的babel-loader配置可能是这样：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      include: [path.resolve(__dirname, 'src')]
    }
  ]
}

把它改成下面这样：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      // 排除node_modules，但sec-to-min除外
      exclude: /node_modules(?!\/sec-to-min)/,
      // 明确包含项目源码和目标模块
      include: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'node_modules/sec-to-min')
      ]
    }
  ]
}

这里的(?!\/sec-to-min)是正则的负向前瞻语法，简单说就是告诉Webpack：除了sec-to-min这个子目录，其他node_modules里的文件都排除。这样Babel就会去转译这个模块的代码了。

方法二：检查模块是否提供了ES5预编译版本 #

有些npm包发布时会同时提供转译好的ES5版本，你可以去看看sec-to-min的package.json文件，有没有main字段指向ES5文件，或者有没有module、browser这类专门的字段。如果有的话，Webpack可能可以直接使用这些已转译的版本，不用额外配置Babel——不过如果这个模块没有提供的话，还是老老实实用上一种方法吧。

额外提示：确保你的Babel配置生效 #

你的.babelrc配置看起来是没问题的：es2015预设负责转译标准ES6语法，stage-0处理实验性语法，transform-runtime避免重复注入辅助代码。不过如果担心配置文件没被正确读取，你也可以把Babel配置直接写在Webpack的loader选项里，比如：

loader: 'babel-loader',
options: {
  presets: ['es2015', 'stage-0'],
  plugins: ['transform-runtime'],
  comments: false
}

这样能避免配置文件加载的潜在问题。

修改完配置后，记得删掉node_modules/.cache（如果存在的话），然后重新执行npm run build，应该就能解决Uglify的ES6语法报错问题了。

内容的提问来源于stack exchange，提问作者Karo Castro-Wunsch