vue项目的build文件夹的build.js文件说明

build文件夹是项目构建webpack相关代码
文件目录如下：
build
build.js 生产环境构建代码
check-version.js 检查node npm 版本
utils.js 构建工具相关
vue-loader.conf.js webpack loader设置
webpack.base.conf.js webpack基础配置
webpack.dev.conf.js webpack开发环境设置，构建本地服务器
webpack.pro.conf.js webpack生产环境配置

顺便说一下生产环境和开发环境的区别
开发环境，就是我们开发时的环境，在自己的分支上干活

生产环境就是用户使用的环境，由特定人员来维护，一般人没有权限修改

回归正题，下面是build目录的配置

一、build目录的buils.js文件

‘use strict’
require(’./check-versions’)()

process.env.NODE_ENV = ‘production’

const ora = require(‘ora’)
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(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'
))

})
})

1. process.env.NODE_ENV = ‘production’

process对象是全局变量，它提供当前node.js的有关信息，以及控制当前node.js的有关进程。因为是全局变量，它对于node应用程序是始终可用的，无需require()。
既然process都是一个对象了，env自然是它的一个属性，这个属性返回包含用户环境信息的对象。在终端输入node后，在输入process.env可以看到打印出来的信息。

NODE_ENV不是process.env对象上原有的属性，它是我们自己添加上去的一个环境变量，用来确定当前所处的开发阶段。一般生产阶段设为production，开发阶段设为develop，然后在脚本中读取process.env.NODE_ENV。
运行脚本时，可以这样改变环境变量, 在package.json文件的scripts里面添加命令：

NODE_ENV=production node build.js

但是这个命令使用Windows的同学拉下代码后就报错了，因为Windows上面设置的方式不一样：

set NODE_ENV=production node build.js

但是不同电脑上不同的设置肯定是不行的呀，这个时候cross-env赶来救场了。
cross-env可以跨平台的设置和使用环境变量
安装：
npm install --save-dev cross-env
接下来我们就可以通过cross-env来设置了
cross-env NODE_ENV=production node build.js

这样设置之后，我们可以在脚本中使用process.env.NODE_ENV了，但是不能在模块中使用，要想在模块当中直接使用，我们还需要一些配置

DefinePlugin

DefinePlugin可以定义一些全局变量，让我们在模块当中直接使用，不用做任何声明

const webpack = require(‘webpack’);

module.exports = {
entry: {
app: ‘./src/app’
},
output: {
path: ‘dist’,
filename: ‘bundle.js’
},
plugins: [
new webpack.DefinePlugin({
‘process.env.NODE_ENV’: ‘production’
})
]
};

DefinePlugin直接将内容替换了，而不是一个字符串，所以我们经常这样定义：
new webpack.DefinePlugin({
‘process.env.NODE_ENV’: JSON.stringify(process.env.NODE_ENV)
})

这样就可以直接使用啦_
现在我们要在模块中根据环境变量来配置不同的url了

let url = ‘’;
if (process.env.NODE_ENV === ‘testing’) {
url = ‘http://my.test.cn’;
} else if (process.env.alpord === ‘alpord’) {
url = ‘http://my.alpord.cn’;
} else if (process.env.NODE_ENV === ‘production’) {
url = ‘http://my.product.cn’;
} else {
url = ‘http://my.develop.cn’;
}

2. ora
   ora模块实现node.js 命令行环境的 loading效果， 和显示各种状态的图标等

使用：
npm install --save ora
const ora = require(‘ora’);

const spinner = ora(‘Loading unicorns’).start();

setTimeout(() => {
spinner.color = ‘yellow’;
spinner.text = ‘Loading rainbows’;
}, 1000);
spinner.start();//开始
spinner.stop();//结束

3. rimraf
   rimraf 包的作用：以包的形式包装rm -rf命令，就是用来删除文件和文件夹的，不管文件夹是否为空，都可以删除。

4. path模块
   Node.js path 模块提供了一些用于处理文件路径的小工具

5. chalk
   chalk 包的作用是修改控制台中字符串的样式，包括：
   字体样式(加粗、隐藏等)
   字体颜色
   背景颜色

6. 利用node的rimraf模块删除dist文件夹
   使用vue-cli构建webpack打包工具时，生产环境下，每次build时，删除dist目录，并重新生成，以防止dist目录文件越来越多