1. 程式人生 > >手撕vue-cli配置檔案——check-versions.js篇

手撕vue-cli配置檔案——check-versions.js篇

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

check-versions.js,vue-cli中檢查版本的js檔案。 'use strict' const chalk = require('chalk') const semver = require('semver') const packageConfig = require('../packag

vue-cli配置——webpack.prod.conf.js

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

vue-cli配置——webpack.dev.conf.js

const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path

vue-cli配置——webpack.base.conf.js

在開始寫webpack.base.conf.js(簡稱base)之前,我們先來看一下vue-loader.conf.js這個檔案,畢竟在base中我們還會用到: 'use strict' //引入前一篇文章的utils檔案 const utils = require('./utils') //引入conf

vue-cli配置檔案——config

最近一直在研究webpack,突然想看看vue-cli中的webpack是如何配置,查閱了很多相關的文章,所以也想出幾篇關於vue-cli配置的東西。正所謂“工欲善其事必先利其器”嘛!這一篇主要是分析vue中關於config資料夾中的相關程式碼; 首先我們先看一下config的檔案結構: |-config

vue-cli配置文件——check-versions.js

pac 更多 分代 常用 改變 engines shell. 檢測 emp check-versions.js,vue-cli中檢查版本的js文件。 ‘use strict‘ const chalk = require(‘chalk‘) const semver = re

vue-cli配置——utils.js

utils.js檔案主要是用來處理各種css loader的,比如css-loader,less-loader等。 //引入path模組 const path = require('path') //引入之前的config模組 const config = require('../config') //

vue-cli配置檔案——config資料夾

首先我們先看一下config的檔案結構: |-config |—dev.env.js |—index.js |—prod.env.js 開啟我們的vue專案資料夾我們可以清楚的看到資料夾下的三個檔案,“dev.env.js”,“index.js”,“prod.e

vue-cli配置檔案解釋

{ "name": "vue-lesson", "description": "A Vue.js project", "version": "1.0.0", "author": "wan

VUE——在配置檔案config/index.js配置統一請求介面

在配置檔案config/index.js找到  module.exports={         dev:{             proxyTable:{}         }     } 更改為:     proxyTable:{         "/api":

vue-cli腳手架npm相關文件說明(8)check-versions.js

str target 指定 hal lean 插件 代碼 push should 系列文章傳送門: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webpack.dev.conf

vue-cli配置postcss

fig plugins mod all port exp gin com css 1. npm install postcss-cssnext -D npm install postcss-import -D npm install postcss-loader-D 2.

vue-cli 配置項目名和域名

bsp cal mage ges run 圖片 反向 http image 默認運行 npm run dev 域名為localhost:8080 但是需要配置反向代理,這時候就需要去配置域名跟項目名 vue-cli 配置項目名和域名

vue - check-versions.js for semver

pac spa npm 格式 bsp 技術分享 1.2 就是 pan 引入的是一個語義化版本文件的npm包,其實它就是用來控制版本的,詳情見:https://www.npmjs.com/package/semver 用谷歌翻譯npm文檔 1 semver.

使用vue-cli沒有'dev-server.js'以及'dev-client.js'檔案

https://blog.csdn.net/peng_9/article/details/78764911     做慕課餓了麼實戰時發現自己用的2.0版本與視訊中1.0版本有些差別 ,發現在build 資料夾內少了 dev-server.js

vue-cli配置axios,並基於axios進行後臺請求函式封裝

文章https://www.cnblogs.com/XHappyness/p/7677153.html已經對axios配置進行了說明,後臺請求時可直接this.$axios直接進行。這裡的缺點是後端請求會散亂在各個元件中,導致複用和維護艱難。 升級:將請求封裝在一個檔案中並加上型別宣告 步驟: &nbs

vue-cli配置多頁面專案

背景:vue-cli版本3.0   省略初始化專案;預設的App.vue和index.html檔案可以刪掉 頁面結構如上圖,新加的home可以不要,注意下面的檔案路徑就行   接下來修改配置檔案: 1、修改build/utils.js /* 這裡是新

vuejs第二 vue-cli配置移動端自適配(引入flexible)

原文網址 http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 1.

vue-eslint配置檔案

在vue的配置檔案.eslintrc.js中配置以下選項 這樣只需要右鍵格式化以下資料夾,大部分eslint規則報錯就會被幹掉了 // https://eslint.org/docs/user-guide/configuring module.expo

Spring系列之寫註解與配置檔案的解析

目錄 Spring系列之IOC的原理及手動實現 Spring系列之DI的原理及手動實現 Spring系列之AOP的原理及手動實現 引入 在前面我們已經完成了IOC,DI,AOP的實現,基本的功能都已經完成了,我們的手寫框架也能勉強使用起來。為了讓我們的框架能夠使用起來比較簡單,這一節我