1. 基本概念
主要介紹vue.js乔遮、nodejs、NPM许布、verdaccio的基本概念和用途诲祸。
1.1. vue.js
vue.js 是最火的前端構(gòu)建 Web 界面的 JavaScript 框架，也是一個(gè)通過(guò)簡(jiǎn)潔的 API 提供高效數(shù)據(jù)綁定和靈活組件的系統(tǒng)掀序。
在vue.js中帆焕，一個(gè)核心的概念，就是讓用戶不再操作html的dom元素不恭，解放了用戶的雙手叶雹，讓程序員可以更多的時(shí)間去關(guān)注業(yè)務(wù)邏輯。
一句話解釋：vue是提高前端界面開發(fā)效率而集成了大量功能的js框架换吧。
1.2. Nodejs
node.js不是一門語(yǔ)言折晦，不是庫(kù)，不是框架沾瓦，只是一個(gè)javascript運(yùn)行時(shí)環(huán)境剩彬。
node.js可以解析和執(zhí)行javascript代碼，以前只有瀏覽器可以解析執(zhí)行javascript代碼或悲，現(xiàn)在的javascript可以完全脫離瀏覽器來(lái)運(yùn)行柱衔，一切都?xì)w功于node.js。
在node這個(gè)javascript執(zhí)行環(huán)境中為javascript提供了一些服務(wù)器基本的操作：比如文件讀寫缕探，網(wǎng)絡(luò)服務(wù)的構(gòu)建魂莫，網(wǎng)絡(luò)通信，http服務(wù)器等處理
nodejs能做什么爹耗？
Web服務(wù)器后臺(tái)
命令行工具[比如可以開發(fā)npm耙考，git，hexo]
對(duì)于前端開發(fā)潭兽，用到node最多的是他的命令行工具
一句話解釋：nodejs在前端項(xiàng)目中的作用倦始，類似于java語(yǔ)言的jdk。它提供了兩個(gè)功能：本地開發(fā)時(shí)的前端服務(wù)器山卦，以及編譯時(shí)的運(yùn)行環(huán)境鞋邑。前端編譯的過(guò)程實(shí)際上是，將vue框架以及各種高級(jí)js語(yǔ)言編譯成瀏覽器能識(shí)別的基礎(chǔ)的js語(yǔ)言怒坯。
1.3. NPM
npm炫狱，Node Package Manager的縮寫，也就是軟件包管理器剔猿。是Nodejs的默認(rèn)包管理器视译。主要進(jìn)行javascript的包管理。通過(guò)npm归敬，我們可以很方便地進(jìn)行javascript包的下載酷含、升級(jí)鄙早，我們也可以把我們開發(fā)的javascript包共享給其他使用者。
目前npm作為Node.js的一個(gè)組件椅亚，在安裝Node.js時(shí)限番，即可自動(dòng)安裝npm。
npm默認(rèn)的源在國(guó)外呀舔，執(zhí)行命令npm install弥虐，實(shí)際上是從國(guó)外的服務(wù)器地址上（https://registry.npmjs.ort/）下載包的過(guò)程，國(guó)內(nèi)使用該鏡像地址媚赖，經(jīng)常出現(xiàn)鏈接不上或者下載速度慢的問(wèn)題霜瘪，所以國(guó)內(nèi)常用的鏡像地址是淘寶鏡像：https://registry.npm.taobao.org/。
NPM能干什么惧磺？
使用npm命令颖对，能直接將一個(gè)第三方依賴包下載到本地。如執(zhí)行命令npm install -g verdaccio磨隘，就能將前端倉(cāng)庫(kù)verdaccio缤底，安裝到本地。Vue開發(fā)過(guò)程中依賴眾多的依賴包番捂，比如框架vue个唧、組件庫(kù)ant-design-vue、圖表組件庫(kù)echarts设预、視頻播放器vue-video-player坑鱼、國(guó)際化插件vue-i18n等大大小小的組件，都需要從npm的鏡像地址上下載到本地絮缅。
一句話解釋：npm在前端項(xiàng)目開發(fā)中作為下載、更新呼股、上傳依賴包的工具使用耕魄。
擴(kuò)展知識(shí)：npm安裝插件的過(guò)程
1.4. 倉(cāng)庫(kù)verdaccio
前端倉(cāng)庫(kù)，不是前端開發(fā)的必備項(xiàng)彭谁。是否需要倉(cāng)庫(kù)吸奴，要根據(jù)項(xiàng)目的前端架構(gòu)設(shè)計(jì)以及項(xiàng)目的復(fù)雜性而選擇。市面上前端倉(cāng)庫(kù)的插件也有好幾款缠局，verdaccio是體量較小则奥、易于上手的倉(cāng)庫(kù)之一。
倉(cāng)庫(kù)的應(yīng)用場(chǎng)景有以下幾種情況：1狭园、內(nèi)部開發(fā)環(huán)境是離線環(huán)境读处，開發(fā)人員無(wú)法連接到淘寶鏡像等npm公有倉(cāng)庫(kù)，此時(shí)需要搭建一個(gè)企業(yè)內(nèi)部的私有倉(cāng)庫(kù)唱矛，解決離線開發(fā)下載依賴包的問(wèn)題罚舱；2井辜、公司產(chǎn)品很大，劃分多個(gè)部門一起開發(fā)管闷，為了保持風(fēng)格統(tǒng)一粥脚，將某些公用模塊抽取出來(lái)，做成一個(gè)依賴包包个，上傳到倉(cāng)庫(kù)上刷允，不同部門的人統(tǒng)一下載、升級(jí)該模塊碧囊。典型的應(yīng)用場(chǎng)景如云平臺(tái)和云服務(wù)之間的關(guān)系树灶。門戶、鑒權(quán)等模塊是統(tǒng)一提供的呕臂，每個(gè)服務(wù)不需要重復(fù)開發(fā)破托，去倉(cāng)庫(kù)下載即可；3歧蒋、產(chǎn)品功能多土砂，業(yè)務(wù)復(fù)雜，要分多個(gè)工程來(lái)開發(fā)谜洽，多個(gè)工程所依賴的公共模塊萝映，可開發(fā)成公共依賴包，發(fā)布到倉(cāng)庫(kù)阐虚，供其他工程使用序臂。我們的產(chǎn)品就屬于這一種。目前我們產(chǎn)品是內(nèi)網(wǎng)開發(fā)实束，沒(méi)有網(wǎng)絡(luò)奥秆，所以verdaccio同時(shí)也滿足場(chǎng)景一的描述。
依賴包查找流程如下圖所示咸灿。
2. 前端工程編譯
2.1. 單工程簡(jiǎn)單編譯
一個(gè)簡(jiǎn)單的vue工程构订，其文件結(jié)構(gòu)如下圖所示：
package.json中提前配置好了該工程所需的依賴包列表，若需要中途安裝一個(gè)第三方包避矢，則該包的名字也會(huì)被自動(dòng)寫入到package.json中悼瘾。也就是說(shuō)，可以提前把依賴包名稱登記在package.json中审胸，也可以在下載包的過(guò)程中亥宿，用命令自動(dòng)寫入到package.json中。（package.json文件不僅僅保存了依賴包列表砂沛，還有該工程的其他信息烫扼，此處簡(jiǎn)化。）
node_modules文件匯集了眾多的依賴包碍庵，該文件一般不提交到代碼庫(kù)中材蛛，編譯時(shí)會(huì)重新下載圆到，每次下載都是增量下載，只下載更新的包卑吭，或者新增加的包芽淡。
2.2. 前端項(xiàng)目完整編譯
我們的項(xiàng)目有大概23個(gè)前端工程，包括1個(gè)基座工程（100_PortalManage）和22個(gè)插件工程豆赏。編譯時(shí)挣菲，1個(gè)基座工程和22個(gè)插件工程，編譯方式不同掷邦。
22個(gè)插件工程先編譯白胀，插件工程的編譯流程如下所示：
基座工程編譯如下所示：
完整的編譯流程為，101到126是插件工程抚岗，編譯插件工程時(shí)會(huì)生成包文件libs或杠，上傳到倉(cāng)庫(kù)verdaccio上；插件編譯完成后宣蔚，會(huì)編譯基座100_portalManamge工程向抢，編譯基座工程前，先會(huì)將所依賴第三方包和剛才上傳的插件包一起下載下來(lái)胚委，再編譯基座工程挟鸠，最終生成可直接運(yùn)行的文件，編譯結(jié)束亩冬。
