如何开发并实现按需导入的TypeScript多模块NPM包？

嘿，很高兴你已经搞定单模块NPM包的开发了！要发布支持按需导入的多模块包其实没那么复杂，核心就是让你的包能被打包工具（比如Webpack、Vite）正确识别并做树摇，同时给用户提供清晰的子模块导入路径。针对你src下的one.ts和two.ts，我给你一步步拆解怎么做：

首先得确保TS编译出来的是ES模块，并且生成正确的类型声明文件。修改你的tsconfig.json如下：

{
  "compilerOptions": {
    "target": "ES2020", // 选一个大部分环境支持的ES版本
    "module": "ESNext", // 输出ES模块格式
    "moduleResolution": "NodeNext", // 匹配Node.js的模块解析规则
    "declaration": true, // 生成.d.ts类型文件，方便用户获得类型提示
    "outDir": "./dist", // 编译后的文件输出到dist目录
    "rootDir": "./src", // 源码根目录
    "strict": true, // 开启严格模式，避免潜在问题
    "skipLibCheck": true
  },
  "include": ["src/**/*"], // 包含src下所有文件
  "exclude": ["node_modules", "dist"]
}

这是实现按需导入的关键！你需要在package.json里设置type、exports、files等字段：

{
  "name": "your-awesome-package", // 替换成你的包名
  "version": "1.0.0",
  "type": "module", // 告诉Node.js这是ES模块包
  "main": "./dist/index.js", // 兼容旧的导入方式（可选）
  "types": "./dist/index.d.ts", // 根类型文件
  "exports": {
    ".": "./dist/index.js", // 全量导入的入口
    "./one": "./dist/one.js", // 子模块one的入口
    "./two": "./dist/two.js" // 子模块two的入口
  },
  "files": [
    "dist/**/*" // 发布到NPM时只包含dist目录的内容
  ],
  "scripts": {
    "build": "tsc" // 编译命令
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

关键字段解释： #

• exports：这个字段是Node.js和打包工具识别子模块的核心，用户可以直接通过your-awesome-package/one导入one.ts的内容，而不需要写冗长的路径。
• type: "module"：确保整个包使用ES模块规范，避免CommonJS和ES模块混用的问题。
• files：控制发布到NPM的文件，只包含编译后的dist目录，减少包体积。

如果你想支持用户全量导入，可以在src下创建index.ts，把两个模块的导出聚合起来：

// src/index.ts
export * from './one';
export * from './two';

这样用户可以通过import * as MyPackage from 'your-awesome-package'全量导入，同时不影响按需导入的功能。

1. 运行npm run build，TS会把src下的所有文件编译到dist目录，包括每个模块对应的.js和.d.ts文件。
2. 本地测试的话，可以在另一个项目里用npm link把你的包链接过去，然后尝试按需导入：

// 按需导入one模块的某个函数
import { yourFunctionFromOne } from 'your-awesome-package/one';

// 按需导入two模块的内容
import { yourClassFromTwo } from 'your-awesome-package/two';

// 全量导入（如果有index.ts的话）
import { yourFunctionFromOne, yourClassFromTwo } from 'your-awesome-package';

此时打包工具会自动树摇，只把你用到的模块代码打包进去，不会引入多余的代码。

确认所有配置没问题后，就可以按常规流程发布：

npm login
npm publish

额外提示： #

如果需要兼容CommonJS环境（比如一些旧项目用require），可以在exports里添加条件导出，同时用tsc编译出两种格式的文件，但如果你的目标用户主要用现代构建工具，ES模块就足够了。

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