文章目錄
一. 建立npm賬號
方法一 官網註冊
登陸官網註冊npm官網
方法二 命令註冊
npm adduser
執行命令後，依次輸入要註冊的賬號、密碼、郵箱（回車鍵確認），如下圖所示
注：註冊的時候可能會有多種報錯情況
- 1.賬號問題
- 2.密碼問題
![在這裏插入圖片描述]()
- 3.郵箱問題
![在這裏插入圖片描述]()
溫馨提醒：賬號註冊好了之後，需要郵箱驗證，只能PC驗證，無法手機端驗證！
二. 發佈一個新包
1. 登陸
npm login
登陸好之後，登陸官網 --> 點擊頭像 --> Auth Tokens
會發現列表多了一條訪問令牌token（這個是爲了建立與npm之間的連接，給後面操作npm包做準備）
2. 建包
2.1. 建一個工程文件夾
本地創建一個工程目錄，名字自定義（這邊以random爲例）
2.2. 創建package.json
進入項目目錄後，執行如下
npm init
填寫package.json內容，可自定義，可直接換行確認，如下紅框部分
2.3. 創建package.json關聯的index.js文件
index.js代碼
function randomString(len) {
len = len || 32;
/****默認去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = $chars.length;
var pwd = '';
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
module.exports = randomString;
3 發佈包
npm publish
發佈失敗情況如下，那是因爲包名和別人重複了！
所以創建項目的時候，不要取通用的名字！！！
修改包名爲yh-random，重新發布
發佈成功，會提示 + 包名@版本號
三 使用包
1. 查看包
發佈成功後， 在官網會看到如下包信息
2. 新建一個測試工程
新建測試工程random-test
package.json文件
{
"devDependencies": {
"yh-random": "^1.0.0"
}
}
3. 安裝包
進入測試項目random-test目錄
npm i yh-random
安裝之後，項目會增加node_modules目錄
4. 測試類
test.html
<html>
<head>
<title>random test</title>
</head>
<body>
<input type="button" value="生成" onclick="create()"/>
</body>
<script type="text/javascript" src="node_modules/yh-random/index.js"></script>
<script type="text/javascript">
function create(){
alert(randomString(20));
}
</script>
</html>
測試結果如下，就可以通過npm的隨機數方法獲取隨機數了
四 總結
至此，整個npm包創建、安裝、使用就走完了，摸索過程中還是會遇到各種各樣的錯誤提示，上面已經貼了一些錯誤的情況，供大家參考。
前端的npm包可以理解爲和後端的jar包一樣，目的是爲了將一些公共的邏輯抽出來，然後可以多處或多個項目去引用，這種思想去編程將會帶來很大的效率。