工具库打造之旅：用Rollup打包并发布你的作品

2023-12-15 00:27:17

随着前端生态的繁荣，工具库几乎是高效开发的必需品。lodash/dayjs/numberal等实用的工具库相信大家都用过。近期在开发Calendar Graph Github提交日历组件时，发现有很多需要处理颜色的场景，比如判断一个字符串是否是一个有效的颜色值、hex颜色值等等。于是萌生了将一些常用的颜色处理方法封装成一个工具库的想法，以便在未来的项目中复用。

在这个过程中，我使用了Rollup作为打包工具。Rollup是一个非常流行的前端构建工具，它可以将多个模块打包成一个或多个文件。它支持模块化开发、代码压缩、代码分割等多种特性。使用Rollup打包工具库可以大大减少工具库的体积，提高其加载速度。

打造工具库

首先，我们需要创建一个新的项目目录，并安装Rollup和必要的依赖项。

mkdir my-color-utils
cd my-color-utils
npm init -y
npm install rollup --save-dev

接下来，我们需要在项目目录中创建一个src文件夹，并在其中创建一个index.js文件。这个文件将包含我们工具库的源代码。

// src/index.js

// 定义一个函数来判断一个字符串是否是一个有效的颜色值
const isValidColor = (color) => {
  return /^#([0-9a-f]{3}){1,2}$|^rgb\((\d{1,3},){2}\d{1,3}\)$|^hsl\((\d{1,3},){2}\d{1,3}\)$/.test(
    color
  );
};

// 定义一个函数来将一个hex颜色值转换为rgb颜色值
const hexToRgb = (hex) => {
  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16),
      }
    : null;
};

// 定义一个函数来将一个rgb颜色值转换为hex颜色值
const rgbToHex = (rgb) => {
  return "#" + rgb.r.toString(16).padStart(2, "0") + rgb.g.toString(16).padStart(2, "0") + rgb.b.toString(16).padStart(2, "0");
};

// 导出这些函数
export { isValidColor, hexToRgb, rgbToHex };

接下来，我们需要在项目目录中创建一个rollup.config.js文件，这个文件将包含Rollup的构建配置。

// rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/my-color-utils.js',
    format: 'umd',
    name: 'myColorUtils',
    sourcemap: true,
  },
  plugins: [resolve(), commonjs(), terser()],
};