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)