手把手教你使用Rollup打包并发布自己的工具库
随着前端生态的繁荣，工具库几乎是高效开发的必需品，lodash/dayjs/numberal等实用的工具库相信大家都用过。
我近期在开发Calendar Graph Github提交日历组件时，发现有很多需要处理颜色的场景，比如判断一个字符串是否是一个有效的颜色值、hex颜色值和rgb颜色值的互转等，但没有找到一个能很好满足我全部需求的开源库，所以决定自己造一个轮子。
这就是做ktools工具库的原因，本文将介绍如何使用Rollup这个轻量的下一代模块打包器打造自己的TypeScript工具库。
DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。
官方网站：devui.design
Ng组件库：ng-devui（欢迎Star）
官方交流：添加DevUI小助手（devui-official）
DevUIHelper插件：DevUIHelper-LSP（欢迎Star）
前言
随着前端生态的繁荣，工具库几乎是高效开发的必需品，lodash/dayjs/numberal等实用的工具库相信大家都用过。
我近期在开发Calendar Graph Github提交日历组件时，发现有很多需要处理颜色的场景，比如判断一个字符串是否是一个有效的颜色值、hex颜色值和rgb颜色值的互转等，但没有找到一个能很好满足我全部需求的开源库，所以决定自己造一个轮子。
这就是做ktools工具库的原因，本文将介绍如何使用Rollup这个轻量的下一代模块打包器打造自己的TypeScript工具库。
通过阅读本文，你将学到：
- 如何初始化一个Rollup工程项目
- 如何配置Rollup和TypeScript
- 如何编写脚本，构建并发布自己的工具库到npm仓库
1 创建并初始化Github项目
做一个开源库的第一步是创建一个Github(或Gitlab等)代码仓库，并进行简单的初始化，主要包括：
- 创建Git提交忽略配置 .gitignore
- 创建开源协议声明 LICENSE
- 初始化package.json
- 配置TypeScript tsconfig.json
- 配置Rollup rollup.config.js
1.1 Git提交忽略配置
为了防止node_modules等自动生成的目录/文件提交到远程代码仓库，提交忽略是首先要考虑的事情，前期可以简单配置下即可。
先创建一个.gitignore文件
1 touch .gitignore
在新创建的.gitignore文件中增加以下内容：
1 # dependencies 2 /node_modules 3 4 # compiled output 5 /dist
详细的配置可以参考Github官方文档： https://docs.github.com/en/free-pro-team@latest/github/using-git/ignoring-files
1.2 创建开源协议声明 LICENSE
开源协议可以在创建Github仓库时选择，也可以创建仓库之后再加，一般选择MIT协议。
这里介绍一个创建仓库之后补加协议的小技巧。主要分成以下几个步骤：
- 在Github仓库增加一个文件
- 输入
LICENSE（注意必须全部大写） - 选择协议
- 提交
Step 1: 在Github仓库增加一个文件
在代码仓库的目录结构右上方，有一个Add file下拉框，选择其中的Create new file选项，进入创建新文件的页面。
Step 2: 输入”LICENSE”
在文件名中输入全大些的LICENSE，这时输入框右边会多出来一个按钮Choose a license template。
Step 3: 选择协议
点击Choose a license template按钮，进入选择协议模板的页面。
我们在左侧目录选择MIT License，然后在右侧边栏输入年份和作者名字，可以看到中间的Copyright (c)后面的年份和作者会相应变化，点击Review and submit按钮，即可返回创建文件的页面，并自动用刚刚选择的协议内容填充到LICENSE文件中。
Step 4: 提交
点击创建文件页面下方的Commit new file即可提交LICENSE文件到代码仓库。
提交之后会自动跳转到LICENSE页面，效果如下：
1.3 初始化package.json
添加.gitignore/LICENSE这两个基本的文件之后，下一步就是初始化package.json文件，这是管理依赖包及其版本的包配置文件，前端项目必备。
我们可以使用以下命令创建一个默认的package.json：
1 npm init -y
增加-y参数是不想一直按Enter