如何用esbuild为Node和浏览器打包时配置不同路径别名？

你需要同时配置TypeScript（tsconfig）和esbuild：前者负责IDE类型检查、编译阶段的路径解析，后者确保打包时正确替换为对应平台的文件，二者缺一不可。

1. 配置TypeScript路径别名 #

基于你的项目结构，通过共享配置+平台专属配置的方式，让不同平台的tsconfig各自指向对应版本的EventEmitter：

步骤1：完善共享配置 tsconfig.shared.json #

先定义基础编译规则，统一baseUrl方便后续路径配置：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./src"
  },
  "include": ["common/**/*"]
}

步骤2：Node平台专属 src/node/tsconfig.json #

继承共享配置，指定别名指向Node版本的EventEmitter：

{
  "extends": "../../tsconfig.shared.json",
  "compilerOptions": {
    "paths": {
      "@platform/event_emitter": ["./event_emitter.ts"] // 替换为你实际的Node版本文件路径
    },
    "outDir": "../../dist/node"
  },
  "include": ["../common/**/*", "./**/*"]
}

步骤3：Browser平台专属 src/browser/tsconfig.json #

同理，让别名指向浏览器版本的文件：

{
  "extends": "../../tsconfig.shared.json",
  "compilerOptions": {
    "paths": {
      "@platform/event_emitter": ["./event_emitter.ts"] // 替换为你实际的浏览器版本文件路径
    },
    "outDir": "../../dist/browser"
  },
  "include": ["../common/**/*", "./**/*"]
}

2. 配置esbuild的路径映射 #

esbuild不会自动读取tsconfig的paths规则，需要在打包脚本里手动配置别名，分平台编写打包任务：

Node打包脚本示例（build-node.js） #

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/node/index.ts'], // 你的Node项目入口文件
  bundle: true,
  platform: 'node',
  outfile: 'dist/node/index.js',
  alias: {
    '@platform/event_emitter': './src/node/event_emitter.ts' // 和tsconfig的路径保持一致
  },
  tsconfig: 'src/node/tsconfig.json' // 指定使用Node平台的tsconfig
}).catch(() => process.exit(1));

Browser打包脚本示例（build-browser.js） #

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/browser/index.ts'], // 你的浏览器项目入口文件
  bundle: true,
  platform: 'browser',
  outfile: 'dist/browser/index.js',
  alias: {
    '@platform/event_emitter': './src/browser/event_emitter.ts' // 和tsconfig的路径保持一致
  },
  tsconfig: 'src/browser/tsconfig.json' // 指定使用浏览器平台的tsconfig
}).catch(() => process.exit(1));

3. 验证效果 #

在common目录的代码中直接使用import EventEmitter from '@platform/event_emitter';，执行Node打包脚本时会自动引入Node版本，执行浏览器打包时则引入浏览器版本，同时IDE能正确识别对应版本的类型定义。

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