什麼是NPM
NPM（Node Package Manager）
，一個
Node.js
的包管理工具。本文不是
npm
的教程，簡單說一下，最顯著的作用就是用來管理和共享代碼的。
我的代碼為什麼要釋出到NPM
相信每個開發現代化工程的前端，都或多或少接觸過
NPM
，也或許敲了無數次的
npm i xxx
，同時我也相信，每一個前端在自己的開發生涯中，或多或少的總結了各種奇淫巧技，封裝了各種函數工具。
但是我們都知道每次
npm i
下來的東西有什麼作用，如何使用，但從來沒有
npm i
過自己的代碼。
我們每次切換新的項目都會複制一份到新項目裡，甚至在别人問的時候，直接發了段代碼過去。
是以我為什麼要釋出自己的代碼到
NPM
呢？
一是為了自己友善，更換工程的時候直接一個
npm i my-xxx
就能在新項目裡使用自己封裝的騷操作。
二是為了他人友善，當别人需要的時候，隻需告訴他安裝什麼什麼包，然後看
README
，完活。
如何釋出代碼到NPM
首先你要有個 NPM 賬号
你要到👉👉NPM官網 注冊一個賬号。新增賬號就不詳細講了，就跟你注冊大多數網站的賬号是一樣的，很傻瓜🤣，然後記下自己的 使用者名，密碼，和 郵箱。
然後你要建立一個檔案夾
建立一個檔案夾，命名沒有要求，正常開發項目怎麼命名，這裡就怎麼命名就行。
配置包的參數
進入到目标檔案夾，我們終端輸入
npm init
然後會讓我們輸入一些配置項，來看看都有哪些内容
- package name： 括号裡面這個就是替你預設把檔案夾名放在這裡了，直接使用就行，也可以改成其他的。這是我們後面用于下載下傳時候的包名。
- version： 版本号。括号裡預設是
1.0.0
x.x.x
- description： 編寫描述資訊，有助于人們在
npm
- entry point： 指定了加載的入口檔案，預設是
index.js
- test command： 測試指令，本文用不到，可以不填。
- git repository： 指定一個代碼存放位址，，本文用不到，可以不填。
- keywords： 關鍵字，有助于人們在
npm
- author： 作者的名字。
- license： 目前項目的協定，讓使用者知道他們有何權限來使用你的子產品，預設是
ISC
全部輸入完以後，會給我們一個預覽，問我們這樣可以嗎，然後我們回車即可。
之後會在根目錄下生成一個
package.json
的檔案。内容就是我們剛剛配置的哪些。
//package.json
{
"name": "testnpm",
"version": "1.0.0",
"description": "this is a test package",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"test"
],
"author": "yiweiliuying",
"license": "ISC"
}
生成package-lock.json
執行下方指令，生成
package-lock.json
檔案，友善我們檢視和調試。
npm link
登入賬号
npm login
//然後輸入Username Password Email 即可
我這裡用淘寶源的時候報了
500
錯誤，改成
npm
的源就好了，當看到
Logged in as hanzhiwei0174 on https://registry.npmjs.org/.。
就說明我們登入成功了。
然後就可以釋出我們的代碼了
npm publish
發現圖中報了
403
的錯誤，這是因為我們的包名已經被别人使用了，是以我們需要修改一下。
修改完以後再次運作
npm publish
，當我們看到
+xxx
就證明我們已經釋出成功了。現在去
npm
的官網看一下。
可以看到我們的代碼就成功的被釋出到
npm
上了。
如何使用已經釋出的NPM包
這個步驟其實有點多餘，誰還沒通過
npm
使用過别人的庫了。
畢竟是自己的庫，搞一手。
我随便找了個
vue3
的項目
npm i vuf3 -s
然後在
node_modules
找一下，打開
index.js
發現和我們之前寫的一模一樣。
測試一下
<template>
<div>
<button @click='handleTest'>測試NPM</button>
</div>
</template>
<script>
import { test } from 'vuf3';
export default {
setup () {
const handleTest = () => {
test(123);
};
return {
handleTest,
};
},
};
</script>
成功!以後就可以封裝自己的各種工具函數到這裡，開始打造自己的庫。
如何更新版本
代碼修改完成後，修改
package.json
中的
version
字段，然後再次執行
npm publish
即可。
可以看到，
npm
官網上的版本已經到了
3.0.1
。
如何删除版本
npm unpublish package.[email protected]
當我們看到
[email protected]
的時候，說明版本已經成功的删除掉了。
可以看到，版本再次回退到
1.0.21
了。
注意
- 隻有在發包的24小時内才允許撤銷釋出的包
- 即使你撤銷了釋出的包，發包的時候也不能再和被撤銷的包的名稱和版本重複了
本文旨在記錄如何釋出一個包到
npm
，至于每個字段的細節，每個指令的限制等知識點，需要自行了解。