Rollup + Typescript生成类型声明时绝对导入无法解析如何解决

TypeScript 原生的 paths 配置仅用于编译阶段的路径解析，不会将源码中的绝对导入自动转换为产物可识别的相对路径，因此生成的 .d.ts 文件会原样保留 components/xxx 这类导入写法，下游使用组件库的项目没有对应 paths 配置时就会出现路径解析失败的问题。

以下是三种可直接落地的解决方案：

方案1：使用 typescript-transform-paths 转换路径 #

这个方案可以直接在TS编译阶段自动把所有绝对导入转换为正确的相对路径，同时处理源码和d.ts文件的路径，不需要修改原有代码写法。
操作步骤：

1. 安装依赖

npm i typescript-transform-paths ttypescript -D

2. 修改tsconfig.json的compilerOptions，添加转换器配置：

{
  "compilerOptions": {
    // 保留你原有的所有配置，新增以下内容
    "plugins": [
      { "transform": "typescript-transform-paths" },
      // 下面这个配置专门负责处理d.ts文件中的路径转换
      { "transform": "typescript-transform-paths", "afterDeclarations": true }
    ]
  }
}

3. 修改rollup配置中typescript插件的参数，指定使用ttypescript作为编译器：

typescript({
  tsconfig: "./tsconfig.build.json",
  declaration: true,
  declarationDir: "dist",
  // 新增这行，使用带转换器的TS编译器
  typescript: require('ttypescript')
})

方案2：使用rollup-plugin-dts专门处理类型打包 #

这个插件是专门用于Rollup场景下的类型文件打包，会自动处理路径转换，还支持将分散的d.ts合并为统一的类型文件，结构更简洁。
操作步骤：

1. 安装依赖

npm i rollup-plugin-dts -D

2. 将Rollup配置拆分为两个独立任务，分别处理代码编译和类型打包：

import dts from 'rollup-plugin-dts';

// 原有业务代码打包配置
const buildConfig = {
  input: [
    "./src/index.ts",
    ...getFiles("./src/components", extensions),
    ...getFiles("./src/hooks", extensions),
    ...getFiles("./src/utils", extensions)
  ],
  output: [
    {
      dir: "dist",
      format: "esm",
      sourcemap: true
    }
  ],
  external: ["react", "react-dom", "styled-components"],
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: "./tsconfig.build.json",
      declaration: false, // 关闭默认的d.ts生成，交给dts插件处理
    }),
    image(),
    url({
      include: ["**/*.woff2"],
      limit: Infinity
    }),
    css(),
    terser()
  ]
};

// 新增类型打包配置
const dtsConfig = {
  input: "./src/index.ts",
  output: [{ dir: "dist", format: "esm" }],
  external: [/\.css$/, "react", "react-dom", "styled-components"],
  plugins: [dts()]
};

export default [buildConfig, dtsConfig];

方案3：package.json配置exports映射（兼容性稍差） #

如果不想新增编译依赖，也可以在组件库的package.json中添加exports字段，给导入路径做别名映射，下游项目使用符合ESModule规范的打包工具时可以自动识别：

{
  "exports": {
    "./components/*": "./dist/components/*",
    "./utils/*": "./dist/utils/*",
    "./hooks/*": "./dist/hooks/*"
  }
}

注意该方案仅支持Node.js 14.13+及现代打包工具（Webpack 5+、Vite等），对低版本工具兼容性不好。

内容的提问来源于stack exchange，提问作者Marko Radoš