如何结合Babel处理npm link？遭遇Unexpected token错误

你遇到的核心问题是Babel默认会跳过node_modules目录下的文件，而通过npm link关联的子仓库B是以符号链接形式存在于A的node_modules里，所以Babel没有转译B中的ES6+语法（比如扩展运算符），最终导致运行时语法报错。下面给你几个可行的解决方案：

方案1：让Babel主动转译你的本地包 #

在仓库A的Babel配置文件（babel.config.js或.babelrc）中，通过include规则指定要转译的本地包路径，或者调整exclude规则排除该包。

如果你的子仓库B的包名是adept-him-models，可以这样配置：

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env'], // 根据你的项目实际预设调整
  include: [
    './src/**/*', // 你的项目源码
    /adept-him-models/ // 匹配本地链接的包路径
  ]
};

或者用exclude的负向匹配（适合不想修改include的场景）：

module.exports = {
  presets: ['@babel/preset-env'],
  exclude: /node_modules(?!\/adept-him-models)/
};

方案2：在子仓库B中预先转译代码 #

更规范的做法是让本地包自己输出转译后的代码，毕竟正常发布到npm的包都是经过转译的。步骤如下：

• 在仓库B中安装Babel依赖：npm install @babel/core @babel/cli @babel/preset-env --save-dev
• 在B中创建babel.config.js，配置基础转译规则：

  module.exports = {
    presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
  };
  

• 在B的package.json中添加构建脚本：

  "scripts": {
    "build": "babel src --out-dir dist"
  }
  

• 运行npm run build生成转译后的dist目录
• 修改B的package.json中的main字段，指向转译后的入口：

  "main": "dist/index.js"
  

• 最后在仓库A中重新执行npm link adept-him-models，此时A引入的就是转译好的代码，不会再出现语法错误。

方案3：调整Webpack配置（如果用Webpack打包） #

如果你的项目A是用Webpack配合Babel-loader打包的，需要在Webpack的module.rules中修改规则，让babel-loader处理node_modules中的本地包：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除node_modules，但不排除adept-him-models
        exclude: /node_modules(?!\/adept-him-models)/,
        use: 'babel-loader'
      }
    ]
  }
};

问题根源说明 #

Babel默认跳过node_modules是出于性能考虑——绝大多数npm包发布时已经完成了语法转译，不需要再处理。但npm link的本地包通常是未转译的源码，所以Babel的默认规则就会导致这些代码被忽略，进而出现ES6+语法不兼容的错误。

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