vue-cli 腳手架 build.js 配置文件詳解

一、前言

build.js配置文件是npm run build 命令的入口配置文件，主要用于生產環境。

由于這是一個系統配置文件，將涉及很多模塊和插件，所以這部分內容我將分多個文章講解，請關注博主其他文章。

// 此文件運行在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' )) }) })

注: 如果想自己編寫一個高質量的腳手架工具，建議你:

去補習nodejs，然后補習es6，然后再來看webpack官方文檔，然后獨立編寫一個和vue-cli類似的腳手架，如果上面的東西看不懂，更要這樣做。

vue-cli還有一部分內容是關于代碼測試的，這塊內容的復雜度不亞于webpack，這些內容對nodejs要求比較熟悉，說白了就是基礎弱的很難入門，但是測試這塊內容也是非常有價值的，可以借助無界面的瀏覽器解析引擎，通過一句命令就可以把你的代碼在不同的平臺上運行，還能指出問題所在。

二、拓展閱讀

《Vue進階（五十一）： vue-cli腳手架build目錄中的webpack.base.conf.js配置文件》

《Vue進階（五十二）：vue-cli腳手架build目錄中的webpack.dev.conf.js配置文件》

《Vue進階（五十三）：vue-cli腳手架build目錄中的webpack.prod.conf.js配置文件》

《Vue進階（五十四）：vue-cli腳手架build目錄中的dev-server.js配置文件》

《Vue進階（五十五）：vue-cli腳手架build目錄中的build.js配置文件》

《Vue進階（五十六）：vue-cli腳手架build目錄中的karma.conf.js配置文件》

JavaScript Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。