详解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) //提示用户更新版本 } }
内容版权声明:除非注明,否则皆为本站原创文章。