vue-cli中的build.js配置文件詳細解析
阿新 • • 發佈:2017-12-19
刪除 .json directory 內置 tostring file 環境配置 輸出 pin
轉載自:https://www.cnblogs.com/ye-hcj/p/7096341.html
這是vue-cli腳手架工具的生產環境配置入口 package.json中的"build": "node build/build.js"的直接指向。
//版本檢查 node的版本號 版本有要求"engines": {"node": ">= 4.0.0","npm": ">= 3.0.0"}
require(‘./check-versions‘)() //process是node中的global全局對象的屬性,process是node中的全局變量,此處設置環境變量 process.env.NODE_ENV = ‘production‘ // ora是一個命令行轉圈圈動畫插件,好看用的var ora = require(‘ora‘)
// rimraf插件是用來執行UNIX命令rm和-rf的用來刪除文件夾和文件,清空舊的文件 var rm = require(‘rimraf‘)
// node.js路徑模塊 連接路徑,例子:path.join(‘/foo‘, ‘bar‘, ‘baz/asdf‘, ‘quux‘, ‘..‘);// 返回: ‘/foo/bar/baz/asdf‘var path = require(‘p//chalk插件,用來在命令行中輸入不同顏色的文字
var chalk = require(‘chalk‘)
// 引入webpack模塊使用內置插件和webpack方法
var webpack = require(‘webpack‘)
//commonJs風格,引入文件模塊,引入模塊分為內置模塊與文件模塊兩種
var config = require(‘../config‘)
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‘
))
})
})
vue-cli中的build.js配置文件詳細解析