一、前言

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/348244.html

標籤：JavaScript

上一篇：動力節點HTML基礎入門教程，web前端初學者必備

下一篇：如果沒有道具，如何根據道具更改字體并設定默認值