手撕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 versionRequirementsconst chalk = require('chalk'):引入的是一個用來在命令列輸出不同顏色文字的模組,通過chalk.yellow("想新增顏色的文字......")來實現改變文字顏色的; const semver = require('semver'):引入的是一個語義化版本檔案的npm包,其實它就是用來控制版本的。“semver”的常用方法如下:= [ { 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) } }
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的實現,基本的功能都已經完成了,我們的手寫框架也能勉強使用起來。為了讓我們的框架能夠使用起來比較簡單,這一節我