Webpack无法转译自定义npm包导入的模块，该如何解决？

问题原因 #

你碰到的核心问题其实很典型：直接从Git仓库拉取的npm包是未编译的源码，而你的项目Webpack默认不会去编译node_modules目录下的文件：

• 你的npm包通过git+ssh地址引入，包里的代码还是带ES6+语法（比如扩展运算符...）的原始源码，没有提前编译成兼容环境的版本。
• 项目的Webpack配置里，babel-loader只指定了include: APP_DIR——也就是只处理你自己项目的代码，完全不会碰node_modules/r2d2里的文件。Webpack遇到未转译的ES6+语法，自然就抛出Unexpected token的解析错误了。

解决办法 #

这里给你三种可行的方案，你可以根据实际场景选择：

方案1：给npm包添加编译流程（最推荐）

这是规范的npm包发布/共享方式，确保别人拿到的是编译好的代码，不需要额外配置：

1. 在你的npm包项目里，安装必要的babel工具：

   npm install @babel/cli @babel/preset-env --save-dev
   

2. 更新包的.babelrc，添加env预设保证代码兼容性：

   { "presets": ["@babel/preset-env", "stage-3"] }
   

3. 在包的package.json里添加编译脚本，并指定入口为编译后的文件：

   {
     "scripts": {
       "build": "babel src -d dist"
     },
     "main": "./dist/js/main.js"
   }
   

4. 运行npm run build生成dist编译目录，把dist提交到Git仓库（或发布到npm平台）。这样其他项目引入时，直接使用的是转译后的代码，不会有语法问题。

方案2：修改引入项目的Webpack配置，让babel-loader处理这个包

如果你暂时不想调整npm包的结构，可以修改项目的Webpack规则，让babel-loader处理node_modules/r2d2：

• 方法一：扩展include范围，把包的路径加进去：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.jsx?/,
          include: [APP_DIR, path.resolve(__dirname, 'node_modules/r2d2')],
          loader: 'babel-loader'
        }
      ]
    }
  }
  

• 方法二：用exclude排除其他node_modules，只处理目标包：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.jsx?/,
          exclude: /node_modules(?!\/r2d2)/,
          loader: 'babel-loader'
        }
      ]
    }
  }
  

  注意：这种方法会增加Webpack的构建时间，而且如果包的依赖也有未编译代码，可能引发新问题，所以优先推荐方案1。

方案3：补全npm包的Babel配置

你的npm包原来的.babelrc只有stage-3预设，建议加上@babel/preset-env——这样即使其他项目需要编译这个包，也能确保所有ES6+语法被正确转译。

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