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. Qt Package Project 打包发布程序

    在Qt项目开发完成后,我们想将项目打包发布成一个可执行文件,需要做如下步骤: 首先,将项目中的release文件中的可执行文件拷到一个新建的文件夹中,例如project.exe,用Qt自带的生成必备的 ...

  2. 服务端渲染(ssr)初了解

    之前接触的比较多的是SPA单页面应用,前端路由渲染,对于node服务端渲染刚开始了解到,服务端渲染的话相对于SPA来说有助于SEO优化,首屏加载更快. 和之前的SPA项目不同,之前公司spa的发布部署 ...

  3. 170810、spring+springmvc+Interceptor+jwt+redis实现sso单点登录

    在分布式环境中,如何支持PC.APP(ios.android)等多端的会话共享,这也是所有公司都需要的解决方案,用传统的session方式来解决,我想已经out了,我们是否可以找一个通用的方案,比如用 ...

  4. Flask 学习篇二:学习Flask过程中的记录

    Flask学习笔记: GitHub上面的Flask实践项目 https://github.com/SilentCC/FlaskWeb 1.Application and Request Context ...

  5. This version of the rendering library is more recent than your version of ADT plug-in. Please update ADT plug-in

    地址:http://stackoverflow.com/questions/18852983/eclipse-reports-rendering-library-more-recent-than-ad ...

  6. jdb--gdb---java 远程调试(java application与web application)

    命令比较     gdb              jdb     bt             where     del           clear     stop         brea ...

  7. php 实现栈结构

    一.栈的定义及知识 1.定义:栈又称为栈或者堆叠,是计算机科学中的一种特殊的串列形式的抽象数据类型,特殊之处在于只允许在链表或者数组的一端(堆栈顶端指针,又称 "top")加入数据 ...

  8. Spring Boot打war包

    然后修改下入口: 这样程序既可以以war也可以以jar的形式run. 右键项目properties,找到项目位置,然后: 然后放到tomcat的webapps的目录下: 然后启动tomcat:star ...

  9. Qt计算器开发(三):执行效果及项目总结

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/guodongxiaren/article/details/26046543 执行效果 project ...

  10. java项目连接jdbc报错:com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Could not create connection to database server

    java项目连接jdbc报错:com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Could not creat ...