使用verdaccio搭建私有npm

由於公司項目緣由，須要私有npm

使用以前，咱們先來個哲學三問

爲何咱們須要搭建私有cnpm?

• 由於不方便公開
• 能夠不用向npm付費，並且東西放在別人服務器上相對沒有本身電腦安全。
• 比git方便，也符合你們的習慣?

爲何使用verdaccio

由於、開源免費、穩定

工做原理是什麼?

（爲何要知道原理，之因此我要寫這個是由於我以爲只有先了解原理以後，後面的文檔才方便理解，纔有目標，纔有行動指南）

其實就是搭建一個服務，而後模擬npm，而這時候若是是本地的包就下載，不是本地的就用npm的。

來個圖

install

安裝有能夠docker、也能夠npm，咱們使用npm安裝。

npm install -g verdaccio --unsafe-perm
複製代碼

這時候可能會報權限錯誤，請用管理員的方式運行終端。

而後繼續。

這時候完成後可能會提示木有python環境，不用管它。

輸入

verdaccio
複製代碼

當作功了沒有。

這時候會輸出以下

看到

config file
複製代碼

這一行了沒有，這個有一個指向路徑，找不到config配置文件，就到這裏查看。

這個文件能夠修改一些配置，你如今用不到，之後必定能夠用到。

默認剛安裝，只能本身訪問，內網的人訪問不了，這時候我修改配置文件

vim  C:\Users\admin\AppData\Roaming\verdaccio\config.yaml
複製代碼

而後 在最下面添加以下代碼

listen:
          0.0.0.0:4873
複製代碼

這樣同事就能夠一塊兒訪問啦，否則等着報錯吧。

使用

咱們剛剛漏說了一點，verdaccio是sinopia的修改版，也就是fork出來的一個分支。由於sinopia不維護了，而後你們好像也遇到不少坑，因此不推薦直接使用sinopia，sinopia是nodejs寫的，因此verdaccio也是，這對咱們前端很友好。

剛剛咱們執行verdaccio的時候，會有一個端口，這個端口是4873,而後咱們也修改了內網可見，因此這時候能夠localhost:4873訪問，在瀏覽器訪問看看，這時候是空的，咱們來添加一下。

新建一個npm包

npm init
複製代碼

而後默認是指向index.js，因此咱們在目錄下新建一個index.js文件。

而後寫代碼，代碼你隨便寫，能夠簡單來個函數，好比

module.exports.Hello = function(name){
    console.log("Hello " + name);
}
複製代碼

寫好以後開始發佈。

npm adduser --registry http://localhost:4873
 npm login --registry=http://localhost:4873
npm publish
複製代碼

恭喜你 發佈成功，這時候繼續訪問剛剛打開的網站，或者刷新

如上所示，已經發部成功了

這時候就能夠食用（使用）了

安裝剛剛發佈的npm包

一種是

npm set registry http://localhost:4873/
npm install <你的包名> 
複製代碼

一種是 npm install <你的包名> --registry=http://localhost:4873

發連接給同事安裝，請用內網IP哦。

問題之，爲何我安裝後，沒有東西？

多是你新建文件開始install，可是木有npm init。因此失敗。

好了 很完美

其餘

如何刪除發佈的包呢 ?

npm unpublish <你的包名> --force
複製代碼

（被打了不要說從我這裏看到的

爲何我發佈的有些vue組件，在引入的時候報錯了呢，提示you may need an appropriate loader to handle this file type.？

兔大說： module parser failed, 是webpack不認識，默認都不會去管node_modules裏的代碼.

對於兔說的，按個人理解是 babel忽略從node_modules的引入，而後vue-loader引入後又交給了webpack，而後webpack不處理就gg了。

解決方案就是不要直接導出源碼

完成代碼編寫，導出npm組件

新建一個 .babelrc

{
    "presets": [
        "@babel/preset-env",
        "vue"
    ],
    "plugins": []
}
複製代碼

在package.json加入build

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src --out-dir lib --copy-files && npm publish --registry=http://localhost:4873"
  },
複製代碼

想要了解更多babel cli語法，見下面的相關連接。

而後每次發佈的時候，先修改version，而後執行npm run build

這時候代碼會跑到lib裏面導入lib裏面。引入lib裏面的代碼便可。

（默認vue-loader，會自動加上lib，不過最好加上lib路徑，哈哈）

須要安裝babel依賴哦，否則會報錯，跟我一塊兒安裝依賴吧

npm install --save-dev babel-cli @babel/preset-env
複製代碼

目錄以下

/src就是寫代碼的地方咯。 當咱們執行build的時候就多了一個lib文件。

也能夠更具阮老師的下面配置

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-stage-2

# ES7不一樣階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
複製代碼

{
    "presets": [
      "es2015",
      "stage-2"
    ],
    "plugins": []
}
複製代碼

相關連接

github.com/verdaccio/v…
zhaomenghuan.js.org/blog/npm-pr…
babeljs.io/docs/en/6.2…
www.ruanyifeng.com/blog/2016/0…