vue-cli腳手架之build文件夾上半部

好，接下來一起分析分析配置文件^o^。

 

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

 

build.js中具體含義標注（vue-cli腳手架官方文件解釋，大家可自行定制這里面的內容）：

 

check-version.js，文件有點點長這里直接貼代碼：

'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還是需要貼代碼，太長了：

'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

 

這篇好長啊，先結束了，下一篇再介紹重要的幾個文件：webpack.base.conf.js     webpack.dev.conf.js     webpack.prod.conf.js     webpack.test.conf.js