详解vue-cli官方脚手架配置(5)
config/prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
//使用webpack-merge来进行合并,减少重复代码。
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
当我们键入npm run build时,其实执行的是build目录下的build.js。
build.js
'use strict'
//跳转至check-versions
require('./check-versions')()
//指定为生成环境
process.env.NODE_ENV = 'production'
// node 终端的 loading 图
const ora = require('ora')
// 用于深度删除模块
const rm = require('rimraf')
const path = require('path')
// 命令行彩色输出
const chalk = require('chalk')
const webpack = require('webpack')
//跳转至config
const config = require('../config')
//跳转至webpack.prod.conf
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
//loading图显示
spinner.start()
/*
*使用 rimraf 将旧的编译输出的文件夹删除,然后重新编译生成
*rimraf(f: 路径, [opts], callback: 回调)
*/
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
'use strict'
//用来在命令行输出不同颜色文字的包,可以使用chalk.yellow("想添加颜色的文字....")
const chalk = require('chalk')
//版本解析插件
const semver = require('semver')
const packageConfig = require('../package.json')
//一个用来执行unix命令的包
const shell = require('shelljs')
// child_process 开启子进程,并执行 cmd 命令 然后返回结果
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
//格式化版本号
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
// shell.which('命令')在系统环境变量搜索命令, 如果用的是 npm 就检查 npm 版本
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
//执行"npm --version"命令
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
//如果版本不符合package.json文件中指定的版本号,返回false,进入if
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)
//提示用户更新版本
}
}
内容版权声明:除非注明,否则皆为本站原创文章。
