vue-cli解析

時間 2019-11-07

標籤 vue cli 解析简体版

原文原文鏈接

前言

這段時間，算是空出手來寫幾篇文章了。因爲好久都沒有時間整理如今所用的東西了，因此，接下來會慢慢整理出一些文檔來記錄前段時間的工做和生活。

這篇文章的主題是vue-cli的理解。或許，不少人在開發vue的時候，咱們會發現一個問題——只會去用，而不明白它的裏面的東西。如今的框架能夠說是足夠的優秀，讓開發者不用爲搭建開發環境而煩惱。可是有時候，咱們仍是得回到原始生活體驗一下，纔可以讓本身更上層樓，但願你們共勉。若是你喜歡個人文章，歡迎評論，歡迎Star~。歡迎關注個人github博客javascript

正文

首先，咱們來講一下安裝的東西吧！處於有頭有尾的目的，仍是幾句話草草了事。步驟以下：css

安裝vue-cli
npm install vue-cli -ghtml
以webpack模版安裝目錄
vue init webapck webpack-templatevue

這樣以後，咱們就可使用IDE打開目錄了。java

此處註明個人vue-cli的版本2.9.2，以避免以後改版以後，誤導讀者。

以後，附上本身的目錄截圖，並無作改動，如圖：node

首先，第一個問題，從何看起呢？固然，是從webpack.base.conf.js開始看起了。這個是dev和prod環境都會去加載的東西。而後，咱們能夠先從webpack.base.conf.js中會被用到的幾個文件看起。其實，base中被用到了以下的文件，咱們能夠從代碼中看出：webpack

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

分別是：git

path 【路徑模塊】
build目錄中的utils.js文件
config目錄中的index文件
build目錄中的vue-loader.conf.js文件

path路徑github

這個模塊能夠看nodejs官網的介紹，其實，就是一個文件路徑的獲取和設置等模塊，學習node的時候，咱們每每會看到這個模塊被大量運用。web

path模塊提供了用於處理文件和目錄路徑的使用工具

utils.js

咱們能夠到其中去看一下代碼，其實光從名字上咱們能夠推斷出，它多是爲整個腳手架提供方法的。咱們能夠先來看一下頭部引用的資源文件：

const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

一樣的，它也引用了path模塊和config目錄中的index.js文件，以後的話是一個npm包——extract-text-webpack-plugin。這個包的話，是用來分離css和js的內容的。後續咱們能夠詳細瞭解一下。同時，它還引用的package.json文件，這是一個json文件，加載過來以後，會變成一個對象。

因此，咱們須要從它的頭部依賴開始提及：

path模塊咱們以前提到過，這裏就不細說。咱們能夠來分析一下config目錄下的index.js文件。

index.js

這個文件中，其實有十分充足的代碼註釋，咱們也能夠來深刻探究一下。

從代碼中，咱們能夠看到經過module.exports導出了一個對象，其中包含兩個設置dev和build。

在dev中，設置了一些配置，代碼以下：

modules.exports = {
    dev: {
    
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
    
        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    
        // Use Eslint Loader?
        // If true, your code will be linted during bundling and
        // linting errors and warnings will be shown in the console.
        useEslint: true,
        // If true, eslint errors and warnings will also be shown in the error overlay
        // in the browser.
        showEslintErrorsInOverlay: false,
    
        /**
         * Source Maps
         */
    
        // https://webpack.js.org/configuration/devtool/#development
        devtool: 'eval-source-map',
    
        // If you have problems debugging vue-files in devtools,
        // set this to false - it *may* help
        // https://vue-loader.vuejs.org/en/options.html#cachebusting
        cacheBusting: true,
    
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false,
      }
  }

經過它的註釋，咱們能夠理解它在dev中配置了靜態路徑、本地服務器配置項、Eslint、Source Maps等參數。若是咱們須要在開發中，改動靜態資源文件、服務器端口等設置，能夠在這個文件中進行修改。

下面還有一個build的對象，它是在vue本地服務器啓動時，打包的一些配置，代碼以下：

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

其中包括模版文件的修改，打包完目錄以後的一些路徑設置，gzip壓縮等。明白了這些字段的意思以後，就能夠在以後的開發中，主動根據項目需求，改動目錄內容。

聊完config下的index.js文件，回到utils.js文件中，咱們能夠來看幾個其中的方法，來分析它們分別起到了什麼做用。

assetsPath方法
接受一個_path參數

返回static目錄位置拼接的路徑。

它根據nodejs的proccess.env.NODE_ENV變量，來判斷當前運行的環境。返回不一樣環境下面的不一樣static目錄位置拼接給定的_path參數。
cssLoaders方法
接受一個options參數，參數還有的屬性：sourceMap、usePostCSS。

同時，這裏用到了咱們以前提到的extract-text-webpack-plugin插件，來分離出js中的css代碼，而後分別進行打包。同時，它返回一個對象，其中包含了css預編譯器(less、sass、stylus)loader生成方法等。若是你的文檔明確只須要一門css語言，那麼能夠稍微清楚一些語言，同時能夠減小npm包的大小(畢竟這是一個使人煩躁的東西)。
styleLoaders方法
接受的options對象和上面的方法一致。該方法只是根據cssLoaders中的方法配置，生成不一樣loaders。而後將其返回。
createNotifierCallback方法
此處調用了一個模塊，能夠在GitHub上找到，它是一個原生的操做系統上發送通知的nodeJS模塊。用於返回腳手架錯誤的函數

一共這麼四個函數方法，在utils中被定義到。

回看到webpack.base.conf.js文件中，咱們能夠直接跳過config目錄下的index.js文件，以前已經分析過了。直接來看一下vue-loader.conf.js下的內容。

vue-loader.conf.js

這個文件中的代碼很是的少，咱們能夠直接貼上代碼，而後來分析，其中的做用。代碼以下：

'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'
  }
}

其中，主要就是根據NODE_ENV這個變量，而後分析是不是生產環境，而後將根據不一樣的環境來加載，不一樣的環境，來判斷是否開啓了sourceMap的功能。方便以後在cssLoaders中加上sourceMap功能。而後判斷是否設置了cacheBusting屬性，它指的是緩存破壞，特別是進行sourceMap debug時，設置成false是很是有幫助的。最後就是一個轉化請求的內容，video、source、img、image等的屬性進行配置。

具體的仍是須要去了解vue-loader這個webpack的loader加載器。

分析了這麼多，最終回到webpack.base.conf.js文件中

webpack.base.conf.js

其實的兩個方法，其中一個是來合併path路徑的，另外一個是加載Eslint的rules的。

咱們直接看後面那個函數，createLintingRule方法：

其中，加載了一個formatter，這個能夠在終端中顯示eslint的規則錯誤，方便開發者直接找到相應的位置，而後修改代碼。

以後的一個對象，就是webpack的基礎配置信息。咱們能夠逐一字段進行分析：

context => 運行環境的上下文，就是實際的目錄
entry => 入口文件：src下的main.js文件
output => 輸出內容，這內部的配置會根據不一樣的運行環境來進行變化
resolve => 其中的extensions字段，指定檢測的文件後綴，同時alias是用於指定別名的。在引用文件路徑中，若是有別名的符號，會被替換成指定的路徑。
module => 配置了一些eslint、vue、js、圖片資源、字體圖標、文件等加載的loader。詳細的能夠去看webpack的官方網站。
node => 此處部分有註釋，主要是阻止一些webpack的默認注入行爲，由於在vue中，已經具有了這些功能。

看完這些，你或許對webapck.base.conf.js中的內容有了一些初步的瞭解。其實，看懂它還須要你瞭解webpack這個很是有用的打包工具。

以後，咱們在來回看webpack.dev.conf.js這個文件

webpack.dev.conf.js

這個文件中，引用了webapck-merge這npm包，它能夠將兩個配置對象，進行合併。代碼以下：

const merge = require('webpack-merge');
const devWebpackConfig = merge(baseWebpackConfig, {
    ...
}

這樣就合併了base中的webpack配置項。以後，咱們能夠來看一下dev環境中的新增了那些配置項，它們分別起到了什麼做用？

首先，在module的rules中增長了cssSourceMap的功能
而後就是devtools，經過註釋的英文翻譯，能夠知道cheap-module-eval-source-map使得開發更快。
以後，就是devSever的一些配置項了。其中包塊客戶端報錯級別、端口、host等等
還有新增的plugins，咱們能夠來看一下實際新增的plugins(具體能夠看webpack文檔)：
- 定義process.env
- HotModuleReplacementPlugin: 模塊熱替換插件
- NameModulesPlugin: 顯示模塊加載相對路徑插件
- NoEmitOnErrorsPlugin: 在編譯出現錯誤時，使用 NoEmitOnErrorsPlugin 來跳過輸出階段。這樣能夠確保輸出資源不會包含錯誤
- HtmlWebpackPlugin: 使用插件生成一個指定的模版。

以後，還有一個函數，確保啓動程序時，若是端口被佔用時，會經過portfinder來發布新的端口，而後輸出運行的host字符串。

webpack.prod.conf.js

這是打包到生產環境中，會被用到的文件。咱們能夠看到，它相對於以前的webapck.dev.conf.js文件少了一些插件，多了更多的插件。咱們也能夠和以前同樣，經過它新增的一些東西，來知道它到底幹了什麼！(此處的新增是相對於webpack.dev.conf.js沒有的內容)

新增了output的配置，咱們能夠看到它在output中新增了一些屬性，將js打包成不一樣的塊chunk，而後使用hash尾綴進行命名
添加了一些插件：
- UglifJsPlugin: 這個是用來醜化js代碼的
- ExtractTextplugin: 這裏新增了一些屬性，在打包的css文件也增長了塊和hash尾綴
- OptimizeCssplugin: 這裏是來優化css文件的，主要就是壓縮css代碼
- HashedModuleIdsPlugin: 保證module的id值穩定
- optimize: 這裏是webpack一系列優化的措施，具體能夠逐一查看官方文檔
- CopyWebPlugins: 自定義assets文件目錄
若是沒有進行gzip壓縮，調用CompressionWebpackPlugin插件進行壓縮