大綱
1、準(zhǔn)備
2、自定義npm包
3、發(fā)布自定義npm包
4、引用npm包
5、更新npm包
6、撤銷發(fā)布的npm包
博客原文
1、準(zhǔn)備
1.1、注冊npm用戶
1.2、安裝nodeJs
1.3、編輯器
我使用的是編輯器vscode進(jìn)行操作的,讀者也可以打開控制臺進(jìn)入到對應(yīng)目錄中進(jìn)行操作
2、創(chuàng)建自己的npm包
2.1、創(chuàng)建一個空的文件夾,進(jìn)入
2.2、創(chuàng)建一個默認(rèn)的npm包
在當(dāng)前文件夾中執(zhí)行控制臺命令:npm init
1、執(zhí)行npm init之后需要一步一步的填寫對應(yīng)信息,這些信息也就是你的npm的信息,在生成的package.json中會自動填入(如下圖)
2、可以執(zhí)行npm init -y, 這樣就會幫你創(chuàng)建一個默認(rèn)配置的package.json而不需要自己一步步配置
package.json如下:
{
? ????"name": "javascript-tool-class",
? ????"version": "1.0.15",
????? "description": "將常用js工具整合成一個class類",
? ????"main": "index.js",
? ????"scripts": {
? ? ????????"test": "echo \"Error: no test specified\" && exit 1"
????? },
? ????"author": "zhengzemin",
????? "license": "ISC",
? ????"keywords": [
? ????????? "js",
? ????????? "tool"
????? ]
}
2.3、創(chuàng)建一個index.js文件作為包入口文件(我們在package.json下的main寫了入口文件index.js)
當(dāng)然這是默認(rèn)的入口文件,如果有其他想法的話,完全可以在package.json中進(jìn)行修改。
2.4、改進(jìn)index.js
當(dāng)然我們不可能就為了打印一個日志而創(chuàng)建一個npm包,我們需要可以引入這個npm包并調(diào)用這個包中的一些方法,因此我們隊(duì)這個npm包中的index.js中的內(nèi)容進(jìn)行完善一些。
index.js文件如下:
class????JsTool{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?constructor(name){this.name = name;}?? ? ? ? ? ? test(){console.log('hello'); }
?}
export {JsTool}?
3、發(fā)布npm包
3.1、登錄npm(添加用戶)
添加npm用戶,或者說登錄你的npm賬號
執(zhí)行: npm adduser
然后會提示你輸入你的用戶名和密碼以及郵箱,如果輸入正確會提示你成功登錄
提示:Logged in as dignity_(你的用戶名) on https://registry.npmjs.org/.顯示此作為成功登錄的標(biāo)準(zhǔn)
注意在adduser登錄的時候,需要進(jìn)入npm官網(wǎng)確認(rèn)下郵箱,否則publish發(fā)布會報錯
3.2、npm publish
當(dāng)你成功登錄之后,就可以發(fā)布你的npm包了。
執(zhí)行: npm publish

3.3、注意:
3.3.1? 可能你在publish的時候會出現(xiàn)如下錯誤

那么可能性有兩個:
1、你沒有執(zhí)行npm adduser進(jìn)行登錄
2、可能你的包名重復(fù)了。
這時最簡單的方法是改包名,加上一個特殊的標(biāo)志即可,改包名只需要對package.json中的name進(jìn)行修改即可。(改好之后再次執(zhí)行npm publish就成功了)
3.3.2? 再可能publish的時候會出現(xiàn)如下錯誤

1. 報錯意思說:'javascript-tool-class' is not in the npm registry.,也就是我當(dāng)前的鏡像不是npmjs.org,看上面3.1的,登錄的時候鏡像是Logged in as dignity_(你的用戶名) on https://registry.npmjs.org/.,我當(dāng)前是taobao.org,所以要設(shè)為npmjs
2.設(shè)為npmjs鏡像: npm config set registry https://registry.npmjs.org/
3.3.3? 設(shè)為npmjs鏡像后,這個錯誤解決了,重新npm publish,又報了另外一個錯誤

1. 報錯的原因:權(quán)限的問題,所以需要以最高權(quán)限清除下緩存,npm執(zhí)行:npm cache clean --force
2.清除完緩存后,不能馬上執(zhí)行npm publish,因?yàn)榫彺娑急磺宄?,所以剛剛登錄的npm adduser信息也就沒了,需要先執(zhí)行npm adduser登錄,后執(zhí)行npm publish發(fā)布即可成功。
4、引用npm包
4.1、下載依賴包
執(zhí)行:npm install -save-dev javascript-tool-class
4.2、調(diào)用npm包中的文件
通過import來調(diào)用文件從而引用npm包中的方法
一開始import的時候?qū)懀篿mport {JsTool,Hello} from 'javascript-tool-class',
結(jié)果npm run dev報錯:This dependency was not found,提示我需要安裝javascript-tool-class,
但是我已經(jīng)安裝了,所以應(yīng)該是引入的問題,后面寫成下面的路徑就正常使用。
import {JsTool,Hello} from 'javascript-tool-class/src/index.js'? ?//模塊化導(dǎo)入時,需注意JsTool是類,所以需要大寫,否則會報錯
let tool = new JsTool()
console.log(tool.test())? ? ? ? //hello
5、更新npm包
5.1、更改版本號
最簡單方式無非就是改package.json關(guān)于版本
或者可以執(zhí)行命令: npm version 1.0.1 同樣可以起到作用

5.2、更新版本——發(fā)布版本
更新npm包同樣是執(zhí)行npm publish即可,
可以看到publish的包已經(jīng)更新了
5.3、更新依賴包
同樣是執(zhí)行: npm install -save-dev javascript-tool-class
這樣會更新最新的包到node_module中
當(dāng)然可能由于各種原因?qū)е履愀碌陌€沒有在npm上更新或者說你更新下來的依舊是舊的包。
6、撤銷發(fā)布的npm包
我們現(xiàn)在發(fā)布的這個npm包只是測試用的或者只是用作其他作用而不是要發(fā)布到網(wǎng)上真的使用的,最好還是撤銷下來(超過24小時后就無法撤銷)。
執(zhí)行命令: npm --force unpublish javascript-tool-class
撤銷npm包之后,再去官網(wǎng)上看已是404了
需要注意的是:
1、如果在24小時內(nèi)確實(shí)要撤銷npm包需要加上 --force強(qiáng)制執(zhí)行才可以實(shí)現(xiàn)(--force最高權(quán)限);即使撤銷了發(fā)布的包,再次發(fā)布的時候也不能與之前被撤銷的包的名稱/版本其中之一相同,因?yàn)檫@兩者構(gòu)成的唯一性已經(jīng)被占用,官方并沒有隨著撤銷而刪除
2、撤銷的包不能立馬再次發(fā)布