vue-cli腳手架之build資料夾上半部
阿新 • • 發佈:2018-11-15
build.js作用:命令npm run build的入口配置檔案,主要用於生產環境。
build.js中具體含義標註(vue-cli腳手架官方檔案解釋,大家可自行定製這裡面的內容):
check-version.js,檔案有點點長這裡直接貼程式碼:
// An highlighted block
'use strict' //js嚴格執行模式
const chalk = require('chalk') //匯入chalk模組,const宣告一個常量
const semver = require('semver') //同上
const packageConfig = require ('../package.json') //匯入package.json檔案
const shell = require('shelljs')//shelljs外掛,執行unix系統命令
function exec (cmd) {
//指令碼可以通過child_process模組新建子程序,從而執行Unix系統命令
return require('child_process').execSync(cmd).toString().trim()//將cmd引數傳遞的值轉換成前後沒有空格的字串,也就是版本號
}
//宣告常量陣列,陣列內容為有關node相關資訊的物件
const versionRequirements = [
{
name: 'node',//物件名稱為node
currentVersion: semver.clean(process.version),//使用semver外掛,把版本資訊轉換成規定格式
versionRequirement: packageConfig.engines.node//規定package.json中engines選項的node版本資訊
}
]
if (shell.which('npm')) {//which為linux指令,在$path規定的路徑下查詢符合條件的檔案
versionRequirements.push({
name: 'npm' ,
currentVersion: exec('npm --version'),//呼叫npm --version命令,並且把引數返回給exec函式獲取純淨版本
versionRequirement: packageConfig.engines.npm//規定package.json中engines選項的node版本資訊
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
//如果版本號不符合package.json檔案中指定的版本號,就執行warning.push...
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
//當前版本號用紅色標識,要求版本號用綠色標識
)
}
}
if (warnings.length) {//如果為真,則列印提示使用者升級新版本
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
utils.js還是需要貼程式碼,太長了:
// An highlighted block
'use strict'//js嚴格模式執
const path = require('path')//匯入path模
const config = require('../config')//引入config目錄下的index.js配置檔案
const ExtractTextPlugin = require('extract-text-webpack-plugin')//一個外掛,抽離css樣式,防止將樣式打包在js中引起樣式載入錯亂
const packageConfig = require('../package.json')
//匯出assetsPath
exports.assetsPath = function (_path) {
//如果是生產環境,則assetsSubDirectory的值為index.js檔案中的assetsSubDirectory的值,否則...
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)//path.join返回絕對路徑(在電腦上的實際位置);path.posix.join返回相對路徑
}
//cssloaders相關配置
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',//loader還是看看webpack官方解釋,處理除js之外的檔案?
options: {//傳遞引數給loader
sourceMap: options.sourceMap//是否開啟cssmap,預設為false
}
}
//postcss-loader相關
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]//是否使用postCss
if (loader) {
loaders.push({
loader: loader + '-loader',//載入對應loader
options: Object.assign({}, loaderOptions, {//object.assign淺拷貝合併物件
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
//
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
//返回最終讀取和匯入loader
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),//css對應vue-style-loader和css-loader
postcss: generateLoaders(),//postcss對應vue-style-loader和less-loader
less: generateLoaders('less'),//less對應...(同上)
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
//生成的各種css檔案的loader物件
for (const extension in loaders) {
const loader = loaders[extension]//提取每一種檔案的loader
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')//匯入模組,用於node.js模組傳送跨平臺系統通知
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,//發生錯誤時的通知標題
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')//發生錯誤時的通知圖示
})
}
}
vue-loader.config.js
來源https://www.cnblogs.com/hongdiandian/p/8317989.html,儲存便於檢視。