vue-cli腳手架build目錄中的build.js配置文件

本文系統講解vue-cli腳手架build目錄中的build.js配置文件

1. 這個配置文件是命令npm run build 的入口配置文件，主要用於生產環境
2. 因爲這是一個系統的配置文件，將涉及不少的模塊和插件，因此這部份內容我將分多個文章講解，請關注我博客的其餘文章
3. 關於註釋
   • 當涉及到較複雜的解釋我將經過標識的方式(如（1）)將解釋寫到單獨的註釋模塊，請自行查看
4. 上代碼

// 寫在前面
// 此文件是在node環境中運行的，使用webpack的nodejsAPI實現自定義構建和開發流程的
// ---------------------
// npm和node版本檢查，請看個人check-versions配置文件解釋文章
require('./check-versions')()

// 設置環境變量爲production
process.env.NODE_ENV = 'production'

// ora是一個命令行轉圈圈動畫插件，好看用的
var ora = require('ora')
// rimraf插件是用來執行UNIX命令rm和-rf的用來刪除文件夾和文件，清空舊的文件
var rm = require('rimraf')
// node.js路徑模塊
var path = require('path')
// chalk插件，用來在命令行中輸入不一樣顏色的文字
var chalk = require('chalk')
// 引入webpack模塊使用內置插件和webpack方法
var webpack = require('webpack')
// 引入config下的index.js配置文件，此配置文件我以前介紹了請自行查閱，主要配置的是一些通用的選項
var config = require('../config')
// 下面是生產模式的webpack配置文件，請看個人webpack.prod.conf解釋文章
var webpackConfig = require('./webpack.prod.conf')

// 開啓轉圈圈動畫
var spinner = ora('building for production...')
spinner.start()

// 調用rm方法，第一個參數的結果就是 dist/static，表示刪除這個路徑下面的全部文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  // 若是刪除的過程當中出現錯誤，就拋出這個錯誤，同時程序終止
  if (err) throw err
  // 沒有錯誤，就執行webpack編譯
  webpack(webpackConfig, function (err, stats) {
    // 這個回調函數是webpack編譯過程當中執行
    spinner.stop() // 中止轉圈圈動畫
    if (err) throw err // 若是有錯誤就拋出錯誤
    // 沒有錯誤就執行下面的代碼，process.stdout.write和console.log相似，輸出對象
    process.stdout.write(stats.toString({
      // stats對象中保存着編譯過程當中的各類消息
      colors: true, // 增長控制檯顏色開關
      modules: false, // 不增長內置模塊信息
      children: false, // 不增長子級信息
      chunks: false, // 容許較少的輸出
      chunkModules: false // 不將內置模塊的信息加到包信息
    }) + '\n\n')
    // 以上就是在編譯過程當中，持續打印消息
    // 下面是編譯成功的消息
    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})
// end 
// 注: 若是你想本身編寫一個高質量的腳手架工具，建議你: 
// 去補習nodejs，而後補習 es6，而後再來看webpack官方文檔，而後本身獨立編寫一個和vue-cli相似的腳手架，若是上面的東西看不懂，更要這樣作
// vue-cli還有一部份內容是關於代碼測試的，能夠說這塊內容的複雜度不亞於webpack，這些內容對nodejs要求比較熟悉，說白了就是基礎弱的很難入門，可是測試這塊內容也是很是有價值的，能夠藉助無界面的瀏覽器解析引擎，經過一句命令就能夠把你的代碼在不一樣的平臺上運行，還能指出問題所在，因此，我會漸漸的轉戰nodejs去了，後續的文章將不少是關於nodejs的文章，若是感興趣的能夠關注個人文章，一塊兒學習探討