Rollup构建JavaScript核验库，并发布到NPM

本文详细介绍了如何使用Rollup构建一个支持UMD、ES Module、CommonJS三种格式的JavaScript校验库，并完成NPM发布的全流程。

🎯 概述

本项目是一个JavaScript校验工具库，提供了字符串、数字、网络、联系方式、身份信息、金额、地理位置、业务和高级校验等9大类共50+个校验函数。项目使用Rollup进行打包。

📁 项目结构设计

bash 复制代码

validate/
├── src/                    # 源码目录
│   ├── index.js           # 主入口文件
│   └── validators/        # 校验函数模块
│       ├── string.js      # 字符串校验
│       ├── number.js      # 数字校验
│       ├── network.js     # 网络校验
│       ├── contact.js     # 联系方式校验
│       ├── identity.js    # 身份信息校验
│       ├── money.js       # 金额校验
│       ├── location.js    # 地理位置校验
│       ├── business.js    # 业务校验
│       └── advanced.js    # 高级校验
├── dist/                  # 构建输出目录
│   ├── index.js          # UMD格式
│   ├── index.esm.js      # ES Module格式
│   ├── index.cjs.js      # CommonJS格式
│   ├── index.d.ts        # TypeScript类型定义
│   └── *.js.map          # Source Map文件
├── test/                  # 测试目录
│   └── test.js           # 测试文件
├── rollup.config.js       # Rollup配置文件
└── package.json          # 项目配置

⚙️ Rollup配置

1. UMD格式配置

javascript 复制代码

{
  input: 'src/index.js',           // 入口文件
  output: {
    file: 'dist/index.js',         // 输出文件
    format: 'umd',                 // 格式类型
    name: 'ValidateUtils',         // 全局变量名
    sourcemap: true                // 生成Source Map
  },
  plugins: [
    nodeResolve(),                 // 解析node_modules中的模块
    terser()                       // 代码压缩
  ]
}

UMD特点:

兼容AMD、CommonJS和全局变量
可在浏览器直接使用: <script src="dist/index.js"></script>
全局变量: window.ValidateUtils

2. ES Module格式配置

javascript 复制代码

{
  input: 'src/index.js',
  output: {
    file: 'dist/index.esm.js',
    format: 'esm',                 // ES Module格式
    sourcemap: true
  },
  plugins: [nodeResolve(), terser()]
}

ES Module特点:

现代JavaScript标准
支持Tree Shaking
静态导入/导出
适用于现代打包工具(Vite、Webpack 5+)

3. CommonJS格式配置

javascript 复制代码

{
  input: 'src/index.js',
  output: {
    file: 'dist/index.cjs.js',
    format: 'cjs',                 // CommonJS格式
    sourcemap: true
  },
  plugins: [nodeResolve(), terser()]
}

CommonJS特点:

Node.js原生支持
动态导入/导出
适用于服务端开发

📦 NPM发布流程

bash 复制代码

# 发布前构建
npm run build

1. 发布前检查

检查NPM登录状态

bash 复制代码

npm whoami
# 输出: yun_xcx

检查包名可用性

bash 复制代码

npm view yu-validate-utils
# 如果返回404，说明包名可用

检查包内容

bash 复制代码

npm pack --dry-run

2. 发布执行

bash 复制代码

npm publish

发布成功输出：

kotlin 复制代码

npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
+ yu-validate-utils@1.0.0

3. 发布验证

bash 复制代码

npm view yu-validate-utils --json

验证结果包含完整的包信息：

包名、版本、描述
维护者信息
仓库地址
文件列表
依赖信息
发布时间等

版本管理

bash 复制代码

# 补丁版本 (1.0.0 -> 1.0.1)
npm version patch
npm publish

# 小版本 (1.0.0 -> 1.1.0)
npm version minor
npm publish

# 大版本 (1.0.0 -> 2.0.0)
npm version major
npm publish

🚀 使用示例

浏览器环境 (UMD)

html 复制代码

<script src="https://unpkg.com/yu-validate-utils@1.0.0/dist/index.js"></script>
<script>
  console.log(ValidateUtils.isEmail('test@example.com')); // true
</script>

ES Module环境

javascript 复制代码

import { isEmail, isPhone, isIP } from 'yu-validate-utils'

console.log(isEmail('test@example.com')); // true
console.log(isPhone('13812345678'));      // true
console.log(isIP('192.168.1.1'));        // true

CommonJS环境

javascript 复制代码

const { isEmail, isPhone, isIP } = require('yu-validate-utils')

console.log(isEmail('test@example.com')); // true
console.log(isPhone('13812345678'));      // true
console.log(isIP('192.168.1.1'));        // true

🔗 相关链接

Git仓库 : gitee.com/xcxsj/valid...