vue - 前置工作 - 目录功能介绍

 1 // npm和node版本检查，请看我的check-versions配置文件解释文章require(‘./check-versions‘)()
 2 
 3 // 设置环境变量为production
 4 process.env.NODE_ENV = ‘production‘
 5 
 6 // ora是一个命令行转圈圈动画插件，好看用的
 7 var ora = require(‘ora‘)
 8 // rimraf插件是用来执行UNIX命令rm和-rf的用来删除文件夹和文件，清空旧的文件
 9 var rm = require(‘rimraf‘)
10 // node.js路径模块
11 var path = require(‘path‘)
12 // chalk插件，用来在命令行中输入不同颜色的文字
13 var chalk = require(‘chalk‘)
14 // 引入webpack模块使用内置插件和webpack方法
15 var webpack = require(‘webpack‘)
16 // 引入config下的index.js配置文件，此配置文件我之前介绍了请自行查阅，主要配置的是一些通用的选项
17 var config = require(‘../config‘)
18 // 下面是生产模式的webpack配置文件，请看我的webpack.prod.conf解释文章
19 var webpackConfig = require(‘./webpack.prod.conf‘)
20 
21 // 开启转圈圈动画
22 var spinner = ora(‘building for production...‘)
23 spinner.start()
24 
25 // 调用rm方法，第一个参数的结果就是 dist/static，表示删除这个路径下面的所有文件
26 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
27   // 如果删除的过程中出现错误，就抛出这个错误，同时程序终止
28   if (err) throw err
29   // 没有错误，就执行webpack编译
30   webpack(webpackConfig, function (err, stats) {
31     // 这个回调函数是webpack编译过程中执行
32     spinner.stop() // 停止转圈圈动画
33     if (err) throw err // 如果有错误就抛出错误
34     // 没有错误就执行下面的代码，process.stdout.write和console.log类似，输出对象
35     process.stdout.write(stats.toString({
36       // stats对象中保存着编译过程中的各种消息
37       colors: true, // 增加控制台颜色开关
38       modules: false, // 不增加内置模块信息
39       children: false, // 不增加子级信息
40       chunks: false, // 允许较少的输出
41       chunkModules: false // 不将内置模块的信息加到包信息
42     }) + ‘\n\n‘)
43     // 以上就是在编译过程中，持续打印消息
44     // 下面是编译成功的消息
45     console.log(chalk.cyan(‘  Build complete.\n‘))
46     console.log(chalk.yellow(
47       ‘  Tip: built files are meant to be served over an HTTP server.\n‘ +
48       ‘  Opening index.html over file:// won\‘t work.\n‘
49     ))
50   })
51 })

 1 / 下面的插件是chalk插件，他的作用是在控制台中输出不同的颜色的字，大致这样用chalk.blue(‘Hello world‘)，这款插件只能改变命令行中的字体颜色
 2 var chalk = require(‘chalk‘)
 3 // 下面这个是semver插件，是用来对特定的版本号做判断的，比如
 4 // semver.gt(‘1.2.3‘,‘9.8.7‘) false 1.2.3版本比9.8.7版本低
 5 // semver.satisfies(‘1.2.3‘,‘1.x || >=2.5.0 || 5.0.0 - 7.2.3‘) true 1.2.3的版本符合后面的规则
 6 var semver = require(‘semver‘)
 7 // 下面是导入package.json文件,要使用里面的engines选项，要注意require是直接可以导入json文件的，并且requrie返回的就是json对象
 8 var packageConfig = require(‘../package.json‘)
 9 // 下面这个插件是shelljs，作用是用来执行Unix系统命令
10 var shell = require(‘shelljs‘)
11 // 下面涉及了很多Unix命令，这里可能解释的不够详细，第一时间精力有限，第二能力有限。。。
12 function exec (cmd) {
13   //脚本可以通过 child_process 模块新建子进程，从而执行 Unix 系统命令
14   //下面这段代码实际就是把cmd这个参数传递的值转化成前后没有空格的字符串，也就是版本号
15   return require(‘child_process‘).execSync(cmd).toString().trim()
16 }
17 
18 var versionRequirements = [
19   {
20     name: ‘node‘, // node版本的信息
21     currentVersion: semver.clean(process.version), // 使用semver插件吧版本信息转化成规定格式，也就是 ‘  =v1.2.3  ‘ -> ‘1.2.3‘ 这种功能
22     versionRequirement: packageConfig.engines.node // 这是规定的pakage.json中engines选项的node版本信息 "node":">= 4.0.0"
23   },
24 ]
25 
26 if (shell.which(‘npm‘)) {
27   versionRequirements.push({
28     name: ‘npm‘,
29     currentVersion: exec(‘npm --version‘), // 自动调用npm --version命令，并且把参数返回给exec函数，从而获取纯净的版本号
30     versionRequirement: packageConfig.engines.npm // 这是规定的pakage.json中engines选项的node版本信息 "npm": ">= 3.0.0"
31   })
32 }
33 
34 module.exports = function () {
35   var warnings = []
36   for (var i = 0; i < versionRequirements.length; i++) {
37     var mod = versionRequirements[i]
38     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
39         //上面这个判断就是如果版本号不符合package.json文件中指定的版本号，就执行下面的代码
40       warnings.push(mod.name + ‘: ‘ +
41         chalk.red(mod.currentVersion) + ‘ should be ‘ +
42         chalk.green(mod.versionRequirement)
43         // 大致意思就是 把当前版本号用红色字体 符合要求的版本号用绿色字体 给用户提示具体合适的版本
44       )
45     }
46   }
47 
48   if (warnings.length) {
49     console.log(‘‘)
50     console.log(chalk.yellow(‘To use this template, you must update following to modules:‘))
51     console.log()
52     for (var i = 0; i < warnings.length; i++) {
53       var warning = warnings[i]
54       console.log(‘  ‘ + warning)
55     }
56     console.log()
57     process.exit(1)
58     // 提示用户更新版本，具体不解释了，应该能看懂
59   }
60 }