1. 程式人生 > >vue-cli腳手架之build資料夾上半部

vue-cli腳手架之build資料夾上半部

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,儲存便於檢視。