手把手教你玩轉npm包
【npm是什麼】
官網是這個：https://www.npmjs.com/，
官網介紹：npm is the package manager for javascript，
npm是js的包管理器，更多的用於nodejs端。
基本上每種語言都有自己的包管理器，nodejs是npm以及yarn；
java是ant，maven，gradle；
python有很多包管理器；
ruby是rubygem。
如果你熟悉以上某種包管理器，那麼npm也是大同小異的。
【npm常用命令】
基於package.json安裝專案依賴包
| 1 |
npm
install
|
安裝一個npm包
| 1 2 3 |
npm
install
express
or
npm i express |
解除安裝一個npm包
| 1 |
npm uninstall express
|
列出當前使用到的npm包
| 1 |
npm list
|
以上命令新增-g後為全域性使用，
熟悉以上命令基本可以簡單使用npm了。
【npm init】
熟悉常用命令後，開始各種npm install，或者npm install -g，
某天想自己釋出一個npm包，發現有點茫然，那就從頭開始。
第一步是npm init，
首先建立一個資料夾，然後cd到資料夾下，然後執行npm init，
發現需要你輸入一些資訊，依次輸入，
package name，包名是什麼，也就是最終其他人npm install xxx，這個xxx就是包名；
version，版本號；
description：描述；
entry point：入口js；
test command：測試命令，暫時空開；
gir repository：git庫地址，暫時空開；
keywords：關鍵字；
author：作者，先寫你的名字；
license：協議；
最後詢問你是否生成package.json，輸入y回車。
【寫一個簡單的例子】
在這個資料夾下，新建lib，test資料夾，
新建index.js檔案，
| 1 |
// nothing
|
新建lib/qiao.test.demo2.js檔案，
| 1 2 3 4 5 6 |
/**
* say hello
*/
exports.sayHello =
function
(){
console.log(
'hello world!'
);
};
|
新建test/test.js檔案，
| 1 2 3 4 5 6 7 |
var
qiaoTestDemo2 = require(
'../lib/qiao.test.demo2.js'
);
function
test(){
qiaoTestDemo2.sayHello();
}
test();
|
測試一下，執行node test/test.js，
【開始第一次釋出】
建立帳號
首先需要註冊一個帳號，輸入npm adduser，然後輸入姓名，密碼，郵箱，注意，密碼不能過於簡單
啟用郵箱
npm adduser成功後，npm會給你的郵箱發一封郵件，需要啟用，如果不啟用就釋出npm包會報錯，如下
首次釋出
npm publish
驗證1
在npm官網搜尋qiao.test.demo2，可以搜尋到
驗證2
npm install qiao.test.demo2可以安裝
【實戰一個小功能】
如上，已經可以釋出一個npm包了，但是釋出的包基本沒啥用，
接下來實戰一個小功能，基於archiver封裝一個壓縮zip的功能，
首先快速的看一遍archiver的文件：https://www.npmjs.com/package/archiver
提煉出核心程式碼到lib/qiao.test.demo2.js中，如下
| 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 |
var
fs = require(
'fs'
);
var
archiver = require(
'archiver'
);
/**
* zip folder
* destZip, d:/1.zip
* sourceFolder, d:/test1
* cb, callback
*/
exports.zipFolder =
function
(destZip, sourceFolder, cb){
// init
var
output = fs.createWriteStream(destZip);
var
archive = archiver(
'zip'
, {
zlib: { level: 9 }
});
// on
output.on(
'close'
,
function
() {
cb(
null
,
'壓縮完成！'
);
});
archive.on(
'error'
,
function
(err) {
cb(err);
});
// zip
archive.pipe(output);
archive.directory(sourceFolder,
false
);
archive.finalize();
};
|
test/test.js修改為：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var
qiaoTestDemo2 = require(
'../lib/qiao.test.demo2.js'
);
function
test(){
var
destZip =
'd:/1.zip'
;
var
sourceFolder =
'd:/test1'
;
qiaoTestDemo2.zipFolder(destZip, sourceFolder,
function
(err, msg){
if
(err)
throw
err;
console.log(msg);
});
}
test();
|
執行node test/test.js發現報錯，如下
原來是沒有引入archiver，這個時候執行npm install archiver，
然後再次執行node test/test.js，看到壓縮完成，如下
【再次釋出】
壓縮一個資料夾的功能，基於archiver包已經實現，現在可以再次發包，
需要將package.json中的version修改為0.0.2，如下
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{
"name"
:
"qiao.test.demo2"
,
"version"
:
"0.0.2"
,
"description"
:
"qiao test demo 2"
,
"main"
:
"index.js"
,
"scripts"
: {
},
"keywords"
: [
"qiao"
,
"test"
,
"demo"
,
"2"
],
"author"
:
"qiaowenbin"
,
"license"
:
"MIT"
,
"dependencies"
: {
"archiver"
:
"^2.1.0"
}
}
|
同時你會發現，dependencies中新增對archiver的依賴
再次執行npm publish，釋出qiao.test.demo2 0.0.2版本成功
【使用自己的包】
npm包已經發布完畢，現在要測試如果是其他人安裝你的包後是否可以使用，
新建一個資料夾，寫一個test.js如下
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var
qiaoTestDemo2 = require(
'qiao.test.demo2'
);
function
test(){
var
destZip =
'd:/1.zip'
;
var
sourceFolder =
'd:/test1'
;
qiaoTestDemo2.zipFolder(destZip, sourceFolder,
function
(err, msg){
if
(err)
throw
err;
console.log(msg);
});
}
test();
|
注意，和之前test/test.js的不同是require不同，這次是直接引用，
然後執行node test.js，發現報錯，是沒有引用qiao.test.demo2包，
執行npm install qiao.test.demo2，安裝包，再次執行node test.js，
發現還是報錯，報錯如下：
zipFolder未定義，但是lib/qiao.test.demo2.js中是有定義的，問題出在哪裡，
出在index.js中，因為index.js是你這個包的入口，而目前的index.js是空的，需要修改為：
| 1 |
module.exports = require(
'./lib/qiao.test.demo2'
);
|
再次釋出為0.0.3版本，再次安裝，再次執行node test.js，成功，
【小結一下】
目前可以做到的是：
1.註冊npm
2.釋出npm包
3.實現壓縮資料夾功能
4.將該包對外
【readme.md】
在npm官網上搜索qiao.test.demo2，點進去，發現頁面是空白的，
不像其他npm包一樣，有詳細的介紹，如下
因為包下沒有readme.md檔案，新增一個readme.md，如下，markdown的語法可以自行百度，
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
# qiao.test.demo2
---
zip folder by archiver
# install
---
npm install qiao.test.demo2
# zip folder
---
var
qiaoTestDemo2 = require(
'../lib/qiao.test.demo2.js'
);
function
test(){
var
destZip =
'd:/1.zip'
;
var
sourceFolder =
'd:/test1'
;
qiaoTestDemo2.zipFolder(destZip, sourceFolder,
function
(err, msg){
if
(err)
throw
err;
console.log(msg);
});
}
test();
|
將package.json中的version修改為0.0.4，再次npm publish，重新整理npm頁面，如下
【豐富package.json】
接下來還可以豐富下package.json檔案，最簡單的方法是看文件，或者下載一個成熟的npm包進行模仿，
比如npm install express後看express的package.json是怎麼寫的，
豐富後如下，主要豐富了author，homepage，repository，
| 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 |
{
"name"
:
"qiao.test.demo2"
,
"version"
:
"0.0.4"
,
"description"
:
"qiao test demo 2"
,
"main"
:
"index.js"
,
"scripts"
: {
},
"keywords"
: [
"qiao"
,
"test"
,
"demo"
,
"2"
],
"author"
: {
"name"
:
"qiaowenbin"
,
"email"
:
"[email protected]"
,
"url"
:
"http://insistime.com"
},
"homepage"
:
"http://insistime.com/"
,
"license"
:
"MIT"
,
"dependencies"
: {
"archiver"
:
"^2.1.0"
},
"repository"
: {
"type"
:
"git"
,
"url"
:
"git+https://github.com/ your github url"
}
}
|
一般npm包都會開源到github上一份，package.json中的repository會指向github，使用者可以直接檢視原始碼
【.npmignore】
需要注意的一點是npm釋出後不能撤回，也就是千萬不要把一些重要的配置檔案釋出上去，
這個時候需要用的npmignore檔案，類似gitignore，
配置好後就可以忽略一些不想上傳的檔案
【npm指令碼】
細心的同學會發現，最開始npm init的時候有一項是test commad，之前的空的，
現在需要稍作修改，在package.json中修改為：
| 1 2 3 |
"scripts"
: {
"test"
:
"node test/test.js"
},
|
之後就可以執行npm run test，如下
你也可以新增其他指令碼，在package.json中的script下新增，key-value，value為要執行的命令，
然後就可以使用npm run key的方式執行對應的value命令
【參考】
1.qiao.ext.oss
http://uikoo9.com/book/chapterDetail/124
2.qiao.plugin.npm
http://uikoo9.com/book/chapterDetail/123
【總結】
1.npm註冊
2.npm發包
3.實現壓縮資料夾功能
4.將npm包對外
5.新增readme.md
6.豐富package.json
7.新增npmignore
8.使用npm指令碼
http://uikoo9.com/更多精彩內容
| 求打賞（長按圖片即可識別）~ |
 捐助列表：http://uikoo9.com/donate/ |