手把手教你使用Rollup打包併發布自己的工具庫
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檔案
touch .gitignore
在新建立的.gitignore檔案中增加以下內容：
# dependencies
/node_modules
# compiled output
/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：
npm init -y
增加-y引數是不想一直按Enter