如何将TypeScript中的路径别名编译转换为JavaScript以适配NPM包？

不用手动把所有别名导入改成相对路径！我之前开发NPM包时也遇到过一模一样的需求，有几个成熟的工具可以帮你在编译阶段自动完成别名到相对路径的替换，生成的JS代码完全不需要依赖ts-node或tsconfig-paths就能直接运行。

方案1：使用tsc-alias（最简单的Post编译替换） #

这是最直接的方案，和官方tsc编译工具配合使用，编译后自动替换路径：

1. 安装依赖

npm install tsc-alias --save-dev
# 或者用yarn/pnpm
yarn add tsc-alias --dev
pnpm add tsc-alias --save-dev

2. 修改打包命令
   在你的package.json的scripts里，把原来的tsc命令改成先编译再替换：

{
  "scripts": {
    "build": "tsc && tsc-alias"
  }
}

3. 运行打包
   执行npm run build后，dist目录里的所有JS文件中的路径别名都会被自动替换成对应的相对路径，比如@lib/utils/conversion会变成符合文件层级的相对路径（如../lib/utils/conversion）。

方案2：使用@zerollup/ts-transform-paths（编译时直接替换） #

如果你用Rollup或Webpack打包，可以用这个TypeScript转换插件，在编译过程中就完成别名替换，不需要额外的Post步骤：

1. 安装依赖

npm install @zerollup/ts-transform-paths ttypescript --save-dev

2. 修改tsconfig.json
   在compilerOptions里添加插件配置：

{
  "compilerOptions": {
    // 你的原有配置...
    "plugins": [
      { "transform": "@zerollup/ts-transform-paths" }
    ]
  }
}

3. 用ttsc代替tsc编译
   直接运行ttsc命令，或者修改package.json的build脚本：

{
  "scripts": {
    "build": "ttsc"
  }
}

方案3：使用tsup（NPM包打包首选） #

如果你正在开发NPM包，tsup是更高效的选择——它基于esbuild，打包速度极快，默认支持TypeScript路径别名，还能同时输出CommonJS和ES模块格式：

1. 安装依赖

npm install tsup --save-dev

2. 配置打包命令
   在package.json里添加脚本：

{
  "scripts": {
    "build": "tsup src/index.ts"
  }
}

3. 自定义配置（可选）
   如果需要自定义输出目录、模块格式等，可以创建tsup.config.ts：

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  outDir: 'dist',
  format: ['cjs', 'esm'], // 同时输出CommonJS和ES模块
  dts: true, // 自动生成类型声明文件
  clean: true // 打包前清空dist目录
});

注意事项 #

• 确保你的tsconfig.json中baseUrl、paths、rootDir和outDir配置正确，这是所有工具能正确替换路径的基础。
• 测试打包后的代码：直接运行node dist/index.js，确认没有路径相关的错误。
• 发布NPM包时，记得把dist目录包含在发布文件中（可以在package.json里配置files字段）。

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