揭祕 vue-cli 腳手架

前言：記得自己大二（2016年）的時候，經過同學的介紹，偶然間接觸到了 vue 的專案。那時候的自己對於這一項新興的技術掌握程度並不好，一來二去折騰了一個星期，也沒有弄明白裡面的原理（因為當時從來沒有接觸過這種腳手架，通過webpack，nodejs打包的專案，思維依舊停留在Bootstrap，JQuery等，傳統開發的時代，怎麼也轉不過來），當時就暗暗發誓，將來一定要把 vue 的腳手架弄的明明白白！
現在自己工作了，在工作中自己不斷專研，自我感覺良好，就開始試試再次解讀一下 vue-cli 腳手架的基礎構建程式碼！

這篇部落格可能很長，也許會連載，就有點耐心，沉住氣記得看完，哈哈。另外這篇文章也不是一個入門文章，需要有點 Node.js，webpack，ES6 的基礎，並且用 vue-cli 做過專案（哪怕是demo），否則可能很多東西會看的一臉懵逼，特別是有關於 webpack 的配置，好運！

廢話少說，先做點前期準備開始吧：

1. 安裝 Node.js，這裡給一個Node.js的官網：https://nodejs.org/en/
   不會的就自己去百度怎麼安裝啦！
2. （非必選）如果想日後方便使用，安裝依賴包快一點，切一下淘寶 npm 的映象，不會的百度：切換淘寶npm映象 ，就會出來一大堆，自己看！
3. 安裝webpack，執行：npm install webpack -g，這裡有全域性安裝和區域性安裝（區別在後面的 -g 引數），建議選全域性的；
4. 然後通過 vue-cli 的腳手架一步一步的搭建一個vue的專案，直到能跑起來為止。如果你還不會，這裡給一個關於搭建vue專案的教程，我就是從這裡開始的，傳送門：
   搭建vue專案

完成以上幾步，就能拿到一個差不多這樣的專案目錄結構，我們正餐正式開始！
（還是那句話，要是看到這就開始懵逼的，你可能要先去補補課，以後再來看，哈哈）

第一步：npm run dev

應該大家剛開始的時候也和我一樣，根據教程，一步一步走到這裡，在命令列工具裡面，把這一句命令回車，神奇的時刻就來臨了，等一會訪問：localhost:8080 就會出現自己網頁。這一切彷彿對我們就像是一個黑箱，我們對他背後到底做了什麼操作一無所知，心中不免有這樣的疑問，它到底在背後做了什麼？

讓我麼來看看

首先，腳手架會到專案的根目錄下尋找一個叫：package.json 的檔案。

這裡要先打一斷一下，先明白一些概念。檔案裡面會有很多東西，主要分為幾個部分（很多都是關於Webpack配置的，不懂的就需要先去把

1. 基礎資訊：name, version, description, author, private 這些都是專案的基礎資訊，分別對應 vue init webpack XXXX 所填寫的資訊。這些資訊瞭解一下就好，分別代表著，專案名稱、版本定義、專案描述、作者和是否四私有專案（一般都是）。

2. 指令碼部分：scripts，這個就比較重要了。作用主要就是把 webpack 的原生命令代理一下（因為需要配置很多引數，可能會很長，不便於閱讀），就像封裝函式一樣，變得簡潔一點，提高可讀性，也便於 人 的思維去理解。
   腳手架裡面配置的scripts是一個物件，下面就來說說裡面的內容：
   （1）"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
   這一句平時應該是用的最多的，因為他是專案的入口。平時你在命令列工具裡面輸入：npm run dev 其實後臺執行的就是就這一句話。當你回車命令後，首先腳手架會到專案的根目錄尋找 package.json 裡面的scripts的dev，然後執行後面的程式碼。要是不相信的同學可以自己去驗證一下，把dev刪除或者給他改一個值，專案估計就不能正常跑起來了。
   （2）"start": "npm run dev" 這一句程式碼其實就執行了上面那句，把上面那句程式碼再次封裝一次。只不過 npm run dev 是npm 包管理工具的命令，yarn start 是yarn 包管理工具的命令。殊途同歸，程式碼不同，實現的功能是一樣的，至於你喜歡用哪個都可以，自己開心就好。要是不懂的，自己去百度一下他們的區別哦！（個人感覺到後期的版本兩個工具，功能已經非常完善了，也越來越像了，區別不大！）
   （3）"lint": "eslint --ext .js,.vue src" 這個程式碼個人感覺用的不多，至少我沒有執行過。百度了一下，主要就是執行這個 npm run lint 來檢查程式碼是否符合 ESlint 的程式碼風格規範的。如果在專案構建的時候就安裝語法檢查，編寫程式碼的時候就會實時檢查，應該問題也不大。感興趣的同學可以去研究一下哈！
   （4）"build": "node build/build.js" 打包生產的命令。當我們的專案除錯通過了，到了生產部署的階段了，就可以執行 npm run build 來構建生產部署的包。

   這裡說明一下，現在還不知道這些命令後面做的事和帶的引數，沒關係，先記著，接下來會一一介紹。

3. 專案依賴：dependencies 這裡面主要儲存很多在 npm run build 時候構建專案的包。這些包的程式碼會被打包新增到實際的應用程式碼之中（與之區別的是在開發時的輔助編譯作用）。
   這裡面，可能有人會看過依賴的幾種寫法：
   （1）"vue": "2.5.2", 表示固定版本，只依賴2.5.2版，之後有新版也不會更新
   （2）"vue": "~2.5.2", 表示只安裝 2.5.X 系列版本的最新版，而 2.6.X 的或其他的不會更新
   （3）"vue": "^2.5.2", 表示安裝當前庫的最新版，這個是腳手架預設的！
   是不是看著很懵逼，平時注意一下就好。

4. 開發依賴：devDependencies 這個與上面的專案依賴對應，裡面內容的形式也是差不多的，唯一的區別是：開發依賴裡面的東西不會新增到生產環境中，只是在開發階段輔助編譯開發等功能。比如：autoprefixer，babel-core 等，他只是在編譯的時候給CSS樣式新增一些瀏覽器相容的字首，和把ES6 轉譯成ES5。當打包結束時就會被拋棄，並不會新增到打包的結果中。

5. 其他：engines、browserslist 最後的不是很重要，但是建議不要修改，除非你知道你在做什麼。
   engines 主要是規定開發時候的環境的node.js 和 npm 的版本不能太低；
   browserslist 一個閾值。表示是否要去相容某些瀏覽器，如果小於閾值的部分在ES6的轉譯時可能將會忽略。（這裡我解釋的可能不是很清楚）

   根據提供的目標瀏覽器的環境來，智慧新增css字首，js的polyfill墊片,來相容舊版本瀏覽器，而不是一股腦的新增。避免不必要的相容程式碼，以提高程式碼的編譯質量。> 根據提供的目標瀏覽器的環境來，智慧新增css字首，js的polyfill墊片,來相容舊版本瀏覽器，而不是一股腦的新增。避免不必要的相容程式碼，以提高程式碼的編譯質量。

然後 終於來到了解析命令階段，這裡被中間的一大段內容打斷，和上面的那個首先對應，別睡著了，