前言
在實際工作中我們已經下下來不下於一萬個npm包了，像我們熟悉的vue-cli，react-native-cli等，只需要輸入簡單的命令vueinitwebpackproject，即可快速幫我們生成一個初始項目。在實際開發項目中，我們也可以定製一個屬於自己的npm包，來提高自己的工作效率。
為什麼要開發一個工具包？
這次以幀動畫工具為例，來一步一步解析如何開發一個npm包。
開始前的準備
以我們這次為例。由於目前在做一些活動頁相關的工作，其中動畫部分全都採用CSS3中的animation來完成，但是這樣每次開發都要計算百分比，手動判斷動畫的一些屬性值，十分耗時又很容易出錯，就想能不能寫個腳本，直接一行命令就可以搞定了呢？！答案當然是肯定的。
理清思路
我們要做一個可以通過讀取圖片就可以自動生成包含CSSanimation的HTML頁面，以後需要生成相應的CSS片段，直接執行命令就可以了。
初始化
既然是npm包，那我們就需要在npmjs上註冊一個帳號，註冊完成之後回到本地新建一個文件目錄fbf，進入fbf目錄下執行npminit-y。
這樣，你的package.json就建好了。
依賴的庫
來看看會用到哪些庫。
命令行操作
node.js內置了對命令行操作的支持，在package.json中的bin欄位可以定義命令名和關聯的執行文件。所以現在package.json中加上bin的內容：
然後在index.js中來定義start命令：
調用version('1.0.0','-v,--version')會將-v和--version添加到命令中，可以通過這些選項列印出版本號。
調用command('start
action()則是執行start命令會發生的行為，要生成項目的過程就是在這裡面執行的，這裡暫時只列印出name。
其實到這裡，已經可以執行start命令了。我們來測試一下，在fbf的同級目錄下執行：
可以看到命令行工具也列印出了HelloWorld，那麼很清楚，action((name)=>{})這裡的參數name，就是我們執行start命令時輸入的項目名稱。
命令已經完成，接下來就要針對圖片的操作了。
獲取圖片信息
這裡我們默認根據第一張圖片的尺寸信息作為外層DIV的默認尺寸。
生成CSS代碼
然後根據圖片數量生成相應的keyframes代碼
生成html文件
最後我們把生成的CSS放到HTML里。
視覺美化
通過chalk來為列印信息加上樣式，比如成功信息為綠色，失敗信息為紅色，這樣子會讓用戶更加容易分辨，同時也讓終端的顯示更加的好看。
完整示例
代碼一共100行左右，可以說非常簡單明了，有興趣的同學可以試試。
最後
完成之後，使用npmpublishfbf就可以把腳手架發布到npm上面，通過-g進行全局安裝，就可以在自己本機上執行fbfstart[dir]來生成一個fbf.html文件，這樣便完成了一個簡單的node工具了。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對小編的支持。