What do we need？
筆者目的是在vue專案打包后的 dist/index.html 檔案中寫入本次打包git用戶、最后一次git提交資訊，這樣做的目的是便于線上專案的管理和防止同事之間的相互扯皮，
最后打包出的效果如下圖：
How to do？
版本資訊需要記錄 git最后一次提交作者（作者名和郵箱郵）、日期、commit HEAD，本次打包git用戶和郵箱、日期，這些資訊都需要使用 git 命令來獲取到，在 node 中，要執行一段命令列腳步需要使用 child_process 模塊，
專案 build 目錄下新建 version.js 檔案，撰寫如下代碼：
const child_process = require('child_process')
// git 最后一次提交的 Head
const commit = child_process.execSync('git show -s --format=%H').toString().trim()
const commitUserName = child_process.execSync('git show -s --format=%cn').toString().trim()
const commitUserMail = child_process.execSync('git show -s --format=%ce').toString().trim()
const commitDateObj = new Date(child_process.execSync(`git show -s --format=%cd`).toString())
const commitDate = `${commitDateObj.getFullYear()+'-'+(commitDateObj.getMonth()+1)+'-'+commitDateObj.getDate()+' '+commitDateObj.getHours()+':'+commitDateObj.getMinutes()}`
const buildUserName = child_process.execSync('git config user.name').toString().trim()
const buildUserMail = child_process.execSync('git config user.email').toString().trim()
const nowDate = new Date()
const buildDate = `${nowDate.getFullYear()+'-'+(nowDate.getMonth()+1)+'-'+nowDate.getDate()+' '+nowDate.getHours()+':'+nowDate.getMinutes()}`
module.exports = {commit, commitUserName, commitUserMail, commitDate, buildUserName, buildUserMail, buildDate}
在 webpack.prod.conf.js 檔案中引入 version.js 模塊，并修改 HtmlWebpackPlugin 插件的配置，
const BuildInfo = require('./version.js')
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: false, // index.html 保留注釋
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
buildInfo: JSON.stringify(BuildInfo)
}),
接著在 index.html 檔案內容開頭添加 版本資訊注釋，
<!-- <%= htmlWebpackPlugin.options.buildInfo %> --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
至此大功告成！！！
suggest up-and-coming youngster
同事提議可將版本資訊從 index.html 抽出來搞個 version.html，他是這樣實作的：
1、專案根目錄下新建 version\index.html 檔案
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,IE=11,IE=10"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> <title>版本宣告</title> </head> <body> <p>commit: <%= htmlWebpackPlugin.options.buildInfo.commit %></p> <p>commitUserName: <%= htmlWebpackPlugin.options.buildInfo.commitUserName %></p> <p>commitDate: <%= htmlWebpackPlugin.options.buildInfo.commitDate %></p> <p>buildUserName: <%= htmlWebpackPlugin.options.buildInfo.buildUserName %></p> <p>buildUserMail: <%= htmlWebpackPlugin.options.buildInfo.buildUserMail %></p> <p>buildDate: <%= htmlWebpackPlugin.options.buildInfo.buildDate %></p> </body> </html>
2、 webpack.prod.conf.js 檔案中新增一個 HtmlWebpackPlugin 配置項
new HtmlWebpackPlugin({
filename: './static/version.html',
template: 'version/index.html',
inject: false,//不插入生成的js 僅用于版本宣告
minify: {
removeComments: false,
collapseWhitespace: true,
removeAttributeQuotes: true
},
buildInfo: BuildInfo
}),
這樣打包后會生成 dist\static\version.html ，成功將 版本資訊和index.html 檔案分離，
本文轉載自：https://www.limitcode.com/detail/5e0bf02210dcbf0b1852b374.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/158697.html
標籤：JavaScript