如何用Vite创建极简单文件TypeScript开源NPM包？

一、初始化项目 #

创建空文件夹并初始化npm：

mkdir my-mini-lib && cd my-mini-lib
npm init -y

二、安装核心依赖 #

仅安装必要工具，避免冗余：

npm install -D vite typescript vitest

• vite：负责库打包
• typescript：编译TS代码并生成类型声明
• vitest：轻量测试框架，与Vite原生兼容

三、配置文件（仅3-4个关键文件） #

1. tsconfig.json（TS编译配置） #

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "declaration": true, // *必须开启，生成.d.ts类型文件供使用者参考*
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "test"]
}

2. vite.config.ts（库打包配置） #

完全贴合你的精简需求，关闭压缩、无多余功能：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: './src/index.ts',
      formats: ['es', 'cjs'], // 输出ES模块和CommonJS，适配不同项目场景
      fileName: (format) => `my-mini-lib.${format}.js`
    },
    minify: false, // 关闭压缩，符合你无需优化的要求
    rollupOptions: {
      // 无DOM/Node依赖，无需配置external
    }
  }
})

3. vitest.config.ts（测试配置，可选） #

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true, // 无需每次导入test/expect
    environment: 'node' // 无DOM环境，使用node测试环境
  }
})

四、核心代码与测试 #

1. src/index.ts（你的库核心代码） #

// 示例代码，替换成你自己的逻辑
export function calculateSum(a: number, b: number): number {
  return a + b
}

export const DEFAULT_DELAY = 1000

2. test/index.test.ts（测试用例，可选） #

import { expect, test } from 'vitest'
import { calculateSum, DEFAULT_DELAY } from '../src/index'

test('calculateSum returns correct result', () => {
  expect(calculateSum(2, 3)).toBe(5)
})

test('DEFAULT_DELAY value is correct', () => {
  expect(DEFAULT_DELAY).toBe(1000)
})

五、package.json 关键配置 #

修改package.json，添加脚本与发布规则：

{
  "name": "my-mini-lib", // 替换为NPM上唯一的库名
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/my-mini-lib.cjs.js", // CommonJS入口
  "module": "./dist/my-mini-lib.es.js", // ES模块入口
  "types": "./dist/index.d.ts", // 类型声明文件路径
  "scripts": {
    "build": "tsc && vite build", // 先编译TS生成类型文件，再打包
    "test": "vitest run", // 执行一次测试
    "test:watch": "vitest" // 监听文件变化自动重跑测试
  },
  "files": [
    "dist" // 发布时仅上传dist文件夹，精简包体积
  ],
  "license": "MIT"
}

六、打包、测试与发布 #

1. 运行测试：

npm test

2. 编译并打包：

npm run build

3. 发布到NPM（先执行npm login登录账号）：

npm publish

七、最终精简文件清单 #

项目仅保留必要文件，无冗余：

• package.json
• tsconfig.json
• vite.config.ts
• vitest.config.ts（不需要测试可删除）
• src/index.ts
• test/index.test.ts（不需要测试可删除）
• .gitignore（可选，添加node_modules/、dist/）

内容的提问来源于stack exchange，提问作者Dalibor Čarapić