搭建规范化的 npm 包

一、初始化项目

1. 初始化

运行命令 npm init -y 生成一个 package.json 文件。

{
   
   
  "name": "vivace-utils",
  "version": "1.0.0",
  "description": "发布npm包，整套流程开发demo",
  "main": "src/index.js",
  "scripts": {
   
   
    "test": "npm run dev"
  },
  "author": "xiumubai",
  "license": "MIT"
}

2. 创建目录结构

├── README.md // npm包说明，安装以及使用方法
├── examples // 使用测试的案例
├── package.json // 项目结构说明
├── scripts // 用于存在开发或打包的脚本文件
└── src // 存放项目文件
    └── index.js 

二、配置

1. 配置 rollup 构建环境

1.1 开发和生产环境

根据开发环境区分不同的配置，设置对应的 npm script，最终输出不同规范的产物：umd、umd.min、cjs、esm、iife(global)。在 scripts 目录下创建 rollup 配置文件：

├── rollup.config.base.js // 基础文件
├── rollup.config.dev.js // 开发环境的配置
└── rollup.config.prod.js // 生产环境的配置

1.2 rollup 配置文件

npm install --save-dev rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-terser rollup-plugin-babel

● rollup：模块打包工具，支持 Tree Shaking，生成多种模块格式（如 UMD、ESM、CJS 等）。、
● @rollup/plugin-node-resolve：从 node_modules 解析第三方依赖。
● @rollup/plugin-commonjs：CommonJS 转为 ES Module。
● @rollup/plugin-terser：压缩输出代码，减小体积。
● @rollup/plugin-babel：转译代码，确保兼容性和现代化。

在项目根目录下创建 rollup.config.js 文件，并进行配置：

// 安装 npm 依赖包（部分后续需要）
// npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-alias @rollup/plugin-replace @rollup/plugin-eslint @rollup/plugin-babel rollup-plugin-terser rollup-plugin-clear @rollup/plugin-json
import json from '@rollup/plugin-json'; // 允许在源码中直接引入 JSON 文件
import {
   
    terser } from 'rollup-plugin-terser'; // 用于压缩代码的插件
import {
   
    name, version, author } from '../package.json'; // 从 package.json 读取包信息

// 定义包名
const pkgName = 'tool-methods';

// 打包处理的文件，添加的备注信息
const banner = `/*!
 * ${
     
     name} v${
     
     version}
 * (c) 2024-${
     
     new Date().getFullYear()} ${
     
     author}
 * Released under the MIT License.
 */`;

export default {
   
   
  input: 'src/index.js', // 入口文件
  output: [
    {
   
    file: `dist/${
     
     pkgName}.umd.js`, format: 'umd', name: pkgName, banner }, // 通用模块
    {
   
    file: `dist/${
     
     pkgName}.umd.min.js`, format: 'umd', name: pkgName, banner, plugins: [terser()] }, // 压缩版 UMD
    {
   
    file: `dist/${
     
     pkgName}.cjs.js`, format: 'cjs', banner }, // CommonJS 模块
    {
   
    file: `dist/${
     
     pkgName}.esm.js`, format: 'es', banner }, // ES 模块
    {
   
    file: `dist/${
     
     pkgName}.iife.js`, format: 'iife', name: pkgName, banner