Babel未转译Node.js模块致Webpack打包报错问题排查

这个SyntaxError: Unexpected token 'export'错误的核心原因是你的Webpack配置没有正确匹配.js文件，导致Babel没转译包含ES模块语法的chalk.console.js——Node.js默认处理CommonJS模块，原生不认识ES模块的export关键字，所以运行打包文件时直接报错。

具体问题点 #

看你的webpack.config.js里的模块规则：

{
  test: /.js$/, // 这里的正则表达式写错了！
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

正则里的.是通配符，会匹配任意单个字符后接js的字符串（比如xajs、bjs），根本不是我们要的匹配.js后缀的文件。正确写法应该是/\.js$/，用反斜杠转义.，让它只匹配字面意义的点。

修复步骤 #

1. 修正Webpack的test正则 #

把webpack.config.js里的模块规则修改为：

module: {
  rules: [
    {
      test: /\.js$/, // 加上反斜杠转义，正确匹配.js后缀文件
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

这样Webpack会正确识别所有.js文件并交给Babel转译，把ES模块的export转换成Node.js能识别的CommonJS语法。

2. 优化Babel配置（可选但推荐） #

当前你的.babelrc配置比较基础，可以添加useBuiltIns和corejs配置，让Babel自动按需引入polyfill，这样你就不用在index.js里手动写require('core-js/stable')和require('regenerator-runtime/runtime')了：
修改.babelrc为：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

之后可以把index.js里的那两行手动引入代码删掉。

3. 重新运行打包命令 #

执行npm run dev-run，此时Babel会正确转译所有.js文件，打包后的index-bundle.js里的ES模块语法都会被转换成CommonJS，就不会再出现Unexpected token 'export'的错误了。

为什么另一个项目能正常运行？ #

大概率是因为另一个项目的Webpack配置里，test的正则表达式是正确的（用了/\.js$/），所以Babel能正常处理所有.js文件，ES模块语法被正确转译。

内容的提问来源于stack exchange，提问作者S. Joshi