Vue CLI 產(chǎn)生的背景

在Vue CLI出現(xiàn)之前,，你可能要花費(fèi)好幾天的時(shí)間搭建項(xiàng)目的開(kāi)發(fā)環(huán)境，如果你事先不了解webpack,，你可能會(huì)又花費(fèi)大把的時(shí)間熟悉webpack,。就這樣，一周過(guò)去了,，你的項(xiàng)目還沒(méi)有真正啟動(dòng)起來(lái),。 為了讓開(kāi)發(fā)者從糾結(jié)配置中解放出來(lái)，專注于撰寫(xiě)應(yīng)用程序,。Vue CLI也就因此而產(chǎn)生,。它不僅確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，還提供了配置調(diào)整的靈活性,。

Vue CLI歷史

Vue CLI到目前為止經(jīng)歷了兩個(gè)大版本,，CLI 2 和 CLI 3。很多人可能會(huì)好奇從 CLI 2升級(jí)到CLI 3會(huì)有哪些新的改變,，接下來(lái)就一邊回顧CLI 2,，一邊為大家解讀CLI 3的新特性。

創(chuàng)建一個(gè)項(xiàng)目

CLI 2和CLI 3第一個(gè)區(qū)別是npm包的包名，CLI 3并沒(méi)有沿用CLI 2的vue-cli,，而是另起為@vue/cli,。創(chuàng)建項(xiàng)目方面也發(fā)生了變化，CLI 2 可以選擇根據(jù)模板初始化項(xiàng)目,，而CLI 3并未重新開(kāi)發(fā)模板,，如果開(kāi)發(fā)者想要像CLI 2一樣使用模板初始化項(xiàng)目，可全局安裝一個(gè)橋接工具@vue/cli-init,。

1,、CLI 2 全局安裝并創(chuàng)建項(xiàng)目

npm install -g vue-cli

# 或者

npm install -g [email protected] // 指定安裝某一版本

vue init <template-name> <project-name>

# 例如：vue init webpack vue-test

注意：這里的CLI 2是2.9.6。

<template-name>：表示模板名稱,，可以通過(guò)vue list查看可用的模板,，在這里官方提供了6種模板，分別為：

• browserify——一個(gè)全面的Browserify vueify 的模板,，運(yùn)行起來(lái)帶有熱重載,，保存時(shí) lint 校驗(yàn)，單元測(cè)試,。

• browserify-simple——一個(gè)簡(jiǎn)單Browserify vueify的模板,，不包含其他功能，讓你快速的搭建vue的開(kāi)發(fā)環(huán)境,。

• pwa——一個(gè)基于webpack模板的漸進(jìn)式的網(wǎng)頁(yè)應(yīng)用程序模板,。

• simple——一個(gè)最簡(jiǎn)單的單頁(yè)應(yīng)用模板。

• webpack——一個(gè)全面的webpack vue-loader的模板,，運(yùn)行起來(lái)帶有熱重載,，保存時(shí) lint 校驗(yàn)和CSS擴(kuò)展。

• webpack-simple——一個(gè)簡(jiǎn)單webpack vue-loader的模板,，能讓你快速搭建一個(gè)vue的開(kāi)發(fā)環(huán)境,。

圖1 官方提供的6種模板

初始化過(guò)程中會(huì)確認(rèn)項(xiàng)目的項(xiàng)目名、作者等信息,，大家可根據(jù)需求自行修改,。

2、CLI 3全局安裝并創(chuàng)建一個(gè)項(xiàng)目

npm install -g @vue/cli
# 或者
yarn global add @vue/cli
# 創(chuàng)建項(xiàng)目
vue create <project-name>
# 例如：vue create vue-3.0-demo
# 或
# 使用init 初始化項(xiàng)目
npm install -g @vue/cli-init
# `vue init` 的運(yùn)行效果將會(huì)跟 `[email protected]` 相同
vue init webpack vue-3.0-demo

當(dāng)我們用CLI 3的方式創(chuàng)建項(xiàng)目,，輸入vue create vue-3.0-demo命令后,，你會(huì)發(fā)現(xiàn)在創(chuàng)建項(xiàng)目的路上總是有位“記者大哥”橫路攔截，問(wèn)你這問(wèn)你那,，你還必須做出選擇,。

故事就從你輸入vue create vue-3.0-demo后悄悄開(kāi)始了...

記者大哥：“歡迎進(jìn)入CLI 3的世界,，首先你得選取一個(gè) preset,。選擇默認(rèn)的設(shè)置可以快速創(chuàng)建一個(gè)新項(xiàng)目的原型，而手動(dòng)設(shè)置則提供了更多的選擇。你是選擇默認(rèn)配置,，還是手動(dòng)選擇特性呢,？”

你：（心里活動(dòng)：“來(lái)都來(lái)了，為何不看看記者大哥到底搞什么鬼”）“我選擇了手動(dòng)選擇屬性”

圖2 手動(dòng)選取特性

你：什么鬼,？還給我來(lái)個(gè)多選題,！首先Babel是必要的，不然拿什么來(lái)轉(zhuǎn)換ES6語(yǔ)法,，TypeScript,？不會(huì)，略過(guò),。漸進(jìn)式的程序應(yīng)用,，暫時(shí)也不涉及這個(gè)。Router勾上,，作為一個(gè)移動(dòng)M站,，得有人來(lái)管理路由呀。Vuex一個(gè)狀態(tài)管理器,，后期要用再加上吧,，反正也跑不了。css 預(yù)處理器,，習(xí)慣使用Less,，也加一。Linter / Formatter也加一,，作為一個(gè)團(tuán)隊(duì),，沒(méi)有人統(tǒng)一代碼風(fēng)格可不行。最后兩個(gè)分別是單元測(cè)試和端對(duì)端測(cè)試,，這里我就不加上了,，沒(méi)用過(guò)，期待今后有大神分享,。

選擇完特性后,，你以為就結(jié)束了，沒(méi)想到,，一步選錯(cuò)步步要你選,。

對(duì)于css預(yù)處理器方面，你毅然決然選擇了Less,； 但linter / formatter 配置,，你懵逼了。這都是什么,？,？記者大哥介紹了一下：

ESLint 是一個(gè)語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具，可以檢測(cè)出你代碼中潛在的問(wèn)題，可以保證寫(xiě)出語(yǔ)法正確和風(fēng)格統(tǒng)一的代碼,。

圖3 選擇linter配置

• ESLint with error prevention only——只檢測(cè)錯(cuò)誤,。

• ESLint Airbnb config——獨(dú)角獸公司的Airbnb，有人評(píng)價(jià)說(shuō)“這是一份最合理的JavaScript編碼規(guī)范”,，它幾乎涵蓋了JavaScript的各個(gè)方面,。

• ESLint Standard config——standardJs一份強(qiáng)大的JavaScript編碼規(guī)范，自帶linter和自動(dòng)代碼糾正,。沒(méi)有配置,。自動(dòng)格式化代碼?？梢栽诰幋a早期發(fā)現(xiàn)規(guī)范問(wèn)題和低級(jí)錯(cuò)誤,。

• ESLint Prettier—— Prettier 作為代碼格式化工具，能夠統(tǒng)一整個(gè)團(tuán)隊(duì)的代碼風(fēng)格,。

等他介紹完,，你心里大概有點(diǎn)譜了，這里你選擇了 ESLint Standard config,。

lint有兩種檢查時(shí)機(jī),，一是用戶保存文件的時(shí)候，二是用戶提交文件到git的時(shí)候,。你就選了Lint on save,，有錯(cuò)及時(shí)解決嘛。

終于“記者大哥”告訴你接下來(lái)這個(gè)問(wèn)題是最后一個(gè)問(wèn)題咯,。

記者大哥：你是喜歡把Babel,、ESLint等配置信息全放在package.json文件里呢，還是單獨(dú)文件管理,？

你：一個(gè)一個(gè)文件比較好,，根據(jù)文件名就知道這是誰(shuí)的配置，方便維護(hù),。

記者大哥：那你是否想把今天你手動(dòng)選擇的preset保存為未來(lái)項(xiàng)目的preset呢,？

你：

說(shuō)好的最后一個(gè)呢！,！

......保存,！

happy end~~

溫馨提示：如果你是用window，在進(jìn)行創(chuàng)建項(xiàng)目的時(shí)候,，最好使用cmd,，在cmd里你可以通過(guò)箭頭上下選擇和空格選中。如果你用git bash 可能會(huì)出現(xiàn)箭頭和空格都沒(méi)有請(qǐng)選擇和選中作用,。

這里通過(guò)一個(gè)漫長(zhǎng)的對(duì)話我們自定義的一個(gè)preset,，此時(shí)如果你需要?jiǎng)?chuàng)建新工程,，這時(shí)候你就會(huì)發(fā)現(xiàn)多了一個(gè)preset，就是最初你自己設(shè)置的,。你可以選擇自己之前保存preset的,，也可以再次開(kāi)啟“采訪模式”,。

圖4 新添的preset

CLI 2 的項(xiàng)目結(jié)構(gòu)

圖5 vue cli 2.9.6項(xiàng)目結(jié)構(gòu)

對(duì)于CLI 2這個(gè)項(xiàng)目結(jié)構(gòu),，主要的也是最重要的在于bulid和config者兩個(gè)目錄。bulid是項(xiàng)目構(gòu)建的相關(guān)代碼,，config是項(xiàng)目開(kāi)發(fā)環(huán)境配置,。

接下來(lái)就先從webpack.base.conf.js開(kāi)始依次介紹build和config兩個(gè)目錄下的相關(guān)功能。

webpack.base.conf.js

webpack.base.conf.js是webpack的基礎(chǔ)配置,，是dev和prod的公共配置文件,。

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

• path——該模塊提供了一些用于處理文件路徑的小工具

• utils——給整個(gè)CLI提供方法

• config——開(kāi)發(fā)環(huán)境的配置

• vueLoaderConfig——分析是否是生產(chǎn)環(huán)境，然后將根據(jù)不同的環(huán)境來(lái)加載配置功能

在這個(gè)文件里一共實(shí)現(xiàn)了兩個(gè)方法,。一是合并path路徑的,，另一個(gè)是創(chuàng)建Eslint的Rules。而剩余部分就是webpack的基礎(chǔ)配置,，這里簡(jiǎn)化了webpack結(jié)構(gòu),，簡(jiǎn)化的結(jié)果其實(shí)就是webpack的一個(gè)骨架，如果在配置上遇到問(wèn)題,，可去webpack查證,。

...
module.exports = {
  entry: {}, // 編譯入口文件
  output: {}, // 編譯輸出路徑
  resolve: {}, // 一些解決方案配置
  module: {
    // 不同類型文件加載器配置
    rules: []
  },
  ...
  // 這些選項(xiàng)用于配置polyfill或mock某些node.js全局變量和模塊。
  // 這可以使最初為nodejs編寫(xiě)的代碼可以在瀏覽器端運(yùn)行
  node: {...}
}

關(guān)于path有興趣的可前往node學(xué)習(xí),，接下來(lái)重點(diǎn)介紹下utils.js,，config和vue-loader.conf。

utils.js

utils.js文件中總共實(shí)現(xiàn)了4個(gè)方法：assetsPath,、cssLoaders,、styleLoaders、createNotifierCallback,。

• assetsPath——返回不同環(huán)境下的static目錄位置

• cssLoaders——為不同的css預(yù)處理器提供一個(gè)統(tǒng)一的生成方式

• styleLoaders——為那些獨(dú)立的style文件創(chuàng)建加載器配置

• createNotifierCallback——以類似瀏覽器的通知的形式展示信息

config

config關(guān)鍵文件是index.js,。這個(gè)文件是開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的基本配置。在這個(gè)文件里開(kāi)發(fā)者可在dev設(shè)置開(kāi)發(fā)環(huán)境的靜態(tài)路徑,、本地服務(wù)器配置項(xiàng),、Eslint、SourceMaps和代理,，也可在build設(shè)置生產(chǎn)環(huán)境是否開(kāi)啟gzip壓縮,，以及壓縮后綴名的設(shè)置等。

...

module.exports = {

  dev: {...},

  build: {...}

}

vue-loader.conf

這個(gè)文件的內(nèi)容相對(duì)比較少,。首先,，vue文件中的css loader將在生產(chǎn)環(huán)境下把css文件抽取到一個(gè)獨(dú)立的文件中,；其次是根據(jù)不同的環(huán)境，引入不同的source map配置文件,；最后設(shè)置是否開(kāi)啟緩存破壞,。

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

關(guān)于webpack公共配置講完了，接下來(lái)我們就一起學(xué)習(xí)下在dev和prod環(huán)境各自的配置吧,。

webpack.dev.conf.js

這個(gè)文件引入了webpack-merge,，意在將公共配置文件和dev配置合并。從代碼里我們可以發(fā)現(xiàn),，dev環(huán)境又新增了一些配置項(xiàng),。

• 給獨(dú)立的style文件添加了sourceMap功能，有了它,，出錯(cuò)的時(shí)候,，除錯(cuò)工具將直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼,。

• 引入devtool,。

• 配置devServer，包括熱部署,、代理,、啟動(dòng)程序的時(shí)候自動(dòng)在瀏覽器打開(kāi)主頁(yè)面等。

• 新增一些插件,，包括熱替換,、webpack.NamedModulesPlugin在熱加載時(shí)直接返回更新文件名、html-webpack-plugin生成html文件等,。

最后一個(gè)函數(shù)是為了確保啟動(dòng)程序時(shí),，如果端口被占用時(shí)，會(huì)通過(guò)portfinder來(lái)發(fā)布新的端口,。

...

const devWebpackConfig = merge(baseWebpackConfig, {

  module: { ... },

  devtool: config.dev.devtool,

  devServer: { ... },

  plugins: [ ... ]

})

module.exports = new Promise((resolve, reject) => { ... })

webpack.prod.conf.js

相比 webpack.dev.conf.js,，這個(gè)文件多引入了幾個(gè)依賴，主要是為了壓縮CSS和JS,。在文件配置上多了一個(gè)output,，將js文件打包成多個(gè)chuck，用hash值命名,，來(lái)解決緩存策略,。

到這里CLI 2的整個(gè)配置也就接近尾聲了。剩下的還有check-version.js和bulid.js兩個(gè)文件,。

check-version.js

這個(gè)文件主要是用來(lái)檢測(cè)當(dāng)前環(huán)境中的node和npm版本和我們需要的是否一致的,。

bulid.js

這個(gè)文件剛開(kāi)始通過(guò)check-versions判斷當(dāng)前的node和npm版本號(hào)，如果現(xiàn)有的npm或者node的版本比定義的版本低,，則生成一段警告,。接下來(lái),，先刪除打包目標(biāo)目錄下的文件，再進(jìn)行打包,，直至打包完成,。

我們走馬觀花的學(xué)習(xí)了CLI 2的配置，估計(jì)大家也都累了,。那接下來(lái)就來(lái)一段采訪吧~~期待不,，哈哈。

CLI 3的項(xiàng)目結(jié)構(gòu)

圖6 CLI 3項(xiàng)目結(jié)構(gòu)

從CLI 3的整個(gè)項(xiàng)目結(jié)構(gòu)我們可以發(fā)現(xiàn),，這個(gè)結(jié)構(gòu)很簡(jiǎn)單,，沒(méi)有相關(guān)的配置文件或復(fù)雜的目錄結(jié)構(gòu),。CLI 3僅生成構(gòu)建應(yīng)用程序所需的文件,，讓使用者不用關(guān)心這些工具的具體配置，從而降低了工具的使用難度,。

其實(shí)通過(guò)閱讀CLI 3的官方文檔,，你可能已經(jīng)知道，官方內(nèi)置了一個(gè)CLI服務(wù)（@vue/cli-service）,，作為一個(gè)開(kāi)發(fā)環(huán)境的依賴,，局部安裝在@vue/cli創(chuàng)建的項(xiàng)目中。如果你真想修改webpack的相關(guān)配置,，可在項(xiàng)目的根目錄下（和package.json同級(jí)）創(chuàng)建一個(gè)vue.config.js配置文件,，這個(gè)文件一旦存在就會(huì)被@vue/cli-service自動(dòng)加載。也可直接使用package.json中的vue字段,。

一個(gè)沒(méi)有好奇心的程序猿,，不是一個(gè)更好的程序猿。

如果你已經(jīng)滿足于官方的介紹,，那也就到此結(jié)束漫長(zhǎng)的閱讀之旅啦（偷偷告訴你后面還有新特性的精彩內(nèi)容）,。如果你也像我一樣，充滿了好奇心,，就跟我再去探索一番,。

從CLI 2到CLI 3，初期可能沒(méi)有官方文檔,。如果你真想探個(gè)究竟,，可以從啟動(dòng)項(xiàng)目入手。

CLI 2啟動(dòng)方式是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js這里用webpack-dev-server搭一個(gè)服務(wù),。

• --inline：?jiǎn)?dòng)inline模式來(lái)自動(dòng)刷新頁(yè)面

• --progress：顯示打包的進(jìn)度

• --config build/webpack.dev.conf.js：指定要用的是哪個(gè)配置文件

CLI 3啟動(dòng)方式是vue-cli-service serve

vue-cli-service就是CLI服務(wù),，你可全局搜索一下，位于node_modules\@vue\cli-service\bin

vue-cli-service.js

#!/usr/bin/env node

const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

...
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv)
const command = args._[0]

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

這個(gè)文件首先是判斷了當(dāng)前node的版本和vue-cli-service要求的版本是否一致,，如果版本太低就得升級(jí)node版本,。

緊接著就起了個(gè)服務(wù),，這個(gè)服務(wù)是位于lib/Service。

Service.js

...

loadUserOptions () {

    // vue.config.js

    let fileConfig, pkgConfig, resolved, resovledFrom

    const configPath = (

      process.env.VUE_CLI_SERVICE_CONFIG_PATH ||

      path.resolve(this.context, 'vue.config.js')

    )

    ...

    // package.vue

    pkgConfig = this.pkg.vue

    ...

    if (fileConfig) {

      if (pkgConfig) {

        ...

      }

      resolved = fileConfig

      resovledFrom = 'vue.config.js'

    } else if (pkgConfig) {

      resolved = pkgConfig

      resovledFrom = ''vue' field in package.json'

    } else {

      resolved = this.inlineOptions || {}

      resovledFrom = 'inline options'

    }

    ...

    return resolved

  }

}

...

在loadUserOptions這個(gè)函數(shù)中,，你可以看到官方提到的vue.config.js,。 這個(gè)函數(shù)主要是加載用戶的配置。如果vue.config.js和package.json的vue字段同時(shí)存在,，會(huì)忽略package.json的vue字段配置,，而選取vue.config.js的配置。

這里粗略介紹了何處加載了  vue.confg.js  文件,，有興趣可以繼續(xù)深究,。經(jīng)過(guò)安裝CLI、創(chuàng)建項(xiàng)目到整個(gè)項(xiàng)目結(jié)構(gòu)介紹,，我們可以大致了解了兩者的區(qū)別,。接下來(lái)大家一起圍觀一下CLI 3給我們帶來(lái)的哪些新特性吧~~~

新特新

CLI插件的出現(xiàn)

據(jù)我所知，在CLI 3之前是沒(méi)有CLI插件這個(gè)概念的,，人們?cè)陂_(kāi)發(fā)Vue項(xiàng)目時(shí),，若是需要實(shí)現(xiàn)功能都是引用npm的相關(guān)包。CLI 3的出現(xiàn),，帶來(lái)了CLI插件這個(gè)概念,，也帶來(lái)了統(tǒng)一的命名方式：@vue/cli-plugin-（內(nèi)建插件）/ vue-cli-plugin-（社區(qū)插件）開(kāi)頭。

圖7 CLI 3出現(xiàn)前包名

圖8 CLI插件

即刻創(chuàng)建原型

有時(shí)候你想快速創(chuàng)建一個(gè)原型,，不需要添加一大堆樣板,。Vue CLI就提供了一個(gè)運(yùn)行原型的開(kāi)發(fā)服務(wù)器。

要想使用這個(gè)開(kāi)發(fā)服務(wù)器,，前提是安裝@vue/cli-service-global

npm install -g @vue/cli-service-global

你可以用IDE創(chuàng)建.vue文件,，并添加vue代碼。如果你對(duì)命令行掌握良好,，也能輕松創(chuàng)建,。

echo 'hello world' > src/views/HelloWorld.vue

然后將HelloWorld.vue 修改為標(biāo)準(zhǔn)的vue文件結(jié)構(gòu)就行。

<template>
  <div>hello world!</div>
</template>

緊接著你就可以運(yùn)行vue serve src/views/HelloWorld.vue 就能看效果啦~

圖9 快速原型開(kāi)發(fā)

配置時(shí)無(wú)需Eject

如果你曾經(jīng)是一位React的忠實(shí)用戶,，或許使用過(guò)create-react-app（react的腳手架）,，那你對(duì)eject的理解可能就很深刻了?？上∨徊?，早期與React只有一面之緣，也就沒(méi)此機(jī)會(huì)接觸create-react-app,。為了理解eject到底是何物,，我查看了react的相關(guān)文檔，終于明白了,。 在react中,，使用CRA（ create-react-app簡(jiǎn)稱）創(chuàng)建完項(xiàng)目,，我們可以在package.json看到這里一個(gè)script命令。

'scripts': {

  'eject': 'react-scripts eject'

}

執(zhí)行完npm run eject會(huì)將封裝在CRA里的配置全部反編譯到當(dāng)前項(xiàng)目,，換句話就是把之前好不容易藏好了config文件暴露出來(lái)了,，用戶也就獲取到了控制權(quán)，想怎么改隨你,。這樣react-scripts就以文件的形式存在于項(xiàng)目中,，就無(wú)法升級(jí)啦。

# eject 后項(xiàng)目根目錄下會(huì)出現(xiàn) config 文件夾,，里面就包含了 webpack 配置
config
├── env.js
├── jest
│ ├── cssTransform.js
│ └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js // 開(kāi)發(fā)環(huán)境配置
├── webpack.config.prod.js // 生產(chǎn)環(huán)境配置
└── webpackDevServer.config.js

好在CLI 3并沒(méi)有像CRA一樣,，開(kāi)發(fā)者你要是想自己修改配置，也是可以的,，我不需要你eject,，你想改就去vue.config.js里改吧。

如果你想看看默認(rèn)的webpack配置,，可執(zhí)行vue inspect查看,，默認(rèn)情況下,，會(huì)將配置輸出到控制臺(tái),，你也可以將結(jié)果指向一個(gè)文件，例如：vue inspect > webpack.config.js,。

新特性到此就介紹完畢了,。

參考資料

• https://cli./zh/guide/

• https:///package/vue-cli

• http://zhaozhiming./blog/2018/01/08/create-react-app-override-webpack-config/

• https://segmentfault.com/a/1190000012581869#articleHeader5

• http://www./archives/8405

關(guān)于奇舞周刊

《奇舞周刊》是360公司專業(yè)前端團(tuán)隊(duì)「奇舞團(tuán)」運(yùn)營(yíng)的前端技術(shù)社區(qū)。關(guān)注公眾號(hào)后,，直接發(fā)送鏈接到后臺(tái)即可給我們投稿,。