詳解：如何在NPM上發佈本身的第一個腳手架工具

前言

腳手架工具能快速生成一個完整的項目結構，幫助開發人員專一於項目開發，十分高效。

表面高大上的腳手架工具，背後的實現原理其實並不複雜。例如 vue-cli 其本質上就是根據不一樣的操做指令在遠程倉庫（例如：GitHub）把不一樣的模版拉取到本地。

本文將結合做者的腳手架（lan-cli）實例，爲讀者快速講述如何建立一個腳手架併發布到NPM上。

受限於文章篇幅，本文不會對項目代碼進行講解，具體的代碼存放在文末的GitHub項目地址上。

技術棧

1. nodejs：腳手架框架核心；
2. commander：處理命令行輸入；
3. co：異步流程控制工具；
4. co-prompt：分步輸入命令行指令。

大綱

1. 建立項目；
2. 編寫指令；
3. 配置腳手架信息；
4. 本地測試；
5. 發佈腳手架。

實例講解

1. 建立項目

如圖所示建立一個相似的工程文件。

2. 編寫指令

lan-cli的指令一共有四個。

1. lan add ：添加腳手架的項目模板；
2. lan list ：列出腳手架的項目模板；
3. lan delete ：刪除腳手架的項目模板；
4. lan init ：初始化腳手架的項目；

   

   指令代碼在如圖文件中。

3. 配置腳手架信息

如圖所示在 package.json文件中配置好腳手架的信息。

4. 本地測試

bin/lan是腳手架的入口文件，而且在package.json中配置以下代碼。

"bin": {
        "lan": "bin/lan"
    }
複製代碼

配置好入口文件後，在根目錄下的命令行輸入npm link，就能夠把lan命令綁定到全局，直接使用測試腳手架工做是否能夠正常運行。

5. 發佈腳手架

完成腳手架後，咱們就能夠發佈到NPM上了。

首先須要到 npm （www.npmjs.com/）上註冊一個帳號，註冊過程略。

而後在終端執行登陸命令，輸入用戶名、密碼、郵箱便可登陸。

npm login
複製代碼

登陸成功後，輸入命令，發佈組件。

npm publish
複製代碼

發佈成功後，通常會有npm發送給你的通知郵件，進入npm官方，登陸本身的帳號，查看剛剛發佈的組件庫。

項目地址

本文項目Github地址：github.com/jiangjiahen…。

結語

以上就是本文的所有內容了，感謝你的閱讀，文中部分技術要點受限於文章篇幅，並無展開講解，若是你有什麼疑問或者建議，歡迎你隨時留言，互相討論。

最後，祝工做順利，生活幸福。