這次帶給大家Npm做cli命令列工具,Npm做cli命令列工具的注意事項有哪些,下面就是實戰案例,一起來看一下。
前言
# 如果你想寫一個npm插件,如果你想透過命令列來簡化自己的操作,如果你也是個懶惰的人,那麼這篇文章值得一看。
po主的上一篇文章介紹了自訂自己的模版,但這樣po主還是不滿足啊,專案中我們頻繁的需要新建一些頁面,邏輯樣式等文件,每次都手動new一個,然後複製一些基本程式碼進去非常的麻煩,所以就有這篇文章了。接下來就讓po主為大家一步一步示範怎麼做一個npm命令列插件。
註冊npm帳戶
# 發布npm插件,首先肯定要有個npm帳號了,過程就不囉嗦了,走你。
npm官網
有了帳號後,我們透過npm init 產生一個package設定檔,填寫一些你的信息,然後就可以開始寫邏輯程式碼了。
編寫指令入口
# 首先來看看專案結構
1 2 3 4 5 6 7 |
|
實例命令程式碼都是寫在bin目錄下,我們現在設定檔package檔中啟用指令,新增一個設定項bin
1 2 3 |
|
然後安裝一個依賴,TJ大神寫的commander插件,
1 |
|
有了這個工具我們可以很方便的寫命令程式碼
# xu.js
1 2 3 4 5 6 7 8 |
|
這個檔案可以看作是入口檔案,第一行程式碼是必須新增的,腳本用env啟動的原因,是因為腳本解釋器在linux中可能被安裝在不同的目錄,env可以在系統的PATH目錄中查找。同時,env也規定一些系統環境變數。 這種寫法主要是為了讓你的程式在不同的系統上都能適用。
在這一步,你可以簡單測試你自己的npm外掛
1 2 |
|
# 關於commander,大家可以去作者的Github先學習了解,這裡不對參數講解。
xu-generate.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
編寫功能函數
# ./src/generate.js# 這個檔案就定義了當我們輸入1 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
1 2 |
|
本地測試
npm套件開發不像web開發,可以直接在瀏覽器看,實例目錄下建立一個test文件,然後 node test 就可以測試我們的邏輯。如果有一些功能需要在發布後才能測,npm 有個 link指令 可以連接你本地的模組,當然你也可以發佈後 自己安裝插件測試,就跟平常引入一個插件一樣。發布npm套件
# 首先在專案根目錄執行npm登陸1 2 |
|
1 |
|
後記
###至此,一個入門級的npm包就製作完成了。萬分感慨,記得剛入門前端的時候看到別人的插件做的真牛,自己只要簡單安裝一下就能搞得那麼漂亮,想搞~但是看到一堆陌生的東西,立刻慫了(node環境,東西非常非常多,直接拷貝vue-cli看到一對代碼,一頭霧水。 學習是一個循序漸進的過程,大牛寫出來的東西,沒有一定的基礎,和長時間的累積經驗,原始碼是很難學習。非要啃,也行,只是效率感覺不如循序漸進來的好。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
用AngualrJs使用定時器ReactJS操作表單選擇 ################################################## ####以上是Npm做cli命令列工具的詳細內容。更多資訊請關注PHP中文網其他相關文章!