1. 程式人生 > 其它 >如何釋出並使用自己的npm包

如何釋出並使用自己的npm包

一、前言

  近些年來,前端領域可謂是越來越火,各種技術層出不求,前端工程師崗位也是大受歡迎。前端專案也越來越龐大,其複雜程度已經不輸後端,其中各種包的引用、匯出等管理問題儼然成為一項棘手的工作,還好有各種包管理工具幫助我們解決這些問題。其中npm(node package manager) 是現在每個前端開發人員都必學的技術吧,通過npm,開發者們編輯共享自己的模組,其方便的管理方式,便捷的操作命令,簡直就是前端開發人員的福音。今天作者就為大家簡單介紹一下如何釋出並使用自己的npm包,見解淺薄,僅供參考,歡迎各位大佬提出建議。

二、正文

1.釋出npm包

  要想釋出自己的包到npm,首先你需要一個npm的賬號,還沒有的小夥伴們點

這裡前往註冊,接下來就可以準備製作自己的包並且上傳了。所謂的包即是實現特定功能的模組,可以複用,使用npm管理專案使用到的各種模組,就類似於Java使用maven,C#使用nuget一樣。

  這裡我們先在本地建立一個簡單的包:首先建立一個資料夾,注意命名要是npm上沒有的,開啟命令列cd到資料夾,然後使用npm init -y初始化一個 package.json 配置檔案,如下圖所示:

  預設生成的配置檔案包括以下內容,完整的 package.json 配置項可參見大佬的文章 --package.json配置項詳解

{
  "name": "jshfirstnpmtest",//包名,預設是所在資料夾名,不得於已有包名重複。
"version": "1.0.0",//版本號 "description": "my first npm test",//描述 "main": "index.js",//入口檔案,預設是index.js "scripts": {//指令碼命令,可自定義不同的命令實現靈活配置 "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": ["test"],//關鍵字,用於包檢索 "author": "jsh",//作者 "license": "ISC"//開源協議 }

  由於這裡是簡單地給大家進行演示,就只定義一個index.js檔案:

//caculate
const add = function(x, y) {
    return x + y;
}
const sub = function(x, y) {
    return x - y;
}
const mul = function(x, y) {
    return x * y;
}
const div = function(x, y) {
    return x / y;
}

module.exports = {
    add,
    sub,
    mul,
    div
}

  一般來說一個完整的專案都會使用測試框架以及語法檢測工具在構建完成後進行測試的,常用的有Jest、Mocha、eslint等,這裡我簡單寫個test.js演示一下即可,關於測試外掛的用法我後面可能會出篇文章介紹,大家感興趣也可以自行百度。

var calculate = require('./index.js')

console.log(calculate.add(1, 2))
console.log(calculate.sub(2, 1))
console.log(calculate.mul(2, 3))
console.log(calculate.div(5, 2))

  測試執行效果如下:

  推薦新增README.md檔案,作一些簡單的描述,方便使用者瞭解專案概況,現在包的完整內容如下:

  接下來就可以釋出npm包了,如果是第一次釋出,先在命令列執行 npm adduser 命令新增賬號密碼和郵箱,包釋出成功後會向郵箱發郵件。

  登入成功後,使用 npm publish 命令就可以進行釋出了,以後要更新版本的話,更改 package.json 檔案的 version 欄位再次進行釋出就可以了,注意相同版本的包是不能重複釋出的。

2.使用npm包

  釋出成功後,前往npm官網登入賬號點選Packages即可看見剛才釋出的包了,要想引用包使用 npm i + 包名命令即可,不需要包了也可以在網頁中進行刪除。

三、總結

  簡單的npm包釋出演示就到這裡了,還是比較簡單的,更高階用法還有持續化整合,自動化釋出等,後面有機會再出教程。

參考文章:如何釋出自己的npm包