一、前言
近些年來,前端領域可謂是越來越火,各種技術層出不求,前端工程師崗位也是大受歡迎。前端項目也越來越龐大,其復雜程度已經不輸后端,其中各種包的引用、導出等管理問題儼然成為一項棘手的工作,還好有各種包管理工具幫助我們解決這些問題。其中 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包