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的文章，如果感興趣的可以關注我的文章，一起學習探討