2021-0225-Vue项目之build.js文件说明

'use strict' //严格模式
require('./check-versions')() //引入检查版本文件并立即执行

process.env.NODE_ENV = 'production' //process是node中的global全局对象的属性，process是node中的全局变量，env设置环境变量。此设置环境为生产环境

const ora = require('ora') // 主要用来实现node.js命令环境的Loading效果，和显示各种状态的图标等

const rm = require('rimraf') // 以包的形式包装rm -rf命令，用来删除文件和文件夹的。不管文件是否为空，都可删除

const path = require('path') // path模块是node.js中处理路径的核心模块。可以很方便的处理关于文件路径的问题

const chalk = require('chalk') //chalk插件，用来在命令行中设置输出颜色

const webpack = require('webpack') // 引入webpack模板使用内置插件和webpack方法

const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')
spinner.start() // 开始执行加载动画

// 调用rm方法
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  // 如果删除的过程中出现错误，就抛出这个错误同时终止程序
  if (err) throw err
  webpack(webpackConfig, (err, stats) => { //这个回调函数是webpack编译过程中执行
    spinner.stop() 
    if (err) throw err // 如果有错误就抛出错误，没有错误就执行以下代码
    process.stdout.write(stats.toString({ // 鱼console.log类似输出对象。stats对象中保存着编译过程中的各种信息
      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'
    ))
  })
})