制作发布npm库
背景:为了了解整体 npm 库的流程。
整体思路大概分成几个阶段
创建并初始化项目配置,编写具体工具函数,构建,jest 测试(可选),发布到 npm,npm 安装体验效果
(ts + tsup)
创建并初始化项目配置
创建项目
mkdir my-tool-demo
cd my-tool-demo
npm init -y //可选项一律同意,生成package.json
添加依赖
# 安装构建工具 tsup 和 TypeScript(可选,如果你用 TS)
npm install tsup --save-dev
# 如果使用 TypeScript
npm install typescript --save-dev
项目结构
my-tool-demo/
├── src/
│ ├── index.ts # 入口文件,导出所有函数
│ ├── math.ts # 数学工具函数
│ └── string.ts # 字符串工具函数
├── test/ # 测试目录
├── dist/ # 构建输出目录(自动生成)
├── package.json
└── tsconfig.json # TypeScript 配置(可选)
编写工具函数
src/math.ts
/**
* 加法
*/
export const add = (a: number, b: number) => a + b
/**
* 减法
*/
export const subtract = (a: number, b: number) => a - b
src/index.ts
export * from './math'
export * from './string'
配置构建脚本(tsup)
为什么要使用 tsup 来构建:因为 tsup 可以同时产生两个入口来满足 conmmonjs 以及 ESmodule 两种规范的需要,不需要编写两个项目来维护
tsup.config.ts
import { defineConfig } from 'tsup'
export default defineConfig({
entry: ['src/index.ts'], // 入口文件
format: ['esm', 'cjs'], // 输出 ESM 和 CommonJS
dts: true, // 生成类型声明文件
splitting: false, // 不拆包
clean: true, // 清空输出目录
outDir: 'dist', // 输出目录
})
在 package.json 中添加脚本:
{
"scripts": {
"build": "tsup"
}
}
package.json
{
"name": "@lafamenta/tool",
"version": "1.0.0",
"description": "A tool function library",
"main": "./dist/index.js", // 旧版 Node 回退入口(CommonJS)
"module": "./dist/index.mjs", // 旧版打包工具识别 ESM 的字段
"types": "./dist/index.d.ts", // 类型声明入口
"exports": {
".": {
"import": "./dist/index.mjs", // ESM 入口
"require": "./dist/index.js" // CommonJS 入口
}
},
"files": ["dist"], // 发布到 npm 的目录
"scripts": {
"build": "tsup",
"test": "jest"
},
"devDependencies": {
"tsup": "^8.5.0",
"typescript": "^5.8.3"
}
}
运行构建
npm run build
测试
安装测试工具 jest
npm install jest @types/jest ts-jest --save-dev
安装 babel
Jest 默认仅支持 CommonJS 语法(如 require),若代码中使用 import/export 等 ES6 语法,需通过 Babel 转换。
npm install --save-dev \
jest \
babel-jest \
@babel/core \
@babel/preset-env \
@babel/preset-typescript
创建 Babel 配置文件 (.babelrc):
{
"presets": [
["@babel/preset-env", { "targets": { "node": "current" } }],
"@babel/preset-typescript" // 仅 TypeScript 项目需要
]
}
配置 jest.config.js
module.exports = {
transform: {
'^.+\\.[jt]sx?$': 'babel-jest', // 用 Babel 处理所有 JS/TS 文件
},
testEnvironment: 'node', // 指定 Node 测试环境
testMatch: ['**/__tests__/**/*.test.[jt]s'], // 识别测试文件
}
创建测试文件 test/math.test.ts:
import { add, subtract } from '../src/math';
test('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});
test('subtracts 5 - 3 to equal 2', () => {
expect(subtract(5, 3)).toBe(2);
});
添加测试脚本
{
"scripts": {
"test": "jest"
}
}
运行测试
npm run test
npm 发布
在 npm 官网注册账号(如果还没有)。
在终端登录:
npm login
发布
npm publish
体验
npm install @lafamenta/tool
import { subtract, add } from '@lafamenta/tool'
----
console.log('this is subtract 3-2==============>', subtract(3, 2))
console.log('this is add 3+2==============>', add(3, 2))
输出

输出没有问题。至此,就完成编写 npm 库并发布的完整流程了
浙公网安备 33010602011771号