check-versions.js,vue-cli中检查版本的js文件。

'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
} const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
] if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
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]
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)
}
}
 
const chalk = require('chalk'):引入的是一个用来在命令行输出不同颜色文字的模块,通过chalk.yellow("想添加颜色的文字......")来实现改变文字颜色的;
 
const semver = require('semver'):引入的是一个语义化版本文件的npm包,其实它就是用来控制版本的。“semver”的常用方法如下:
 
semver.valid('1.2.3') // '1.2.3',返回符合版本格式的版本
semver.valid('a.b.c') // null,如果不符合版本返回null
semver.clean(' =v1.2.3 ') // '1.2.3',返回一个标准的版本号,且去掉两边的空格
semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true,第一个参数是测试的版本号,第二个参数是匹配的版本,如果匹配则返回true
semver.gt('1.2.3', '9.8.7') // false,第一个参数的版本是否比第二个大
semver.lt('1.2.3', '9.8.7') // true ,第一个参数的版本您是否比第二个小

参考:https://npm.taobao.org/package/semver
 
const packageConfig = require('../package.json'):引入package.json,用来获取版本。
 
const shell = require('shelljs'):用来执行unix命令的包。
 
//这块儿不太熟,大致意思是用js代码同步执行一个cmd的命令,并且对返回的结果执行toString()和trim()方法
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
 
semver.clean(process.version)上面介绍过,返回的是一个版本信息,

packageConfig.engines.node是在package.json中了,指的是>=4.0.0
 
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}

shelljs的which方法是去系统的路径(system's PATH)中寻找命令,shell.which('npm')就是寻找npm命令,exec()方法就是上面说的执行一个命令(在这里是执行npm --version),返回版本信息的函数。关于shelljs更多的东西可以看这里:

http://www.ruanyifeng.com/blog/2015/05/command-line-with-node.html

https://www.npmjs.com/package/shelljs

module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
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)
}
}

这部分代码就很好理解了,分别检测当前的npm和node版本是不是符合package.json中定义的,如果不符合就提示wraning。

手撕vue-cli配置文件——check-versions.js篇的更多相关文章

  1. 手撕vue-cli配置——webpack.base.conf.js篇

    在开始写webpack.base.conf.js(简称base)之前,我们先来看一下vue-loader.conf.js这个文件,毕竟在base中我们还会用到: 'use strict' //引入前一 ...

  2. 手撕vue-cli配置——webpack.prod.conf.js篇

    'use strict' const path = require('path') const utils = require('./utils') const webpack = require(' ...

  3. 手撕vue-cli配置——webpack.dev.conf.js篇

    const utils = require('./utils') const webpack = require('webpack') const config = require('../confi ...

  4. vue/cli项目添加外部js文件的一个方法

    有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...

  5. Vue CLI 3 如何自定义 js 的文件名

    参考链接:https://blog.csdn.net/weixin_33979363/article/details/88742342

  6. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  7. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  8. Configuration Reference In Vue CLI 3.0

    Configuration Reference This project is sponsored by  #Global CLI Config Some global configurations ...

  9. 面试中的MySQL主从复制|手撕MySQL|对线面试官

    关注微信公众号[程序员白泽],进入白泽的知识分享星球 前言 作为<手撕MySQL>系列的第三篇文章,今天讲解使用bin log实现主从复制的功能.主从复制也是MySQL集群实现高可用.数据 ...

  10. Vue Cli 3:vue.config.js配置文件

    Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...

随机推荐

  1. logstash实战tcp插件

    vim /etc/logstash/conf.d/tcp.conf input{ tcp{ type => "tcp" port => "6666" ...

  2. TOP100summit 2017:小米唐沐等大咖精心挑选的100个年度研发案例实践

    2017年,机器学习.大数据.人工智能等词汇成为软件研发行业的主流,大前端.DevOps.区块链等技术方式成为热点方向:2017年,智能硬件开始成为新的焦点,这一年更被称为智能音箱井喷的一年:2017 ...

  3. android stream media

    http://www.cnblogs.com/skyseraph/archive/2012/03/31/2427593.html http://www.cnblogs.com/lingyunhu/p/ ...

  4. 2018/03/21 每日一个Linux命令 之 scp

    在平常的工作和学习中,难免要和远程服务器产生一些文件的交互. 当然也有 xftp 这种工具在,干的事情是一样的,不过今天还是介绍命令行下 scp 的用法,毕竟每天都在和命令行打交道. -- scp 命 ...

  5. 14nm或于6月量产,中芯首次披露12nm及第二代FinFET "N+1"计划(详细数据)

    日前中芯国际公布2018年度第四季度业绩,实现营收7.88亿美元,14nm工艺进入客户验证阶段,可望于今年6月份量产,且12nm工艺开发取得突破. 根据中芯国际披露的财报,2018年第四季度实现营业收 ...

  6. 新建的web工程找不到javax.servlet.http.httpservlet

    1.在出现此错误的项目上右键-->Build Path --> Configure Build Path 2.点击右边的 ADD Library 3.选中“Server Runtime”, ...

  7. LeetCode Top100 Liked Questions

    1. TwoSum https://www.cnblogs.com/zhacai/p/10429120.html  easy 2. Add Two Numbers https://www.cnblog ...

  8. python float()

    1.函数功能将一个数值或者字符转换成浮点型数值 >>> a = 12345 >>> amount = float(a) >>> print(amo ...

  9. MySQL Innodb日志机制深入分析

    MySQL Innodb日志机制深入分析 http://blog.csdn.net/yunhua_lee/article/details/6567869 1.1. Log & Checkpoi ...

  10. HTML5-Canvas 绘制线条的深入认识

    1. lineWidth 线条宽度 ( 示例: lineWidth = 10 ) 2. lineCap 线条帽(线条两端的形状) ( 示例: lineCap = butt(default) | rou ...