vue - 前置工作 - 目錄功能介紹
阿新 • • 發佈:2018-03-20
當前 pat .html set template spinner family demo hunk
一個DEMOS的完整目錄(由於GWF問題,我就不一一打開網站一個個去搜索並且解釋了)可以去關註:https://www.cnblogs.com/ye-hcj
build
build.js(本文來自https://www.cnblogs.com/ye-hcj/p/7096341.html)
- 這個配置文件是命令
npm run build
的入口配置文件,主要用於生產環境 - 由於這是一個系統的配置文件,將涉及很多的模塊和插件,所以這部分內容我將分多個文章講解,請關註我博客的其他文章
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 })
webpack官方文檔:https://webpack.js.org/concepts/
check-versions.js(本文來自https://www.cnblogs.com/ye-hcj/p/7096341.html)
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 }
vue - 前置工作 - 目錄功能介紹