vue-cli3前端踩坑記以及一種多項(xiàng)目共用局部node_modules的新方法

0.環(huán)境配置與目錄結(jié)構(gòu)

系統(tǒng)：windows
項(xiàng)目結(jié)構(gòu)：
hello-world #管理員web端
| .eslintignore
| .eslintrc.js
| .gitignore
| babel.config.js
| package.json
| README.html
| README.md
| README.md.bak
| vue.config.js
| yarn.lock
|
+---node-elm #node.js后臺(tái)
| | package.json
|
+---public
|
+---node_modules
|
+---vue2-elm #用戶web端
| | package.json
|
+---src

1.問題出現(xiàn)

最近我在開發(fā)一個(gè)基于vue的全棧HTML5的項(xiàng)目，也就是無論前后端都采用javascript這種腳本語(yǔ)言寫。這樣的一個(gè)好處就是無需掌握更多的語(yǔ)言就能開發(fā)出一個(gè)像樣的web端應(yīng)用，非常適合個(gè)人獨(dú)立開發(fā)者。但是 這也存在著一種問題那就是JavaScript是一種腳本語(yǔ)言，且是單線程的，如果想要同時(shí)運(yùn)行前端，后端，數(shù)據(jù)庫(kù)，那么就必須分別運(yùn)行三個(gè)項(xiàng)目或者將這幾個(gè)模塊糅合到一個(gè)項(xiàng)目里寫，這樣要么麻煩要么大大增加了項(xiàng)目的耦合度，非常不利于調(diào)試。同時(shí)如果從另一個(gè)開發(fā)環(huán)境中重新從git遠(yuǎn)端分支獲得源碼，再重新安裝依賴并運(yùn)行的話，就必須分別安裝前后端的依賴，尤其是前端分為好幾個(gè)的情況下（比如用戶端和管理員端），這樣也十分讓開發(fā)人員苦惱。因此有必要使用一種方法，使多個(gè)前端和后端乃至數(shù)據(jù)庫(kù)在使用僅僅一句命令的情況下同時(shí)運(yùn)行。

2.解決思路

通過查詢資料發(fā)現(xiàn)，npm在運(yùn)行的時(shí)候可以使用 npm run <script>的方式調(diào)用package.json文件里的script項(xiàng)目所表示的腳本，同時(shí)，開源社區(qū)里有一種名為“”的concurrently模塊可以實(shí)現(xiàn)多個(gè)項(xiàng)目同時(shí)運(yùn)行。這樣，就產(chǎn)生了一種解決方案如下：

{
 "name": "hello-world",
  "version": "0.1.0",
...
 "scripts": {
    "server": "npm run dev --prefix node-elm",
    "frontend": "npm run serve --prefix vue2-elm",
    "dev": "  concurrently   \" mkdir  D:\\mongodb \" \"mongod --dbpath D:/mongodb \" \"npm run server\" \"npm run serve\" \"npm run frontend\" ",
    "serve": "vue-cli-service serve",
    "install-all": "npm install && cd node-elm && npm install",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...
}

這樣就能夠使用一句命令的情況下安裝依賴（npm run install-all）并同時(shí)運(yùn)行（npm run dev）hello-world(管理員web端)、 vue2-elm （用戶web 端）、node-elm（后端）和mongodb（數(shù)據(jù)庫(kù)）。

3.新的問題與解決

我在使用npm安裝的時(shí)候報(bào)出了一個(gè)很嚴(yán)重的錯(cuò)誤，那就是在安裝的時(shí)候會(huì)提示node-gyp rebuild，缺少 visual studio 2008模塊VCBuild.exe報(bào)錯(cuò)了。這個(gè)時(shí)候我也挺納悶的，我明明在開發(fā)javascript的項(xiàng)目，為啥給我提示需要安裝c++模塊了？經(jīng)過調(diào)查發(fā)現(xiàn)是在安裝一個(gè)名為node-jieba的模塊的時(shí)候出錯(cuò)的。網(wǎng)上查了一下node-jieba是一個(gè)node端的中文分詞工具（就是幫你把一個(gè)句子分成幾個(gè)詞，來幫你語(yǔ)義分析）。我更納悶了，我這個(gè)項(xiàng)目只是一個(gè)簡(jiǎn)單的訂單項(xiàng)目，又沒用到人工只能，憑什么給我安裝這個(gè)模塊呢？我使用了npm ls的指令檢查了一下依賴模塊的情況，發(fā)現(xiàn)這個(gè)包是@vue/cli-plugin-babel里的一個(gè)可選依賴（optional dependency）。明確了問題之后，我在package.json里面加了一個(gè)選項(xiàng)："no-optional": "true"。

{
  "name": "hello-world",
  "version": "0.1.0",
  "no-optional": "true"
...
}

這樣就解決了一個(gè)問題。

4.新的問題2與解決

整個(gè)過程安裝下來，雖然比較順利，但安裝過程異常的慢。在排除了網(wǎng)絡(luò)問題之后，我看了看這幾個(gè)項(xiàng)目所需依賴的大小，我驚訝的發(fā)現(xiàn)，這幾個(gè)項(xiàng)目雖然功能不多，但安裝的依賴已經(jīng)達(dá)到了驚人的700MB，很明顯存在冗余情況！仔細(xì)檢查了一下發(fā)現(xiàn)hello-world項(xiàng)目的依賴有300MB，而vue2-elm的依賴有400MB。而這兩個(gè)項(xiàng)目都是前端項(xiàng)目，且用的是同一個(gè)框架。其中有不少如vue-cli這種公用模塊。在這種情況下可以使用全局安裝解決問題，但很明顯僅僅為了兩個(gè)小項(xiàng)目而安裝到全局路徑顯得十分浪費(fèi)系統(tǒng)資源。想到之前l(fā)inux解決冗余的方法是使用軟鏈接。那么windows可不可以呢?網(wǎng)上查了一下還真有，于是我的package.json就變這樣了：

{
"name": "hello-world",
  "version": "0.1.0",
  "no-optional": "true",
  "private": true,
  "scripts": {
    "server": "npm run dev --prefix node-elm",
    "frontend": "npm run serve --prefix vue2-elm",
    "dev": "  concurrently \" mklink /D vue2-elm\\node_modules ..\\node_modules \"   \" mkdir  D:\\mongodb \" \"mongod --dbpath D:/mongodb \" \"npm run server\" \"npm run serve\" \"npm run frontend\" ",
    "serve": "vue-cli-service serve",
    "install-all": "npm install && cd node-elm && npm install",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }，
...
}

仔細(xì)觀察會(huì)發(fā)現(xiàn)，我的dev script里面加了一個(gè)軟鏈接，“mklink /D vue2-elm\node_modules",這樣，vue2-elm項(xiàng)目想要找node_modules的時(shí)候，就會(huì)去hello-world里面找node_modules。要注意的是，winddows的命令最好放在 concurrently里以一種多線程的方式啟動(dòng)，這樣即使其中一條命令出錯(cuò)也沒關(guān)系，另外要注意的一點(diǎn)是json里是不允許\這樣的轉(zhuǎn)義字符單獨(dú)出現(xiàn)的，如果硬要出現(xiàn)，那么就再來一個(gè)他自己成為這樣"\"。

4.新的問題3與解決

使用npm安裝實(shí)在太慢了，干脆使用yarn吧。yarn是類似npm的一種新型js包管理器，前者是開源社區(qū)維護(hù)的，而后者則是好幾個(gè)大的科技公司如google維護(hù)的，哪個(gè)好自然不用多說。
package.json最終成了這個(gè)樣子:

{
"name": "hello-world",
  "version": "0.1.0",
  "no-optional": "true",
  "private": true,
  "scripts": {
    "server": "npm run dev --prefix node-elm",
    "frontend": "npm run serve --prefix vue2-elm",
    "dev": "  concurrently \" mklink /D vue2-elm\\node_modules ..\\node_modules \"   \" mkdir  D:\\mongodb \" \"mongod --dbpath D:/mongodb \" \"npm run server\" \"npm run serve\" \"npm run frontend\" ",
    "serve": "vue-cli-service serve",
    "install-all": "yarn install && cd node-elm && yarn install",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...
}