vue-cli脚手架build目录中的build.js配置文件

本文系统讲解vue-cli脚手架build目录中的build.js配置文件

1. 这个配置文件是命令npm run build 的入口配置文件，主要用于生产环境
2. 因为这是一个系统的配置文件，将涉及不少的模块和插件，因此这部份内容我将分多个文章讲解，请关注我博客的其余文章
3. 关于注释
   • 当涉及到较复杂的解释我将经过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看
4. 上代码

// 写在前面
// 此文件是在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'
    ))
  })
})
// end 
// 注: 若是你想本身编写一个高质量的脚手架工具，建议你: 
// 去补习nodejs，而后补习 es6，而后再来看webpack官方文档，而后本身独立编写一个和vue-cli相似的脚手架，若是上面的东西看不懂，更要这样作
// vue-cli还有一部份内容是关于代码测试的，能够说这块内容的复杂度不亚于webpack，这些内容对nodejs要求比较熟悉，说白了就是基础弱的很难入门，可是测试这块内容也是很是有价值的，能够借助无界面的浏览器解析引擎，经过一句命令就能够把你的代码在不一样的平台上运行，还能指出问题所在，因此，我会渐渐的转战nodejs去了，后续的文章将不少是关于nodejs的文章，若是感兴趣的能够关注个人文章，一块儿学习探讨