如何搭建npm私有倉庫及發布npm包
一 npm介紹
1.1 npm概述
npm是世界上最大的軟件注冊表。來自全球的javascript開源開發人員使用npm共享和借用軟件包，許多組織也使用npm管理私人開發。
npm由三個不同部分組成：
使用該網站發現軟件包，設置配置文件以及管理npm體驗的其他方面。例如，您可以設置組織（組織）來管理對公共或私有軟件包的訪問。
命令行界面（CLI）
該CLI從終端運行，並且是如何大多數開發商NPM互動（NPM的cli是隨同NodeJS一起安裝的）
注冊表 https://www.npmjs.com/signup
該注冊表是JavaScript軟件及其周圍的元信息的大型公共數據庫（注冊賬號后在npm網站自行發布npm包）
1.2 使用npm后
調整適用於您的應用程序的代碼包，或直接合並它們。
下載您可以立即使用的獨立工具。
運行軟件包而不使用npx下載。
與任何npm用戶在任何地方共享代碼。
將代碼限制為特定的開發人員。
創建組織（組織）來協調軟件包的維護，編碼和開發人員。
通過使用組織來組建虛擬團隊。
管理多個版本的代碼和代碼依賴項。
基礎代碼更新時，可以輕松更新應用程序。
發現解決同一難題的多種方法。
查找正在從事類似問題和項目的其他開發人員。
1.3 入門
1.3.1 環境搭建
要開始使用npm，你得先安裝nodejs,NPM是隨同NodeJS一起安裝的包管理工具:
nodejs下載地址：https://nodejs.org/zh-cn/download/
下載安裝完成后，打開cmd終端輸入
node -v
npm -v
查看是否安裝成功：
1.3.2 注冊表賬號注冊登錄
方式一： 官網注登錄頁面自行注冊登錄
方式二： 終端命令行注冊登錄
注冊：
$ npm adduser
// 會出現以下內容
Username: mcmohd // 用戶名（注意別和已有的賬號名稱相同）
Password: // 密碼
Email: (this IS public) mcmohd@gmail.com // 郵箱
=================================================================
登錄：
$ npm login
// 依次輸入以下內容
Username: // 用戶名（拼寫了現有帳戶的用戶名，則將使用拼寫錯誤的名稱創建一個新帳戶。如需有關意外創建帳戶的幫助，請聯系npm支持）
Password: // 密碼
Email: (this IS public) mcmohd@gmail.com // 郵箱
測試是否登錄
npm whoami // 回車后顯示你的用戶名就說明登錄成功
npm賬號相關: https://docs.npmjs.com/getting-started/
1.3.3 npm Enterprise（企業） 配置和登錄
https://docs.npmjs.com/configuring-your-registry-settings-as-an-npm-enterprise-user 配置
https://docs.npmjs.com/logging-in-to-an-npm-enterprise-registry-from-the-command-line 登錄
1.4 共享軟件包並與他人合作
如果您選擇公開共享您的軟件包，則無需付費。要使用和共享私人軟件包，您需要升級您的帳戶。要與他人共享，請創建名為npm Orgs的組織，並邀請其他人與您私下（收費）或公開（免費）合作。或者，您可以為公司注冊npm的私有實例，稱為npm Enterprise，這樣您就可以在內部開發不公開共享的軟件包。
官方針對不同類型的收費如下：
https://www.npmjs.com/products
1.5 CLI參考文檔
https://docs.npmjs.com/cli-documentation/ 官網
https://www.npmjs.cn/cli/access/ 中文文檔
二 使用npm包
2.1 關於軟件包和模塊
參考： https://docs.npmjs.com/about-packages-and-modules
2.1.1 關於包格式
軟件包是以下任意一種：
a）包含package.json文件描述的程序的文件夾。
b）包含（a）的壓縮tarball。
c）解析為（b）的URL。
d）<name>@<version>用（c）在注冊表上發布的A。
e）<name>@<tag>指向（d）的A。
F）甲<name>，其具有latest滿足標簽（E）。
g）git克隆后得到（a）的URL。
可以通過以下方式格式化用於npm軟件包的Git URL：
git://github.com/user/project.git#commit-ish
git+ssh://user@hostname:project.git#commit-ish
git+http://user@hostname/project/blah.git#commit-ish
git+https://user@hostname/project/blah.git#commit-ish
commit-ish可以是任何標簽，沙，或分支，可以作為參數被供給git checkout。默認commit-ish值為master
2.1.2 關於模塊
模塊是在任何文件或node_modules目錄可以由Node.js的加載require()功能。
要由Node.js require()函數加載，模塊必須是以下之一：
具有package.json包含"main"字段的文件的文件夾。
包含index.js文件的文件夾。
一個JavaScript文件。
注意： 由於不需要模塊具有package.json文件，因此並非所有模塊都是軟件包。只有具有package.json文件的模塊才是包。
在Node程序的上下文中，module也是從文件加載的內容。例如，在以下程序中：
var req = require('request')
我們可能會說"變量req引用request模塊"。
通常我們引用包會通過require或者import這兩種引用模塊的方法引入
2.2 npm軟件包的范圍，訪問級別和可見性
npm軟件包的可見性取決於包含該軟件包的范圍（名稱空間），以及為該軟件包設置的訪問級別（私有或公共）。
注意：要創建組織范圍的包，必須首先創建組織。有關更多信息，請參見" 創建組織 "。
公共注冊表
范圍 |
訪問權限 |
可以查看和下載 |
可以寫（發表） |
組織 |
私人的 |
對組織具有讀取權限的團隊成員 |
組織中的團隊成員具有對該包的讀寫訪問權限 |
組織 |
上市 |
大家 |
組織中的團隊成員具有對該包的讀寫訪問權限 |
用戶 |
私人的 |
程序包所有者和已被授予讀取權限的用戶訪問程序包 |
程序包所有者和已被授予對該程序包讀寫權限的用戶 |
用戶 |
上市 |
大家 |
程序包所有者和已被授予對該程序包讀寫權限的用戶 |
無范圍 |
上市 |
大家 |
程序包所有者和已被授予對該程序包讀寫權限的用戶 |
注意：只有用戶帳戶才能創建和管理無作用域的程序包。組織只能管理范圍內的軟件包。
NPM企業
下表適用於2018年7月26日之后購買npm Enterprise的客戶。
范圍 |
訪問權限 |
可以查看和下載 |
可以寫（發表） |
組織 |
私人的 |
企業注冊表中已登錄的成員，該成員屬於組織中的一個團隊，對該包具有讀取權限 |
企業注冊表中已登錄的成員，該成員屬於組織中的一個團隊，並且對該包具有讀寫訪問權限 |
組織 |
上市 |
企業注冊表的所有登錄成員 |
企業注冊表中已登錄的成員，該成員屬於組織中的一個團隊，並且對該包具有讀寫訪問權限 |
用戶 |
私人的 |
程序包所有者和企業注冊表的登錄成員已被授予對該程序包的讀取訪問權限 |
程序包所有者和Enterprise注冊表的登錄成員已被授予對該程序包的讀寫訪問權限 |
用戶 |
上市 |
企業注冊表的所有登錄成員 |
程序包所有者和Enterprise注冊表的登錄成員已被授予對該程序包的讀寫訪問權限 |
無范圍 |
上市 |
企業注冊表的所有用戶 |
無（請參閱下面的注釋） |
注意： npm Enterprise上的無作用域名稱空間是為公共npm注冊表中的無作用域軟件包保留的。為了防止npm Enterprise用戶將專有代碼意外地發布到公共npm注冊表中（Internet上任何人都可以看到該私有代碼），我們不允許將無范圍的程序包發布到npm Enterprise。
三 發布簡易的npm包
只做參考，具體發布正式包，得遵守一定規則
package.json
參考：https://docs.npmjs.com/creating-a-package-json-file
version是語義化的，major.minor.patch. 如果是major變動，通常意味着不兼容的修改; 如果是minor，意味着添加向后兼容的新功能，如果是patch, 意味着bug的修復。詳情見semver.org
description是對包的描述，在npmjs.com上搜索時會顯示，有助於用戶在搜索時進行篩選
keywords 同樣也是幫助用戶查找到你的包
author的格式一般是${your name} ${email}, 當然也可以是一個github地址
contributors 包的其他貢獻者姓名
license可能很多人會忽略，最好也寫上去。至於用哪個，vue的官方項目全是MIT，因此我也是MIT，不糾結
repository的格式參考如下：
"repository": { "type": "git", "url": "https://github.com/FEMessage/el-data-table.git" }
這樣在npm包頁面就有會個github的入口
main定義了包的入口文件，在NodeJs環境，語句import pkg from 'package-name'時，其實導入的就是main定義的文件，它可以是CommonJs格式的, 也可以是umd格式
需要注意的是，當你把一個包發布到npm上時，它同時也可以在unpkg上獲取到。也就是說，你的代碼既可能在NodeJs環境也可能瀏覽器環境執行。為此你需要用umd格式打包，並且在package.json定義unpkg字段，一般而言此時它的命名為name.min.js
最后，別忘了定義module或jsnext:main字段，它表示用ES6模塊格式打包，給Webpack 2+或Rollup等先進的構建工具來處理。
我們來看一下三個字段的示例：
"main": "dist/el-data-table.js", "unpkg": "dist/el-data-table.min.js", "module": "dist/el-data-table.esm.js"
scripts 為了防止出現發包前忘記構建的烏龍事件，定義一下發布前的腳本, 這樣每次執行npm publish前都會先執行npm run build
"prepublishOnly": "npm run build"復制代碼
engines 可以告訴用戶運行你的包對NodeJs版本的要求，這是非常重要的，不然你使用了NodeJs新版本特性，卻沒有定義該字段，導致低版本NodeJs用戶運行報錯，讓人摸不着頭腦。
當你開發一個項目時，比如一個靜態網站或一個單面應用，dependencies和devDependencies並沒有太多區別，因為你npm install 或 yarn時，這些依賴都會下載下來，因為你是在開發。但對於發布到npm的包則不同：dependencies 是運行你的包必須安裝的依賴，即當用戶yarn add my-awesome-package時，這些依賴也會下載。devDependencies 是開發你的包時需要安裝的依賴，比如eslint, jest等開發工具，當用戶yarn add my-awesome-package 時，這些依賴並不會下載！peerDependencies 一般用於開發插件的場景，它要求用戶必須預先安裝了某些依賴。比如開發webpack的插件，如果你把對webpack的依賴定義成dependencies, 如果用戶安裝的webpack跟dependencies里的minor版本不一致, 則用戶yarn add my-webpack-plugin時會把dependencies定義的webpack也下載下來，也即用戶會安裝兩個major版本相同的webpack, 這就不合適了。所以說，定義好你的包的依賴，可以讓用戶安裝使用你的包時少點困惑，多些愉悅。
3.1.1 發布公共包
參考 https://docs.npmjs.com/about-public-packages
3.1.1.1無范圍的公共包簡單示例：
1 在命令行上，為包創建目錄：
mkdir my-test-package
2 導航到包的根目錄：
cd my-test-package
3 如果您使用git來管理軟件包代碼，請在軟件包根目錄中運行以下命令，用git-remote-urlgit遠程URL 替換軟件包：
git init
git remote add origin git://git-remote-url
4 在軟件包根目錄中，運行npm init命令。
5 響應提示以生成package.json文件。有關命名軟件包的幫助，請參閱" 軟件包名稱准則 "。
6 創建一個README文件，說明您的程序包代碼是什么以及如何使用它。
7 在您喜歡的文本編輯器中，為您的程序包編寫代碼。
8 一旦你的package.json文件被創建，你需要創建需要你的模塊時，將加載該文件。該文件的默認名稱是index.js。
在該文件中，添加一個函數作為exports對象的屬性。這將使該功能可用於其他代碼。
exports.printMsg = function() {
console.log("This is a message from the demo package");
}
9 登錄你的npm公共注冊表賬號
npm login
然后輸入用戶名和密碼登錄
10 發布你的npm包
npm publish
成功的話，你登陸你的npm賬號，就可以查看到。然后你就可以在別的項目里和下載別的模塊一樣，npm install [你的包名字]
3.1.1.2 有范圍的公共包
1 在命令行上，為包創建目錄：
mkdir my-test-package
2 導航到包的根目錄：
cd my-test-package
3 如果您使用git來管理軟件包代碼，請在軟件包根目錄中運行以下命令，用git-remote-urlgit遠程URL 替換軟件包：
git init
git remote add origin git://git-remote-url
4 在軟件包根目錄中，運行命令：
npm init --scope=@范圍 // 范圍寫組織名或者用戶名
5 響應提示以生成package.json文件。有關命名軟件包的幫助，請參閱" 軟件包名稱准則 "。
6 創建一個README文件，說明您的程序包代碼是什么以及如何使用它。
7 在您喜歡的文本編輯器中，為您的程序包編寫代碼。
8 一旦你的package.json文件被創建，你需要創建需要你的模塊時，將加載該文件。該文件的默認名稱是index.js。
在該文件中，添加一個函數作為exports對象的屬性。這將使該功能可用於其他代碼。
exports.printMsg = function() {
console.log("This is a message from the demo package");
}
9 登錄你的npm公共注冊表賬號
npm login
然后輸入用戶名和密碼登錄
10 發布你的npm包
npm publish --access public
成功的話，你登陸你的npm賬號，就可以查看到。然后你就可以在別的項目里和下載別的模塊一樣，npm install [你的包名字] 如：
3.1.2 發布官方私有包
參考： https://docs.npmjs.com/about-private-packages
需要付費，具體收費如下：
優缺點
缺點：需要支付每個月7美刀； 不能使用npm直接update;
優點：簡單直接；開源&閉源項目同一托管
一般公司都會自行搭建私有倉庫。具體請看下文。
四 自行搭建私有npm倉庫
4.1 npm+git私有倉庫搭建企業私有的npm
1.新建私有git倉庫（如：https://gitlab.com/mygroup/myproject.git)，用git建立項目較方便代碼的管理，也能作為npm的scope命名。
2.clone倉庫
git clone https://gitlab.com/mygroup/myproject.git
3.npm init
npm init --scope=mygroup
4.按npm規范開發完。push到倉庫即可
5.安裝
"@mygroup/myproject": "https://gitlab.com/mygroup/myproject.git"
如果不想輸入用戶名密碼，可以象下面這樣，但不建議在我們項目的package.json中這樣做：
"git+https://github賬號名:密碼@github.com/weiduqianduan/npmTest.git"
6.使用
var myproject = require('@mygroup/myproject');
優缺點
缺點：不能使用npm直接update
優點：簡單直接
4.2 使用verdaccio自己托管
4.2.1 windows本地電腦搭建嘗試
1 安裝verdaccio(輕量級開源私有npm代理注冊表)：
npm i verdaccio -g
2 啟動服務：
verdaccio
3 修改config.yaml
參考： https://www.jianshu.com/p/0c905e4a8b70
直接替換為：
=======或者你手動修改======
在底部加上：
# 監聽端口，重點，不配置這個只能本機可以訪問
listen: 0.0.0.0:4873
修改uplinks為：
# 公有倉庫配置
uplinks:
npmjs:
url: https://registry.npmjs.org/
yarn:
url: https://registry.yarnpkg.com/
cnpm:
url: http://r.cnpmjs.org/
taobao:
url: https://registry.npm.taobao.org/
4 然后重新起下verdaccio 服務
之后你就可以通過本地http://localhost:4873/或者本機ip:4873訪問verdaccio 界面了
4.2.2 linux CentOS服務器搭建私有npm倉庫
1 安裝nodejs npm相關環境：
使用二進制文件安裝
該部署過程使用的安裝包是已編譯好的二進制文件。解壓之后，在bin文件夾中就已存在node和npm，無需重復編譯。
完成以下操作，使用二進制文件部署Node.js環境：
下載Node.js安裝包。
wget https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz
解壓文件。
tar xvf node-v12.16.1-linux-x64.tar.xz
創建軟鏈接，您就可以在任意目錄下直接使用node和npm命令。
ln -s /root/node-v12.16.1-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v12.16.1-linux-x64/bin/npm /usr/local/bin/npm
查看node、npm版本。
node -v
npm -v
至此，Node.js環境已安裝完畢。軟件默認安裝在/root/node-v6.9.5-linux-x64/目錄下。
如果需要將該軟件安裝到其他目錄（例如：/opt/node/）下，請進行如下操作：
mkdir -p /opt/node/
mv /root/node-v12.16.1-linux-x64/* /opt/node/
rm -f /usr/local/bin/node
rm -f /usr/local/bin/npm
ln -s /opt/node/bin/node /usr/local/bin/node
ln -s /opt/node/bin/npm /usr/local/bin/npm
參考：https://help.aliyun.com/document_detail/50775.html
2 安裝verdaccio(輕量級開源私有npm代理注冊表)：
node和npm版本夠高后：
npm install -g verdaccio --unsafe-perm
注:加上--unsafe-pern的原因是防止包grywarn權限錯誤
3 啟動服務：
/root/node-v12.16.1-linux-x64/bin/verdaccio
或者你把verdaccio增加進環境變量然后直接
verdaccio
4 修改config.yaml
參考： https://www.jianshu.com/p/0c905e4a8b70
在底部加上：
# 監聽端口，重點，不配置這個只能本機可以訪問
listen: 0.0.0.0:4873
修改uplinks為：
# 公有倉庫配置
uplinks:
npmjs:
url: https://registry.npmjs.org/
yarn:
url: https://registry.yarnpkg.com/
cnpm:
url: http://r.cnpmjs.org/
taobao:
url: https://registry.npm.taobao.org/
或者你閑麻煩，直接替換為：
5 重新起下verdaccio 服務
/root/node-v12.16.1-linux-x64/bin/verdaccio
阿里雲服務器安全組配置下此4873端口出入權限。
之后你就可以通過服務器ip:4873訪問verdaccio 界面了
6 進程守護
為了防止異常情況引起的verdaccio服務停止,采用nohup或者pm2做進程守護
使用pm2：
npm install pm2 -g
pm2 start verdaccio // 注意得把pm2和verdaccio增加到環境變量
7 解析一個域名管理到此ip端口
由於ip可能會變，變的話就會造成使用npm的所有同事開發電腦及項目的服務器得改動指定源，建議通過域名訪問為好
至此服務器相關操作都已完成
4.2.2 verdaccio權限及身份認證相關
把npm私有倉庫布置到公司內網，不用這么麻煩的配置身份權限什么的。
相關配置參考：
https://verdaccio.org/docs/en/packages
https://verdaccio.org/docs/en/authentification
4.3 發布私有倉庫的npm（開發電腦操作）
1為了切換npm源方便，我們使用nrm
npm i nrm -g // 安裝
nrm add 私有源名稱 啟動的verdaccio界面的地址
nrm ls // 列出所有的源查看
nrm use 私有源名稱 //切換到對應的源
私有源名稱自定義。最好弄公司和組織名稱大家統一下。
2 npm增加用戶
npm adduser --registry 啟動的verdaccio界面的地址
然后用戶名輸入個人的英文名或拼音
密碼自定義
郵箱用個人在公司或組織的郵箱
3 發布私有庫
首先編寫好一個符合規范的npm包，並提交到git(方便代碼管理)
npm init --scope @范圍名
git相關操作
然后用以下命令發布：
npm publish --registry 啟動的verdaccio界面的地址
發布成功后，瀏覽器打開verdaccio界面刷新就可以看到你發布的私有包了，如下：
4.4 使用私有倉庫的npm包
1為了切換npm源方便，我們使用nrm
npm i nrm -g // 安裝
nrm add 私有源名稱 啟動的verdaccio界面的地址
nrm ls // 列出所有的源查看
nrm use 私有源名稱 //切換到對應的源
私有源名稱自定義。最好弄公司和組織名稱大家統一下。
2 npm登錄或增加用戶
此源有注冊用戶的話：
npm login
然后輸入用戶名和密碼登錄
沒有注冊過的話：
npm adduser --registry 啟動的verdaccio界面的地址
然后用戶名輸入個人的英文名或拼音
密碼自定義
郵箱用個人在公司或組織的郵箱
之后安裝包和npm操作一致。安裝npm的公共包不用再次切換源。verdaccio已經配置了找不到私有包就通過npm從npm社區下載
五 如何編寫一個高質量的npm包
5.1 vue發布一個npm包
示例代碼： https://gitee.com/js-template/npm_vue_tem
5.1.1 使用vuecli3創建項目
vue create npm_vue_tem
5.1.2 修改目錄
把src目錄改為examples作為查看組件的演示目錄，新建packages目錄作為組件編寫的目錄。
在packages下新建index.js作為導出組件入口，作為整個組件庫的導出，新建組件文件夾作為組件源碼的放置，比如我的組件目錄叫做 todoList ，在todoList文件夾下新建index.js文件對外提供對文件的引用，新建src文件夾並編寫todolist功能實現的.vue文件。整個packages文件夾下是如下的樣子：
5.1.3 修改vue.config.js配置：
在項目根目錄下新建vue.config.js並添加如下修改 src 目錄 為 examples 目錄：
module.exports = {
// 修改 src 目錄 為 examples 目錄
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html',
},
},
};
-
編寫組件詳細看
https://gitee.com/js-template/npm_vue_tem/tree/master/packages/todoList/src
然后在packages/todolist/index.js導出組件:
import TodoList from './src/index.vue';
import TodoFooter from './src/TodoFooter.vue';
import TodoHead from './src/TodoHead.vue';
import TodoItem from './src/TodoItem.vue';
import TodoLists from './src/TodoLists.vue';
// 為組件提供 install 安裝方法，供按需引入
TodoList.install = function(Vue) {
Vue.component('TodoFooter', TodoFooter);
Vue.component('TodoHead', TodoHead);
Vue.component('TodoItem', TodoItem);
Vue.component('TodoLists', TodoLists);
Vue.component('TodoList', TodoList);
};
// 默認導出組件
export default TodoList;
5.1.4 編寫示例
在examples/App.vue引入todolist組件：
<template>
<div id="app">
<TodoList></TodoList>
</div>
</template>
<script>
export default {
name: 'app',
components: {
TodoList: () => import('./../packages/todoList/index'),
},
};
</script>
然后你npm run serve 跑起項目查看組件是否編寫正常
5.1.5 單元測試
這里采用的是vue官方的vue-test-util + jest編寫單元測試
詳細例子查看：
https://gitee.com/js-template/npm_vue_tem/blob/master/tests/unit/todoList.spec.js
相關資料：
5.1.6 README.md
注意npm包必須寫此markdown語法使用說明文件
示例參考： https://gitee.com/js-template/npm_vue_tem/blob/master/README.md
相關資料：
https://zhuanlan.zhihu.com/p/29204311 從零開始教你寫一個NPM包
https://shields.io/ 徽章制作地址
5.1.7 發布前的准備
5.1.7.1 在根目錄添加 .npmignore 文件，設置忽略發布文件。
我們發布到 npm 中，只有編譯后的 lib 目錄、package.json、README.md才是需要被發布的。所以我們需要設置忽略目錄和文件。
.DS_Store
node_modules/
examples/
packages/
public/
tests/
.eslintrc.js
jest.config.js
vue.config.js
babel.config.js
*.map
*.html
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
5.1.7.2 package.json 修改
vuecli3提供了一個構建目標庫的命令，可以查看官方文檔詳細了解：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93
vue-cli-service build --target lib --name myLib [entry]
--target : 構建目標，默認為應用模式。這里修改為 lib 啟用庫模式。
--dest : 輸出目錄，默認 dist 。這里我們改成 lib
[entry] : 最后一個參數為入口文件，默認為 src/App.vue 。這里我們指定編譯 packages/ 組件庫目錄。
這里我修改的為：
"build": "vue-cli-service build --target lib --name todolist --dest lib packages/todoList/index.js",
為了防止出現發包前單元測試沒通過或忘記構建的烏龍事件，定義一下發布前的腳本, 這樣每次執行npm publish前都會先執行單元測試檢查（vuecli3起的單元測試命令為npm run test:unit）以及打包（npm run build）
"prepublishOnly": "npm run test:unit && npm run build"
參考： https://segmentfault.com/a/1190000008832423
https://docs.npmjs.com/misc/scripts
添加npm包的一些詳細信息,僅供參考：
"name": "@demo1/todolist",
"version": "0.1.1",
"author": "leonard",
"description": "vue-todolist",
"main": "lib/todolist.umd.min.js",
"keyword": "vue todolist todo",
"license": "MIT",
"private": false,
詳細： https://gitee.com/js-template/npm_vue_tem/blob/master/package.json
5.1.8 打包編譯
npm run build
編譯成功后，可以發現項目根目錄多了個lib文件夾：
dist/*.common.js：一個給打包器用的 CommonJS 包 (不幸的是，webpack 目前還並沒有支持 ES modules 輸出格式的包)
dist/*.umd.js：一個直接給瀏覽器或 AMD loader 使用的 UMD 包
dist/*.umd.min.js：壓縮后的 UMD 構建版本
dist/*.css：提取出來的 CSS 文件 (可以通過在 vue.config.js 中設置 css: { extract: false } 強制內聯)
npm使用的package.json文件實際上僅需要一個版本（main），但事實證明，我們不限於此。我們可以通過指定2個其他版本（module和unpkg）來解決最常見的用例，並.vue使用browser字段提供對文件本身的訪問。一個示例package.json看起來像這樣：
{
"name": "my-component",
"version": "1.2.3",
"main": "dist/my-component.umd.js",
"module": "dist/my-component.esm.js",
"unpkg": "dist/my-component.min.js",
"browser": {
"./sfc": "src/my-component.vue"
},
...
}
當使用webpack 2 +，Rollup或其他現代構建工具時，它們將在module構建中使用。舊版應用程序將使用該main版本，並且該unpkg版本可以直接在瀏覽器中使用。實際上，當有人在您的服務中輸入模塊的URL時，unpkg cdn會自動使用它！
警告：如果你在開發一個庫或多項目倉庫 (monorepo)，請注意導入 CSS 是具有副作用的。請確保在 package.json 中移除 "sideEffects": false，否則 CSS 代碼塊會在生產環境構建時被 webpack 丟掉
5.1.9 代碼通過git管理
5.1.9.1 簡單說明
為了方便npm包的更新迭代，及多人維護，這里我們使用github或者gitlab等git代碼托管平台進行托管。默認master分支是當前包的穩定版本，具體開發流程按照gitflow工作流進行。
5.1.9.2 Git hook
為了代碼的健壯性及規范統一。我們在每次git提交時得做些檢查。
這里我們使用husky
參考： https://github.com/typicode/husky
npm install husky --save-dev
然后在package.json里加上
"husky": {
"hooks": {
"pre-commit": "npm run test:unit && eslint --fix --ext .js,.vue examples packages tests/unit "
}
},
以上配置了每次git commit時都會進行一次單元測試以及eslint自動檢測修復。如果沒通過，就會git commit失敗。如果你覺得每次commit時就檢查，很麻煩，可以改為pre-push
5.1.10 npm私有包發布
切換在git master分支，保證此分支代碼穩定。然后按上文所說，切換npm源到你的私有倉庫，然后npm login 再 npm publish 即可發布
這里可以考慮利用jenkins創建任務，拉取git代碼。進行自動化發布
5.2 發布一個純js的npm包
1 寫基礎模塊代碼；
2 注冊npm賬號；
3 配置package.json；
4 配置webpack；
5 增加eslint代碼規范
6 添加單元測試；
7完善README.md；
8 commit及發布前檢測代碼
9 提交代碼到master分支及發布
1，2，3足可以完成一個npm。4，5，6，7是為了開發一個高質量的npm。8，9是保證包的穩定
一些規范和vue的一致。用webpack打包出對應的npm入口文件。具體自行查看示例代碼：
https://gitee.com/js-template/npm_js_tem
六 更新已發布的npm包
每次修改完組件后，我們需要更新版本
方式一 修改 package.json 的version版本
規則：對於"version":"x.y.z"
1.修復bug,小改動，增加z
2.增加了新特性，但仍能向后兼容，增加y
3.有很大的改動，無法向后兼容,增加x
然后重新npm publish發布包
方式二 使用命令修改版本
使用命令：npm version <update_type>進行修改，update_type 有三個參數，
第一個是patch, 第二個是minor,第三個是 major，
patch：這個是補丁的意思；
minor：這個是小修小改；
major：這個是大改動；
具體咋用：
比如我想來個1.0.1版本，注意，是最后一位修改了增1，那么命令：npm version patch 回車就可以了；
比如我想來個1.1.0版本，注意，是第二位修改了增1，那么命令： npm version minor 回車就可以了；
比如我想來個2.0.0版本，注意，是第一位修改了增1，那么命令： npm version major 回車就可以了；
然后 使用 npm publish 發布即可
七 取消已發布的npm包
7.1 終端cli命令取消
參考： https://docs.npmjs.com/unpublishing-packages-from-the-registry
7.1.1 取消發布軟件包的單個版本
要取消發布軟件包的單個版本，請運行以下命令，用<package-name>軟件包的名稱和<version>版本號替換：
npm unpublish <package-name>@<version>
7.1.2 取消發布整個程序包
要取消發布整個程序包，請運行以下命令，用<package-name>您的程序包名稱替換：
npm unpublish <package-name> -f
如果為寫入啟用了雙重身份驗證，則需要在unpublish命令中添加一次性密碼--otp=123456（其中123456是您的身份驗證器應用程序中的代碼）。
7.2 私有npm倉庫刪除直接在服務器上刪除
一般情況建議用終端單個刪除。如果是想一次性刪除多個的話，連接上你部署verdaccios的服務器，具體操作示例如下：
cd /home/yg/.config/verdaccio
~/.config/verdaccio$ ls
config.yaml htpasswd storage
~/.config/verdaccio$ cd storage
~/.config/verdaccio/storage$ ls
~/.config/verdaccio/storage$ rm -rf 包名
八 npm包安全
參考： https://docs.npmjs.com/packages-and-modules/securing-your-code
九 將npm與第三方工具（例如CI / CD應用程序）集成
https://docs.npmjs.com/integrations/
十 npm注冊表組織和企業相關
https://docs.npmjs.com/orgs/ 組織
https://docs.npmjs.com/enterprise/ 企業
參考資料
https://www.runoob.com/nodejs/nodejs-npm.html 菜鳥教程
https://blog.csdn.net/kwgm2015/article/details/86714586 搭建企業私有npm倉庫
https://www.jianshu.com/p/0c905e4a8b70 使用verdaccio 搭建私有npm 服務器（包含verdaccio配置相關）
https://blog.csdn.net/kwgm2015/article/details/86714586 搭建企業私有npm倉庫
https://verdaccio.org/en/ verdaccio官網
https://www.npmjs.com/package/nrm nrm
https://juejin.im/post/5b231f6ff265da595f0d2540 vue組件發布npm最佳實踐
https://www.jianshu.com/p/fef9eea4a373 從0開始發布一個無依賴、高質量的 npm 包
https://zhuanlan.zhihu.com/p/29204311 從零開始教你寫一個NPM包