【第557期】搭建前端私有npm雜記

前言

有必定規模的前端團隊，本文值得一看。當初早讀君看到這個的時候就想起一兩年前給團隊折騰的組件頁面，當時仍是用bower來管理下載組件的，不過期過境遷，如今又有新的方式出來了，私有npm能夠嘗試起來。本文由@呂大豹受權分享其在搭建私有npm的過程。

正文從這開始～

隨着前端隊伍愈來愈壯大，項目間共享代碼就變得尤其重要。經常使用的框架/類庫不必在每一個項目都放一份，團隊內部產出的公共模塊也須要有合理的共享機制。如今，用npm管理前端代碼已是業界趨勢。樓主嘗試用私有npm+資源管理系統的方式搭建起一套前端資源倉庫，用以在公司內部託管公共代碼，併爲開發環境提供代碼源。本文記錄一下搭建過程，或許能夠給你們作個參考。

 

總體架構

搭建私有npm的話實際上是很是簡單的，github上有一個叫作sinopia（https://github.com/rlidwka/sinopia）的項目，使用至關簡單，無需配置數據庫。用阿里的cnpm也是能夠搭建私有npm的，不過配置稍微麻煩些。鑑於只是beta階段，因此我就先採用簡單的sinopia了。npm有兩個做用：1.託管公共代碼；2.爲開發環境提供代碼源。也就是說在開發環境，只需npm install，相應的代碼就被下載到項目中。固然咱們應該配置ignore，使得node_modules文件夾不被提交到代碼庫。線上的資源都是走cdn的。

光是私有npm仍是不夠的，考慮到公司不斷有新的前端入職，有些仍是新手，因此有必要爲每一個模塊提供詳細的說明。包括不限於基本信息、使用方法、在線demo、cdn地址等等。使用README.md文件雖然也能描述不少信息，但它只是一個靜態文件，咱們的系統還須要具有發佈到npm、同步到cdn的功能。之後也可能進行功能擴充，好比爲前端工程化提供支持。因此還須要一個資源管理系統，這個系統用於維護公共資源的各類信息。

因此，這麼考慮下來，咱們的前端資源倉庫應該包含兩部分：資源管理系統、私有npm。各自的功能以下：

資源倉庫的維護

所謂維護就是把源代碼錄入到資源管理系統、發佈到npm、同步到cdn這一過程。按照npm的規格來組織模塊的目錄結構，但也不徹底一致，由於有些是不須要的。模塊都用UMD格式包裝，這樣不管用加載器仍是直接寫<script>標籤都是可用的。具體格式以下：

• 用模塊的名稱命名根目錄

• 模塊的不一樣版本，新建不一樣的目錄，如jquery/1.8.3/src/jquery.js，jquery/2.1.0/src/jquery.js

• src目錄，用於放置未壓縮的源碼

• dist目錄，用於放置壓縮後的代碼

• 使用package.json文件的規格來描述本模塊

這樣就夠了，系統提供發佈功能，上傳的文件會自動發佈到咱們的npm，而且同步到cdn。至於模塊的使用方法等其餘信息，則須要模塊維護者手動錄入到系統中。這樣，私有npm與這個資源管理系統就沒有任何耦合，未來也好作擴展。流程以下：

關於cdn的同步，咱們只同步dist目錄下的文件，由於線上只須要壓縮版。至於模塊的打包，不在本系統的職責範圍內，由項目內的構建程序去完成。

 

如何使用

對於使用者，也就是前端同事們，須要作這麼幾件事：

• 項目中配置好package.json，npm install安裝好所需的模塊

• 從資源管理系統中獲取到各模塊的cdn地址

• 配置項目中的各模塊地址，開發環境請求本地node_modules下的文件，線上環境請求cdn。

• 使用gulp進行相關的構建，發佈到測試環境/線上環境

在npm install前，須要把倉庫地址指向咱們搭的私有npm，而再也不是npm官方的地址。使用npm set resigtry命令。若是你以爲麻煩，或者須要常常改動地址，github上有一個很方便的registry管理工具，nrm(https://github.com/Pana/nrm)，推薦使用。

第3步須要作一個說明，由於咱們如今項目不少，各項目的目錄結構也不一致，有的先後端還未分離，因此沒法作到用同一套構建程序搞定全部的項目。配置的方法視項目的狀況而定，能夠依靠後端來動態給require.config賦值，也能夠用gulp來進行編譯，總之能達到在不一樣環境請求不一樣路徑就行。

 

技術細節

sinopia的話照着文檔去安裝就行。由於咱們是安裝在服務器上，因此有兩點配置須要注意：

• node_modules/sinopia/conf下的default.yaml中，listen: - 0.0.0.0:4873，使得其餘機器能夠訪問到該端口

• 在sinopia的存儲目錄下，有一個config.yaml，把proxy: npmjs注掉。咱們公司內部可能只維護幾個特定版本，因此不必和官方倉庫同步。

sinopia有一個機制，當你從私有npm安裝一個模塊時，若是不存在，會從npm官方倉庫拉取，也就是這個proxy配置的地址。咱們注掉後，也就沒法去官方倉庫去拉了，而這正是我須要的。一方面經過一個代理去訪問npm有不穩定的風險，另外一方面，我須要使用者時刻清楚，本身安裝的模塊是哪一個倉庫的。

至於資源管理系統的開發，後端使用nodejs、express，mongodb數據庫，前端使用mvvm框架，還用了一個叫semantic的UI框架。基本就是對資源的增刪改查操做，基本也沒什麼難度 。資源包含的字段以下：

其中，類別暫時分爲三類：

• 框架/類庫。已經成熟的框架/類庫，基本不會修改其代碼，如jquery、requirejs

• 第三方組件。UI組件及功能組件，來自於第三方，不像框架那樣穩定且有長期維護，例如：datepicker、彈框插件

• 自研模塊。公司內部本身寫的模塊，通用的業務模塊、功能模塊

關於發佈npm。在系統中上傳源碼的zip文件，先進行解壓，而後使用了nodejs的child_process模塊用來執行npm install命令，代碼片斷以下：

至於cdn的同步，請到了咱們運維同窗的幫忙，我只要把文件上傳至相關目錄便可，後面的操做由他來搞~。

至此，咱們的前端資源倉庫就搭建起來了，服務器上使用pm2來管理，把sinopia和資源管理系統的server.js起來就能夠了。

總結

搭建這個項目其實難度並不大，但因爲是抽空閒時間來搞，前先後後花了兩個月時間。主要是花在系統的設計上。目前仍是beta版，陸續會更新內容，先運行起來讓同事們嚐嚐，估計會有大量的建議和問題，後面再作升級吧。

後語

• 你所在的團隊如今是用什麼管理來管理前端組件的呢？

• 你們下載第三方組件的時候，淘寶npm不可錯過。http://npm.taobao.org/