前端打包同时版本号自增
一、打包执行自定义js文件
1.新建sysInfo.json文件
{
"version": "20240307@1.0.1"
}
2.新建addVersion.js文件,打包时执行,将版本号写入sysInfo.json文件
//npm run build打包前执行此段代码
let fs = require('fs')
//返回package的json数据
function getPackageJson() {
let data = fs.readFileSync('./src/assets/json/sysInfo.json') //fs读取文件
return JSON.parse(data) //转换为json对象
}
let packageData = getPackageJson() //获取package的json
let arr = packageData.version.split('@') //切割后的版本号数组
let date = new Date()
const year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
month = month > 9 ? month : '0' + month
day = day < 10 ? '0' + day : day
let today = `${year}${month}${day}`
let verarr = arr[1].split('.')
verarr[2] = parseInt(verarr[2]) + 1
packageData.version = today + '@' + verarr.join('.') //转换为以"."分割的字符串
//用packageData覆盖package.json内容
fs.writeFile('./src/assets/json/sysInfo.json', JSON.stringify(packageData, null, '\t'), err => {
console.log(err)
})
3.package.json中配置
"scripts": {
"dev": "vite",
"serve": "vite",
"build": "node ./src/addVersion.js && vite build",
....
4.使用
import sysInfo from '@/assets/json/sysInfo.json'
二、使用对应打包工具(vite,webpack...)的自定义扩展plugin
1.新建incrementPackageVersionPlugin.ts文件
import fs from 'fs';
export const function incrementPackageVersionPlugin = ()=> {
return {
name: 'increment-package-version-plugin',
// writeBundle ---vite生命周期钩子函数,打包时会调用
writeBundle(opts, bundle) {
const packageJsonPath = './package.json';
try {
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
packageJson.version = incrementVersion(packageJson.version);
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
} catch (error) {
console.error('Error reading or writing package.json:', error);
}
}
};
}
function incrementVersion(version) {
const parts = version.split('.');
parts[parts.length - 1] = String(parseInt(parts[parts.length - 1]) + 1);
return parts.join('.');
}
2.在 vite.config.js 中引入并使用这个自定义插件:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'
import { incrementPackageVersionPlugin } from './incrementPackageVersionPlugin';
export default defineConfig(({ command, mode })=>{
return {
base: '',
resolve: {
alias: {
'@': resolve(__dirname, './src')
}
},
......,
plugins: [ vue(), incrementPackageVersionPlugin() ],
......
}
});