zippybee-wechatpad-kit

使用 TypeScript + Rollup 构建的 npm 包

项目结构

zippybee-wechatpad-kit/
├── src/                    # 源代码目录
│   └── index.ts           # 入口文件
├── dist/                  # 构建输出目录(自动生成)
│   ├── index.cjs.js      # CommonJS 格式
│   ├── index.esm.js      # ES Module 格式
│   ├── index.d.ts        # TypeScript 类型定义
│   └── *.map             # Source maps
├── rollup.config.js      # Rollup 配置文件
├── tsconfig.json         # TypeScript 配置文件
└── package.json          # 项目配置文件

开发流程

1. 安装依赖

pnpm install

2. 开发模式(监听文件变化自动构建)

pnpm run dev

3. 生产构建

pnpm run build

构建后会在 dist 目录生成:

• index.cjs.js - CommonJS 格式,用于 Node.js
• index.esm.js - ES Module 格式,用于现代打包工具
• index.d.ts - TypeScript 类型定义文件

4. 发布到 npm

# 登录 npm (首次发布需要)
npm login

# 发布包
npm publish

使用方式

在 TypeScript/ES6+ 项目中使用

import { add, subtract, Calculator } from "zippybee-wechatpad-kit";

// 使用函数
const sum = add(1, 2); // 3
const diff = subtract(5, 3); // 2

// 使用类
const calc = new Calculator(10);
calc.add(5).subtract(3);
console.log(calc.getValue()); // 12

在 CommonJS 项目中使用

const { add, subtract, Calculator } = require("zippybee-wechatpad-kit");

const sum = add(1, 2);
console.log(sum); // 3

配置说明

tsconfig.json 关键配置

• target: ES2020 - 编译目标
• module: ESNext - 模块系统
• declaration: true - 生成类型定义文件
• strict: true - 启用严格类型检查

rollup.config.js 关键配置

• 输入: src/index.ts
• 输出格式:
  • CJS (CommonJS) - 用于 Node.js
  • ESM (ES Module) - 用于现代打包工具
• 插件:
  • @rollup/plugin-typescript - 编译 TypeScript
  • @rollup/plugin-node-resolve - 解析 node_modules
  • @rollup/plugin-commonjs - 转换 CommonJS 模块

package.json 入口配置

{
  "main": "dist/index.cjs.js", // CommonJS 入口
  "module": "dist/index.esm.js", // ES Module 入口
  "types": "dist/index.d.ts", // 类型定义入口
  "files": ["dist"] // 发布时包含的文件
}

开发建议

1. 添加外部依赖: 在 rollup.config.js 的 external 数组中添加不需要打包的依赖
2. 代码规范: 可以添加 ESLint 和 Prettier 来保持代码质量
3. 单元测试: 建议添加 Jest 或 Vitest 进行单元测试
4. 文档: 为导出的 API 添加 JSDoc 注释

License

ISC