如何将TypeScript库编译为.mjs并生成d.ts文件？

首选工具：tsup #

tsup 是基于 esbuild 封装的一站式打包工具，能同时覆盖你的所有需求：生成 ES 模块（.mjs）、自动产出 d.ts 类型文件、分析依赖链仅编译被导入的文件，还能自动补全导入语句的扩展名。

实现步骤： #

1. 安装依赖

npm install tsup --save-dev

2. 创建配置文件 tsup.config.ts

import { defineConfig } from 'tsup'

export default defineConfig({
  entry: ['src/index.ts'], // 指定入口文件
  format: ['esm'], // 输出 ES 模块格式
  outExtension: { js: '.mjs' }, // 明确输出 .mjs 扩展名
  dts: true, // 自动生成类型声明文件
  outDir: 'dist', // 输出目录
  esbuildOptions(opt) {
    // 确保编译后的导入语句自动添加 .mjs 扩展名
    opt.resolveExtensions = ['.ts', '.mjs']
  },
  clean: true, // 编译前清空输出目录
  treeshake: true // 摇树优化，排除未被引用的文件
})

3. 在 package.json 中添加编译脚本

{
  "scripts": {
    "build": "tsup"
  },
  "type": "module" // 配合 ES 模块解析规则
}

运行 npm run build 后，dist 目录会生成 index.mjs 和对应的 index.d.ts 文件，所有导入/导出语句都会自动补上 .mjs 扩展名，源码中无需手动添加 .js 后缀。

备选方案：Rollup + 插件 #

如果需要更高的自定义灵活性，可以用 Rollup 配合专用插件实现需求：

实现步骤： #

1. 安装依赖

npm install rollup @rollup/plugin-typescript @rollup/plugin-node-resolve rollup-plugin-dts --save-dev

2. 创建配置文件 rollup.config.js

import typescript from '@rollup/plugin-typescript'
import resolve from '@rollup/plugin-node-resolve'
import dts from 'rollup-plugin-dts'

export default [
  // 编译生成 .mjs 文件
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/index.mjs',
      format: 'es',
      preserveModules: true // 保留原文件目录结构，可选配置
    },
    plugins: [
      resolve({ extensions: ['.ts'] }),
      typescript({
        compilerOptions: {
          module: 'ESNext',
          declaration: false // 单独处理类型声明文件
        }
      })
    ],
    treeshake: true
  },
  // 生成 d.ts 类型声明文件
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/index.d.ts',
      format: 'es'
    },
    plugins: [dts()]
  }
]

3. 添加 npm 编译脚本

{
  "scripts": {
    "build": "rollup -c"
  },
  "type": "module"
}

运行 npm run build 后，同样会得到带正确扩展名的 .mjs 文件和完整的类型声明文件。

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