使用rollup搭建工具库并上传npm

本文主要记录一下如何使用rollup搭建工具库，然后上传npm官方库，供自己以后查漏补缺，也欢迎同道朋友交流学习。

初始化项目

创建一个新的目录，初始化 npm 项目

bash 复制代码

mkdir my-utils
cd my-utils
npm init -y

安装依赖

安装 Rollup 和相关插件

bash 复制代码

npm install --save-dev rollup rollup-plugin-babel rollup-plugin-node-resolve rollup-plugin-terser @babel/core @babel/preset-env

新建src目录

新建 src 目录，作为整个项目的入口文件目录

bash 复制代码

mkdir src
touch src/index.js

新建工具目录

目录结构如下：

bash 复制代码

src
├── index.js
├── tools
│   └── index.js
└── validator
    └── index.js

实用工具类简单封装

javascript 复制代码

/**
 * 延迟
 * @param {*} ms
 * @returns
 */
export const sleep = (ms) =>
  new Promise((resolve, reject) => {
    return setTimeout(() => {
      resolve();
    }, ms);
  });

/**
 * 获取参数类型
 * @param {*} params
 * @returns
 */
export const getParamsType = (params) => {
  const type = Object.prototype.toString.call(params);
  return type.slice(8, -1);
};

/**
 * 字数截取方法
 * @param {*} str 
 * @param {*} len 
 * @returns 
 */
export const cutStr = (str, len) => {
  return str.length > len ? str.substr(0, len) + "..." : str;
}

校验类简单封装

javascript 复制代码

export const validatorReg = {
  isEmail: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, // 校验邮箱
  isPhoneNumber: /^1[3456789]\d{9}$/, // 手机号码验证
  isTelNumber: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/, // 固定电话号码验证
  isIdCard: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/, // 匹配身份证
  isBankCard: /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18}|\d{19})$/, // 银行卡号
  isZHCNUserName: /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/, // 大陆居民姓名验证
  isEmoJi: /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/, // 表情验证
  isHighPassword: /(?=.*[a-zA-Z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/;'[\]])[a-zA-Z\d`~!@#$%^&*()_+<>?:"{},.\/;'[\]]{8,16}/i, // 8-16位由数字字母或英文特殊字符(三者都要有)的密码校验
  isPassword: /^[A-Za-z0-9`~!@#$%^&*()_+<>?:"{},.\/;'[\]]+$/, // 由数字字母英文特殊字符任意组合的密码校验
  isNumber: /^[1-9]\d*$/, // 匹配正整数
  isNumberWithZero: /^[0-9]\d*$/, // 匹配整数
}

export const validate = (rule, value) => {
  return rule.test(value)
}

导出的入口文件src/index.js

javascript 复制代码

import { validatorReg, validate } from "./validator";
import * as tools from "./tools";

export { tools, validatorReg, validate };

创建Rollup配置文件

根目录新建rollup.config.js：

javascript 复制代码

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: 'dist/index.esm.js',
      format: 'es',
      sourcemap: true,
    },
  ],
  plugins: [
    babel({
      exclude: 'node_modules/**', // 排除node_modules目录
      presets: [['@babel/preset-env', { modules: false }]],
    }),
    resolve(),
    terser(),
  ]
}

添加构建脚本

在package.json中添加构建脚本。

json 复制代码

"scripts": {
  "build": "rollup -c"
}

构建项目

运行构建脚本

bash 复制代码

npm run build

发布项目

更新 package.json 文件，添加必要的元数据，如 name、version、description、main、module 等。

json 复制代码

{
  "name": "chive-utils",
  "version": "1.0.0",
  "description": "一个简单的工具库",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "files": ["dist"],
  "scripts": {
    "build": "rollup -c"
  },
}

注册登录npm账号

注册一个npm账户，地址为www.npmjs.com
登录到npm

bash 复制代码

npm login

如果登录不了可以尝试 nrm :

bash 复制代码

npm i -g nrm

// 查看可用的源
nrm ls

// 切换源
nrm use yarn

// 再登录
npm login

发布到npm

bash 复制代码

npm publish

至此，我们就完成了整个项目的发布，本项目地址为chive-utils

使用

在项目里下载

bash 复制代码

npm install chive-utils

查看在 node_modules 下生成的项目包：

在项目里使用

jsx 复制代码

import { validatorReg, validate, tools } from "chive-utils";

const List = () => {
  const str = "niunainiunainiunainiunai";
  const param = 20;

  const onChange = (e) => {
    const value = e.target.value;
    // validate的第一个参数为正则，可以自定义正则
    const success = validate(validatorReg.isPhoneNumber, value);
    console.log(success);
  };

  return (
    <ul>
      <li>
        字符串截取示例：
        <div>原字符串：{str}</div>
        <div>截取后字符串：{tools.cutStr(str, 5)}</div>
      </li>
      <li>
        获取参数类型：
        <div>参数：{param}</div>
        <div>参数类型：{tools.getParamsType(param)}</div>
      </li>
      <li>
        输入框校验：
        <input onChange={onChange} placeholder="请输入手机号" />
      </li>
    </ul>
  );
};

export default List

维护

忘记给项目写README.md了，写好正好试试npm version patch去升级版本，再重新发布下：

bash 复制代码

npm version patch
npm publish

项目地址

gitee.com/cangnaiwen/...