制作发布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 库并发布的完整流程了

posted @ 2025-06-04 20:56  Zzp_zzZ  阅读(17)  评论(0)    收藏  举报