釋出一款npm包幫助理解npm

AndyLaw發表於2018-12-27

NPM

npm 在前端工程化中扮演著不可或缺的角色，前端工程師每天通過npm安裝專案依賴，通過npm釋出自己的包，更新包，通過npm 指令碼執行開發環境，打包等。

平時專注於實現業務，一直沒有去了解一款包的釋出流程，忙裡偷閒，今天就體驗下編寫併釋出一個package的過程，記錄下來分享給大家。一個包誕生的過程無非是：編寫-測試-釋出-迭代-測試-釋出...，

初始化專案

mkdir math-tool_demo 新建資料夾

npm init初始化package.json檔案，根據提示輸入專案資訊：

package name專案名
version 版本
description 描述
entry point 入口檔案
test command 測試命令
git repository git倉庫地址
keywords 關鍵字資訊
author 作者
協議等

npm init -y:新增 -y 標誌,直接預設生成.

編寫包裡的程式碼

包含的功能：我們實現一個加減乘除的小工具。

新建index.js入口檔案


module.exports = {
    add:add,
    minus:minus
}
function add(num1,num2) {
    if(typeof num1 === 'number' && typeof num2 === 'number'){
        return num1 + num2;
    }else{
        throw('arguments must be number')
    }
    
}
function minus(left,right){
    if(typeof left === 'number' && typeof right === 'number'){
        return left - right;
    }else{
        throw('arguments must be number')
    }
}
複製程式碼

測試

測試無非就是引入編寫的模組，並執行測試用例，此處不再多說。

釋出

npm login 登入。輸入賬戶密碼郵箱，如果你沒有賬戶，先申請：連結。

npm publish：釋出編寫的包

失敗：命名重複或類似: 修改一下包名。

再次釋出：npm publish:成功了！預設版本為1.0.0

如何迭代釋出的包

包釋出出去了，bug是無法避免的，當然作者也會考慮擴充套件功能，修復bug或功能迭代需要將程式碼修改同步到遠端倉庫。

修改程式碼

比如做出了下述的修改:

module.exports = {
    add:add,
    minus:minus
}
function add() {
    var left = arguments[0];
    var right = arguments[1];
    if(typeof left === 'number' && typeof right === 'number'){
        return left + right;
    }else{
        throw('arguments must be number')
    }
    
}
function minus(){
    var left = arguments[0];
    var right = arguments[1];
    if(typeof left === 'number' && typeof right === 'number'){
        return left - right;
    }else{
        throw('arguments must be number')
    }
}

複製程式碼

修改版本號

我們可以直接改package.json裡的version欄位值.

不過最好還是使用npm 提供的命令修改版本號(比如當前為v1.0.0):

npm version patch-->1.0.1：屬於小修改，不更改功能使用
npm version minor-->1.1.0:可能新增了一些功能，不影響以前的使用。
npm version major-->2.0.0:可能改了API，輸入大範圍的修改。

詳細移步：關於npm語義版本

釋出

npm publish

如何使用釋出的包

到npm倉庫搜尋包名
然後，輸入npm install packageName -S [-D ]分別作為依賴或開發依賴

下面以我們剛釋出的包為例：

首次使用該包

npm install -S math-tool_demo 安裝剛剛釋出的包

在index.js裡引入並使用：

var math = require('math-tool_demo')
var addRes = math.add(1,2);
var minusRes = math.minus(1,2);

console.log(
    addRes,
    minusRes,
)//輸出：3,-1
複製程式碼