TypeScript项目引入依赖报Unexpected token export错误求助

咱们先把问题的根源捋清楚：你的项目B编译输出的是ES模块语法（用export），但项目A的模块系统配置的是commonjs，而且webpack默认不会去转译node_modules目录下的代码，所以当项目A尝试加载项目B的编译产物时，Node或者webpack无法识别ES模块的语法，就抛出了那个错误。

下面给你几个可行的解决方案，按推荐程度排序：

方案一：调整项目B的tsconfig（最推荐，从根源解决） #

既然项目B是作为公共依赖被引入的，最好直接让它编译出兼容CommonJS的产物，这样任何使用CommonJS模块系统的项目都能直接用，不用额外配置。

修改项目B的tsconfig.json里的module选项：

{
  "compilerOptions": {
    // 把原来的"esnext"改为"commonjs"
    "module": "commonjs",
    // 其他原有配置保持不变...
  }
}

修改完成后，重新编译项目B，然后在项目A里更新依赖（如果是本地开发用npm link的话，记得重新build项目B后再重新link）。

方案二：无法修改项目B时，调整项目A的webpack配置 #

如果项目B的配置不能改，那咱们就让webpack明确对项目B的代码进行转译。注意你之前的webpack配置有一些小问题（比如重复的use属性），下面是修正后的完整配置：

1. 先安装必要的Babel依赖 #

首先确保你装对了依赖：

npm install @babel/core @babel/preset-env babel-loader thread-loader --save-dev

2. 修正webpack的module.rules配置 #

重点是只转译@something/projectB这个依赖，不要转译整个node_modules（不然编译速度会慢很多）：

module: {
  rules: [
    // 专门转译项目B的JS文件
    {
      test: /\.js$/,
      // 精确指定要转译的依赖路径
      include: path.resolve(__dirname, 'node_modules/@something/projectB'),
      use: [
        'thread-loader',
        {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              // 配置preset-env转译为当前Node环境兼容的语法
              ['@babel/preset-env', { targets: { node: 'current' } }]
            ]
          }
        }
      ],
      enforce: 'pre'
    },
    // 处理项目A自身的TS文件（修正了你之前重复写use的问题）
    {
      test: /\.ts$/,
      exclude: /node_modules/, // 排除其他不需要转译的依赖
      use: [
        'thread-loader',
        {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
          }
        },
        { loader: "ts-loader", options: tsLoaderOptions },
        { loader: "ifdef-loader", options: ifDefLoaderOptions }
      ]
    }
  ]
}

这里把.babelrc的配置直接写到了webpack的options里，这样更清晰，也避免了配置文件路径的问题。

方案三：如果项目A用ts-node直接运行 #

如果项目A是用ts-node直接启动的（不是用webpack打包），那需要在项目A的tsconfig.json里做如下配置：

{
  "compilerOptions": {
    // 原有配置不变，新增这两个选项
    "allowJs": true,
    "esModuleInterop": true
  },
  "ts-node": {
    "files": true,
    "transpileOnly": true,
    // 指定转译项目B的代码
    "include": ["node_modules/@something/projectB/**/*"]
  }
}

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