作為一個前端程序猿，大家對NPM肯定都非常熟悉，2009年5月Node.js發佈，至此前端就進入飛速發展的時代，安裝Node.js的同時，默認安裝了NPM，NPM作為目前世界上最大的包管理器，包含超過86萬個包，每星期下載量超53億次。
我們幾乎每天都在和NPM打交道，使用著各種各樣的NPM包，但是如何自己去發佈一個NPM包，或者搭建一個CLI工具呢？本文主要跟大家一起動手來一步一步實現自己的NPM包和CLI工具。
準備工作：
安裝Node.js-- 下載地址：http://nodejs.cn/download/
下面就跟大家一起來動手實現NPM包和CLI工具
一、NPM包發佈過程
1、新建文件夾(myFirstNPMDemo)
F:\npm_demo>mkdir myFirstNPMDemo
F:\npm_demo>cd myFirstNPMDemo
F:\npm_demo\myFirstNPMDemo>
2、執行npm init
執行過程中，根據提示輸入相關信息，最終生成package.json文件,設置的name不能為現有的npm包名稱，設置之前，可以去npm官網查詢是否存在。
//package.json
{
"name": "myfirstnpmdemo",
"version": "1.0.0",
"description": "第一個NPM包",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"npm"
],
"author": "飄落的楓葉",
"license": "ISC"
}
3、新建index.js
第二步中，默認設置的main為index.js，也就是包的入口文件，根據需要可以自行命名，我們在index.js寫個簡單的方法，用於打印日誌
exports.consoleLog = function (str) {
console.log(consoleLog || '請傳入參數');
}
4、創建npm賬號
我們的包寫好後，這是就需要發佈到npm上，發佈之前首先要創建自己的npm賬號，打開npm官網(https://www.npmjs.com/)進行註冊，註冊過程中有不清楚的地方請自行百度。
5、添加賬號
npm創建成功後，需要在我們的包項目中添加賬號，進入我們的包項目根目錄下，打開cmd，執行npm adduser，按照提示輸入賬號、密碼、郵箱，即可完成賬號的添加，添加完成後可執行npm whoami命令來檢查是否添加成功。
//執行npm adduser命令添加賬號
F:\npm_demo\myFirstNPMDemo>npm adduser
Username: 輸入你的npm賬號
Password: 輸入你的npm密碼
Email: (this IS public) 輸入你的npm郵箱
Logged in as XXXX on https://registry.npmjs.org/
//執行npm whoami命令檢查賬號是否添加成功
F:\npm_demo\myFirstNPMDemo>npm whoami
XXXXXX //如果添加成功，此處會展示你添加的賬號
6、發佈
終於到發佈這一步了，是不是有點小激動，發佈也很簡單，只需要執行npm publish即可，注意包名不能為npm上已經存在的包名，且npm的registry必須為官方源地址。
F:\npm_demo\myFirstNPMDemo>npm publish
7、檢查是否發佈成功、如何刪除包
如何檢查是否成功：當包發佈完後，可以執行npm install myFirstNPMDemo(換成你的包名稱) -g，如果能正常安裝，說明包發佈成功。
如何刪除包：由於我們發佈的是用於測試的包，為了不汙染npm網站，所以我們要把改測試包刪除，刪除也只要在cmd中支持npm unpublish --force命令即可
F:\npm_demo\myFirstNPMDemo>npm unpublish --force
二、CLI工具開發過程
CLI工具開發及發佈過程和npm包發佈基本一致，主要多了兩點，如何生成命令行工具以及如何與用戶進行交互，為了方便大家按步驟進行操作，所以以下內容很多會和上面重複。
1、新建文件夾(my-cli-demo)
F:\npm_demo>mkdir my-cli-demo
F:\npm_demo>cd my-cli-demo
F:\npm_demo\my-cli-demo>
2、執行npm init
執行過程中，根據提示輸入相關信息，最終生成package.json文件，生存後需要在文件中添加bin配置項
//package.json
{
"name": "my-cli-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"bin": {
"my-cli-demo": "./index.js"
},
"author": "",
"license": "ISC"
}
3、新建index.js
第二步中，默認設置的main為index.js，也就是包的入口文件，根據需要可以自行命名，我們在index.js寫個簡單的方法，用於打印用戶輸入的信息
#! node
//頂部"#! node"很重要，表示node來執行這個文件
//寫個簡單的demo，用於打印用戶輸入的內容
//默認打印出請輸入
let _userStr = '請輸入';
//通過process.argv獲取用戶信息,
//process.argv是一個數組，前兩項固定，第三項開始為用戶輸入的信息
if (process.argv.slice(2)[0]) {
console.info(process.argv);
_userStr = process.argv.slice(2)[0];
}
console.log(_userStr);
4、本地安裝該CLI
功能完成後，如果不需要發佈到npm，而只需要在自己的電腦上使用，直接執行cmd命令npm install -g，這樣就完成了CLI的安裝，此時就可以使用該CLI。如果要發佈到npm，供其他人下載安裝，就繼續執行後續步驟。
//安裝CLI
F:\npm_demo\my-cli-demo>npm install -g
+ [email protected] 1 package in 0.52s
//使用CLI
F:\npm_demo\my-cli-demo>my-cli-demo 這是我輸入的內容
這是我輸入的內容
5、創建npm賬號--如果以創建，可跳過
我們的包寫好後，這是就需要發佈到npm上，發佈之前首先要創建自己的npm賬號，打開npm官網(https://www.npmjs.com/)進行註冊，註冊過程中有不清楚的地方請自行百度。
6、添加賬號
npm創建成功後，需要在我們的包項目中添加賬號，進入我們的包項目根目錄下，打開cmd，執行npm adduser，按照提示輸入賬號、密碼、郵箱，即可完成賬號的添加，添加完成後可執行npm whoami命令來檢查是否添加成功。
//執行npm adduser命令添加賬號
F:\npm_demo\my-cli-demo>npm adduser
Username: 輸入你的npm賬號
Password: 輸入你的npm密碼
Email: (this IS public) 輸入你的npm郵箱
Logged in as XXXX on https://registry.npmjs.org/
//執行npm whoami命令檢查賬號是否添加成功
F:\npm_demo\my-cli-demo>npm whoami
XXXXXX //如果添加成功，此處會展示你添加的賬號
7、發佈
終於到發佈這一步了，是不是有點小激動，發佈也很簡單，只需要執行npm publish即可，注意包名不能為npm上已經存在的包名，且npm的registry必須為官方源地址。
F:\npm_demo\my-cli-demo>npm publish
8、檢查是否發佈成功、如何刪除包
如何檢查是否成功：當包發佈完後，可以執行npm install my-cli-demo(換成你的包名稱) -g，如果能正常安裝，說明包發佈成功。
如何刪除包：由於我們發佈的是用於測試的包，為了不汙染npm網站，所以我們要把改測試包刪除，刪除也只要在cmd中支持npm unpublish --force命令即可
F:\npm_demo\my-cli-demo>npm unpublish --force
GitHub地址[https://github.com/hanhan3682523/light-app-cli]
閱讀更多 碼上打卡 的文章
