如何编译无NodeJS依赖的TypeScript库以适配浏览器多场景使用

前置准备（仅需配置一次） #

• 安装Node.js，安装完成后全局安装两个轻量构建工具即可，无需初始化npm项目、无需编写复杂配置文件：

  npm install -g esbuild dts-bundle-generator
  

生成目标产物 #

所有命令均在项目根目录执行，最终产物全部输出到dist目录。

1. 生成ES模块单文件（awesomeclass.es6.js） #

执行以下命令即可自动把所有依赖的Helper文件打包进单个产物，支持直接通过CDN地址import：

esbuild AwesomeClass.ts --bundle --format=esm --outfile=dist/awesomeclass.es6.js --target=es2020

可选添加--minify参数压缩代码体积。

2. 生成UMD全局挂载文件（awesomeclass.js） #

执行以下命令生成UMD格式产物，引入后会自动将AwesomeClass挂载到全局window对象：

esbuild AwesomeClass.ts --bundle --format=umd --global-name=AwesomeClass --outfile=dist/awesomeclass.js --target=es2015

3. 生成单文件类型声明（awesomeclass.d.ts） #

执行以下命令自动合并所有类型定义为单个d.ts文件：

dts-bundle-generator AwesomeClass.ts -o dist/awesomeclass.d.ts

类型匹配说明（针对ES模块CDN引入场景） #

TypeScript默认无法直接识别远程JS模块的类型，可通过以下两种方式实现类型关联：

方案1（推荐）：用户侧配置 #

你只需将生成的awesomeclass.d.ts和JS产物一同上传到CDN，使用方按照以下步骤配置即可：

1. 下载awesomeclass.d.ts放到自己项目的任意目录（比如types/目录下）
2. 在项目tsconfig.json中添加路径映射：

   {
     "compilerOptions": {
       "paths": {
         "https://cdn.example.com/awesomeclass.es6.js": ["./types/awesomeclass.d.ts"]
       }
     }
   }
   

配置完成后，用户使用import { AwesomeClass } from "https://cdn.example.com/awesomeclass.es6.js"时即可自动获得类型提示。

方案2：零配置适配（兼容性一般） #

你可以在打包生成的awesomeclass.es6.js顶部添加一行类型引用注释：

/// <reference types="./awesomeclass.d.ts" />

将awesomeclass.d.ts和JS产物放在CDN同一路径下，较新版本的TypeScript和编辑器可以自动拉取识别类型。

零构建工具备选方案 #

如果你完全不想使用任何Node工具，也可以直接使用现有tsc配置编译，将所有编译后的.js和.d.ts文件直接上传到CDN即可，用户直接引入主文件即可正常使用，仅会存在多文件请求的差异，功能不受影响。

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