随着前端生态的繁荣，工具库几乎是高效开发的必需品，lodash / dayjs / numeral 等实用的工具库相信大家都用过。

我近期在开发 Calendar Graph GitHub 提交日历组件时，发现有很多需要处理颜色的场景，比如判断一个字符串是否是一个有效的颜色值、hex 颜色值和 rgb 颜色值的互转等，但没有找到一个能很好满足我全部需求的开源库，所以决定自己造一个轮子。

这就是做 ktools 工具库的原因，本文将介绍如何使用 Rollup 这个轻量的下一代模块打包器打造自己的 TypeScript 工具库。

通过阅读本文，你将学到：

做一个开源库的第一步是创建一个 GitHub (或 Gitlab 等)代码仓库，并进行简单的初始化，主要包括：

为了防止 等自动生成的目录/文件提交到远程代码仓库，提交忽略是首先要考虑的事情，前期可以简单配置下即可。

先创建一个 .gitignore 文件

在新创建的 .gitignore 文件中增加以下内容：

详细的配置可以参考 GitHub 官方文档：https://docs.github.com/en/free-pro-team@latest/github/using-git/ignoring-files

开源协议可以在创建 GitHub 仓库时选择，也可以创建仓库之后再加，一般选择 MIT 协议。

这里介绍一个创建仓库之后补加协议的小技巧。主要分成以下几个步骤：

在代码仓库的目录结构右上方，有一个 下拉框，选择其中的 选项，进入创建新文件的页面。

在文件名中输入全大些的 ，这时输入框右边会多出来一个按钮 。

点击 按钮，进入选择协议模板的页面。

我们在左侧目录选择 ，然后在右侧边栏输入年份和作者名字，可以看到中间的 后面的年份和作者会相应变化，点击 按钮，即可返回创建文件的页面，并自动用刚刚选择的协议内容填充到 LICENSE 文件中。

点击创建文件页面下方的 即可提交 LICENSE 文件到代码仓库。

提交之后会自动跳转到 LICENSE 页面，效果如下：

添加 /这两个基本的文件之后，下一步就是初始化 文件，这是管理依赖包及其版本的包配置文件，前端项目必备。

我们可以使用以下命令创建一个默认的 package.json：

增加 参数是不想一直按 Enter😄

创建好的 package.json 文件如下：

我们可以简单地修改和完善下。

和 分别是包名和版本号，均可后续发布时通过脚本动态修改，不用管。

描述可以加下：

/这些后续在构建部署脚本的章节会细讲。

/可以加下：

配置好 package.json，后续安装依赖包时会自动更新该文件，可以非常方便地进行依赖管理。

TypeScript 这种强类型的语言，是对 JavaScript 很好的补充和增强，目前来看前景很好，必须用起来。

我们可以使用 tsc 命令行工具快速创建 TypeScript 默认配置文件。

先确认下是否安装 tsc，输入命令：

出现以下命令说明未安装：

可以通过以下命令全局安装：

成功安装之后，再查看下 tsc 版本：

生成 tsconfig.json 配置文件

可以使用以下快速生成默认的 配置：

生成的 文件如下（已删除注释代码）：

默认的配置其实已经够用，我们不做修改，后续可以根据需要删减配置。

初始化工程的最后一步就是配置 Rollup，先创建一个 Rollup 配置文件，没有 Rollup CLI 工具不支持初始化配置文件，只能手动创建：

然后在 中增加以下内容：

在 中配置 字段：

安装 Rollup 和 TypeScript 相关依赖：

注意 这个依赖库也是必需的，因为 插件依赖了该库。

Rollup 配置文件每个配置项的具体含义可以参考：https://www.rollupjs.com/guide/big-list-of-options

Rollup 可用插件列表可以参考：https://github.com/rollup/plugins

有了以上的初始工程，就可以正式开始写工具方法源码。

先写一个 demo，跑通、、的流程。

咱们的入口文件配置在了 src/index.ts 中，所以需要先创建该文件：

然后在该文件中编写一些代码测试下打包是否正常：

构建打包

在命令行中输入以下命令对项目进行打包：

执行完之后会在dist目录生成打包文件 index.js，内容如下：

引入使用

这时我们可以随便在一个 Vue / React / Angular 项目下引入这个空壳工具库，看下是否正常：

比如在 Vue CLI 工程的 src/main.js 中增加以下代码

或者在 Angular CLI 工程中的 src/main.ts 文件中增加：

2.2 编写工具方法

流程走通之后，就可以正式编写工具方法。

我们编写一个判断一个字符串是否是一个有效的 hex 十六进制颜色值的工具方法：iscolor。

先创建 src/is-color.ts 文件：

增加以下内容：

然后在 index.ts 入口文件中增加引入 is-color.ts 文件的代码：

重新执行 进行构建，生成的 dist/index.js 如下：

再到项目中引入：

一切正常！

到这里其实我们的工具库 已经完成了 90%，还差最后一步，就是发布到 npm 仓库，可以手工发布。

将 package.json 文件拷贝到 dist 目录，修改 version 为本次发布的版本号，比如 0.0.1，然后进入该目录：

执行以下命令即可将我们的ktools工具库发布到npm仓库：

带着欢呼雀跃的心情等待发布成功，结果报错，以下是报错信息：

看提示似乎是包名重复[捂脸][苦涩]，提示里还很友好地建议先重命名包名为 ，然后再发布。

那我们就按照提示尝试下改个名字吧，加个 scope：

改完名字重新发布，成功啦！

这时可以在项目中正式安装并引入使用。

先安装：

使用方式和之前的一样，只是需要把引入方式改了：

3.2 通过脚本发布

每次发布还要将文件拷贝来拷贝去，又要修改包名，又要改版本号，很麻烦，可以编写脚本将这个过程自动化。

主要分以下步骤：

在 package.json 的 scripts 中增加拷贝文件的脚本：

Step 2: 修改文件

新建 scripts/publish.js 文件，增加以下内容：

这里最核心的两步：

其中修改文件使用 shelljs 库，获取版本号参数使用了 TJ 大神的 commander 工具。

需要提前安装这两个依赖库：

另外需要在package.json中增加构建的脚本命令：

Step 3: 发布

发布的步骤比较简单，已经放在publish.js脚本文件中。

每次发布只需要依次运行以下命令即可：

后续可以考虑将其集成到流水线，实现完全的自动化部署，这里可以参考我之前写的一篇文章：大厂是如何用 DevCloud 流水线实现自动化部署 Web 应用的？

本文详细地介绍了使用 Rollup + TypeScript 打造一个开源工具库的流程和步骤，并介绍如何配置 Rollup 和 TypeScript，如何编写部署脚本自动化发布工具库到 npm 仓库。希望大家喜欢，并欢迎给个 Star 🌟 鼓励，以下是 ktools 工具库的源码地址：

https://github.com/kagol/ktools

文/DevUI Kagol