vue/react前端项目自定义js脚本实现自定义部署等操作

devtools/2024/11/16 13:31:08/

因为项目需要,需要将同一个项目部署到四个不同的服务器上,并且每一个服务器的静态文件夹名称还不能一样,这就需要在打包之前,将静态文件夹重新命名,并且修改vue或者ts等文件中静态资源的引入路径,这是相当繁琐的意见事情,作为程序员,肯定忍不了这种事情发生。

所以,我的想法就是创建一个js脚本来实现这个工作,然后将这个脚本添加到package的script脚本下面,这样我就可以一键执行脚本来完成繁琐的工作。

所以该怎么做呢?

在项目的根目录下面创建deploy.js:

javascript">const fs = require('fs')
const path = require('path')// Function to copy a folder recursively
const copyFolderSync = (src, dest) => {if (!fs.existsSync(dest)) {fs.mkdirSync(dest, { recursive: true })}fs.readdirSync(src).forEach((item) => {const srcPath = path.join(src, item)const destPath = path.join(dest, item)if (fs.lstatSync(srcPath).isDirectory()) {copyFolderSync(srcPath, destPath)} else {fs.copyFileSync(srcPath, destPath)}})
}// Function to update file references
const updateFileReferences = (dir, oldFolderName, newFolderName) => {const regex = new RegExp(`${oldFolderName}`, 'g')function updateFiles(dir) {fs.readdirSync(dir).forEach((file) => {const fullPath = path.join(dir, file)if (fs.statSync(fullPath).isDirectory()) {updateFiles(fullPath)} else if (file.endsWith('.js') ||file.endsWith('.vue') ||file.endsWith('.ts') ||file.endsWith('.scss') ||file.endsWith('.css') ||file.endsWith('.json')) {let content = fs.readFileSync(fullPath, 'utf-8')if (content.includes(`${oldFolderName}`) &&newFolderName !== oldFolderName) {content = content.replace(regex, `${newFolderName}`)fs.writeFileSync(fullPath, content)console.log(`Updated references in: ${fullPath}`)}}})}updateFiles(dir)
}// Main function to handle copying and renaming
const deployStaticFolder = (newFolderName) => {const srcFolder = path.join(__dirname, 'src', 'staticasap')const destFolder = path.join(__dirname, 'src', newFolderName)console.log('srcFolder', srcFolder, destFolder)if (fs.existsSync(srcFolder) && newFolderName !== 'staticasap') {copyFolderSync(srcFolder, destFolder)console.log(`Copied and renamed to: ${newFolderName}`)updateFileReferences(path.join(__dirname, 'src'),'staticasap',newFolderName)} else {console.error('Source folder does not exist or newFolderName =',newFolderName)}
}// update deploy time to index.html
const updateDeployTime = () => {const indexHtml = path.join(__dirname, 'index.html')let content = fs.readFileSync(indexHtml, 'utf-8')if (content.includes(`PUBLISHTIME`)) {var currentTime = new Date()console.log('currentTime', currentTime)content = content.replace('PUBLISHTIME', `${currentTime}`)fs.writeFileSync(indexHtml, content)console.log(`Updated time in: ${indexHtml}`)}
}// update deploy time to index.html
const updateViteConfig = (newFolderName) => {const viteConfig = path.join(__dirname, 'vite.config.ts')let content = fs.readFileSync(viteConfig, 'utf-8')if (content.includes(`staticasap`) && newFolderName !== 'staticasap') {content = content.replaceAll('staticasap', newFolderName)fs.writeFileSync(viteConfig, content)console.log(`Updated vite config in: ${viteConfig}`)}
}// delete dist folder
const deleteDistFolder = () => {const distFolder = path.join(__dirname, 'dist')if (fs.existsSync(distFolder)) {fs.rmdirSync(distFolder, { recursive: true })console.log(`Deleted folder: ${distFolder}`)} else {console.log(`Folder does not exist: ${distFolder}`)}
}// deploy to server// Get the new folder name from command line arguments
const newFolderName = process.argv[2]
console.log('new folder name', newFolderName)
if (newFolderName) {deleteDistFolder()updateDeployTime()updateViteConfig(newFolderName)deployStaticFolder(newFolderName)
} else {console.error('Please provide a new folder name.')process.exit(1)
}

其中代码的操作逻辑分为四个步骤:

1.拿到要修改静态资源文件夹名称

2.删除dist文件夹

3.更新vite配置

4.替换静态资源引入路径

5.自动部署dist文件夹到服务器中(待定)

然后将这个文件保存好,最后在pageckage里面添加脚本:

然后就可以一键执行来完成工作:


http://www.ppmy.cn/devtools/134446.html

相关文章

微信小程序:vant组件库安装步骤

前言:在微信小程序中引用vant组件报错,提示路径不存在,这很有可能是因为没有安装构建vant组件库导致。下面是我整理的安装vant组件库的步骤: 第一步:安装node.js(执行完第一步请重启小程序) 具体步骤请看链接:node.js…

笔记整理—linux驱动开发部分(12)I2C总线与触摸屏设备

IIC总线有三根线:SCL时钟线、SDA串行数据线、GND地线。IIC总线有以下三个特点的特点:同步通信(同一个时钟下)、电平(电平信号、非差分、近距离)、低速。 总线是结构,多个设备挂载同一条总线上&a…

树莓派(Raspberry Pi)picotool

树莓派(Raspberry Pi)picotool 安装直接安装从源码安装工具介绍显示信息保存程序二进制信息基本信息引脚完整信息 链接 安装 直接安装 在archlinux上,使用yay直接安装 yay -S picotool从源码安装 安装libusb sudo pacman -S libusb下载 …

计算机网络 (3)计算机网络的性能

一、计算机网络性能指标 速率: 速率是计算机网络中最重要的性能指标之一,它指的是数据的传送速率,也称为数据率(Data Rate)或比特率(Bit Rate)。速率的单位是比特/秒(bit/s&#xff…

设计模式——策略模式(c++)

策略模式(Strategy Pattern)在 C 中的实现 1. 策略模式定义 策略模式定义了一系列算法(策略类),将每个算法封装起来,使它们可以相互替换,达到灵活使用不同策略的目的。在策略模式中&#xff0…

木舟0基础学习Java的第三十三天(OA企业管理系统)

贯穿项目:OA企业管理系统 框架技术: Springboot / Spring / SpringMVC / MyBatis / Shiro 项目构建管理: maven 数据库: mysql 前端技术: html / css / js / jquery / jsp 扩展技术&#xff…

活动|华院计算作为联盟理事单位出席进博会全球人工智能合作论坛

第七届中国国际进口博览会(进博会)于11月5日至10日在上海举行,作为本次进博会的重要配套活动,首届人工智能全球合作论坛也于9日圆满落幕。本次论坛由全球招商中心委员会、人工智能全球合作论坛组委会主办,中国国际科技…

Redisson的可重入锁

初始状态: 表示系统或资源在没有线程持有锁的情况下的状态,任何线程都可以尝试获取锁。 线程 1 获得锁: 线程 1 首次获取了锁并进入受保护的代码区域。 线程 1 再次请求锁: 在持有锁的情况下,线程 1 再次请求锁&a…