vue-cli腳手架源碼解析(四)

最近時間充裕，手寫了下vue-router和雙向綁定，如今藉着上一篇的內容。

vue-cli-service

---

當腳手架幫咱們建立好文件的基本結構後，接下來就是vue-cli-service命令了。

1. vue-cli-service serve // 本地服務 webpack-dev-server
2. vue-cli-service build // 打包構建
3. vue-cli-service lint // 語法檢查

歸根而言就是一個命令，三個參數，很少廢話，正式開始。

這個vue-cli-service.js只是解析下參數。

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
service.run(command, args, rawArgv).catch(err => {})

Service.run

async run (name, args = {}, rawArgv = []) {
    // mode就是production, development,test之類的。
    const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])
    
    this.init(mode)
    
    // name 爲 build, serve, lint
    // fn就是執行對應的命令

    let command = this.commands[name]

    const { fn } = command
    return fn(args, rawArgv)
  }

run裏面調用了 this.init(mode),init裏面會去獲取用戶的配置文件，即vue.config.js，或者package.json裏面的vue字段。具體代碼就不貼了，很簡單。
init裏面一樣會去註冊commands裏的命令,裏面其實繞來繞去，但最後調用的是commands目錄下的各個命令文件。

vue-cli-service serve

---

這章重點講下serve這個命令,但其實就是一個webpack-dev-server的配置，不過腳手架走的是api調用。

直接找到 new WebpackDevServer。 第一個參數compiler，這個是webpack參數，第二個參數webpack-dev-server參數.這個能夠看官方文檔，webpack參數和build命令一塊兒講

webpack-dev-server的配置就很少講了，詳細能夠看文檔。

vue-cli-service inspect

---

這個命令就很少講，只講下當咱們inspect後，可以輸出一份配置文件，也就是vue腳手架所用的webpakc配置文件。

接下來咱們一個字段一個字段來詳解一下這份配置文件。我沒有作任何額外的配置，都是腳手架默認配置。

1. entry 這個就簡單了,入口文件就一個main.js, 本身寫的時候也能夠把墊片庫寫進去，如@babel/pollify
2. mode, context,devtool

   

3. output

   

   

4. resolve

   

5. module，這個配置比較繁瑣，有不少重複配置，如支持.scss,sass,less,css，其實都是差很少，我會選擇性省略

   

   

   靜態資源，如jpg圖片，svg,mp4媒體文件等，字體文件，都的都是url-loader和file-loader。
   url-loader，能夠把小文件轉成base64，減小http請求
   file-loader，解析資源路徑，並拷貝到輸出目錄

   

   css只講scss配置，vue-cli支持css模塊化，因此scss寫了兩種配置。

   普通的scss配置

   

   很簡單配置，能夠理解爲先sass-loader識別解析sass,postcss-loader加前綴，支持新語法，css-loader解析成css，由於是production環境，因此用了min-css-extract-loader，提取成獨立的css文件，若是是開發環境就是style-loader，直接插入到頁面中，方便調試

   css模塊化

   

   配置上就是css-loader有差異，由於上家公司開發react，一直用的是css模塊化，這家公司用的是scope,我的感受css模塊化開發雖然寫法上繁瑣了些，可是打包出來的css是真正作到隔離了，css名字是一個hash值，而scope會致使html有多餘屬性。 css模塊化寫法，會把全部的樣式都當初一個對象的屬性，如 style.title，那麼在模板裏面就要寫成class="style.title"的格式