TypeScript编译后导入路径含/lib冗余，如何优化？

太懂这种被/lib路径反复折磨的感觉了——每次导入组件都要多敲那几个字符，组件多了之后代码里全是/lib，看着闹心还容易敲错！给你几个靠谱的优化方案，帮你彻底摆脱这个麻烦：

1. 配置package.json的exports和typeVersions字段（推荐） #

这是最标准的解决方案，能让用户直接通过包名+组件名导入，不需要加/lib。你只需要在package.json里添加这些配置：

{
  "name": "mylib",
  "main": "./lib/index.js",
  "types": "./lib/index.d.ts",
  // 配置JS模块的入口映射
  "exports": {
    ".": "./lib/index.js",
    "./ComponentA": "./lib/ComponentA.js",
    "./ComponentB": "./lib/ComponentB.js"
  },
  // 配置TypeScript类型文件的映射
  "typeVersions": {
    "*": {
      "ComponentA": ["./lib/ComponentA.d.ts"],
      "ComponentB": ["./lib/ComponentB.d.ts"]
    }
  }
}

配置完之后，你的用户就能这样导入了：

import { myModuleMain } from 'mylib';
import { ComponentA } from 'mylib/ComponentA';
import { ComponentB } from 'mylib/ComponentB';

完全不用再写/lib，而且Node.js和TypeScript都能正确解析模块和类型。

2. 聚合导出所有组件到根index.ts #

如果你的用户经常需要导入多个组件，可以在你的包的src/index.ts里把所有组件统一导出：

// src/index.ts
export { myModuleMain } from './myModuleMain';
export { ComponentA } from './ComponentA';
export { ComponentB } from './ComponentB';

编译后这些导出会同步到lib/index.js和对应的类型文件，用户就能一次性导入多个组件：

import { myModuleMain, ComponentA, ComponentB } from 'mylib';

大大减少导入语句的数量，代码看起来更清爽。

3. 本地开发时用tsconfig paths简化导入（仅开发阶段） #

如果你自己在开发这个包的时候，不想写冗长的相对路径或者/lib，可以在项目的tsconfig.json里配置paths：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "mylib/*": ["src/*"]
    }
  }
}

这样你在开发时就能像用户那样导入自己的组件：import { ComponentA } from 'mylib/ComponentA'，不过这个配置只在TypeScript编译时生效，发布包的时候还是得靠前面的package.json配置，因为运行时Node.js不识别tsconfig的paths。

总结 #

优先用方案1+方案2的组合，既解决了用户导入路径的冗余问题，又能让用户灵活选择单个或批量导入组件，体验最好。

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