Vue项目二、vue-cli2.x脚手架搭建build文件夹及config文件夹详解

build文件夹下

build.js

'use strict'                                    // js的严格模式
require('./check-versions')()                   // node和npm的版本检查

process.env.NODE_ENV = 'production'             // 设置环境变量为生产环境

// 导进各模块
const ora = require('ora')                      // loading模块
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')
spinner.start()

/*
    rm方法删除dist/static文件夹
        若删除中有错误则抛出异常并终止程序
        若没有错误则继续执行，构建webpack
            结束动画
            若有异常则抛出
            标准输出流，类似于console.log
*/
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,                     // 增加控制台颜色开关
      modules: false,                   // 是否增加内置模块信息
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,                    // 允许较少的输出
      chunkModules: false               // 不将内置模块信息加到包信息
    }) + '\n\n')                        // 编译过程持续打印
    // 编译出错的信息
    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n'))
      process.exit(1)
    }
    // 编译成功的信息
    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'
    ))
  })
})

 

 

check-versions.js ==》node和npm的版本检查

'use strict'                                            // js的严格模式

// 导进各模块
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')                        // shell.js插件，执行unix系统命令

function exec (cmd) {
  // 脚本可以通过child_process模块新建子进程，从而执行Unix系统命令
  // 将cmd参数传递的值转换成前后没有空格的字符串，也就是版本号
  return require('child_process').execSync(cmd).toString().trim()
}

//声明常量数组，数组内容为有关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'
const path = require('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) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)