优雅地把前端代码打包压缩发布到服务器

优雅的实现前端部署代码

• 1.配置执行命令
• 2.配置脚本内置参数
• 3.编写脚本js，内部逻辑

一点知识点

compressing（文件压缩/解压）

• 1.文件解压
  • // 将压缩包解压到 test 文件夹中 compressing.zip.uncompress('./test.zip','./test').then(() => { console.log('解压完成') }).catch(() => { console.log('解压失败') })
• 2.文件压缩
  • compressing.zip.compressFile('E:/1.txt','E:/1.zip').then(() => { console.log('压缩完成') }).catch(() => { console.log('压缩失败') })

child_process（子进程）

• node子进程，可以执行命令行命令，也就是cmd命令
• 不影响主进程流程，主进程可以监听子进程状态
• 子进程可以异步执行任务，和主进程共同执行
• const exec = require('child_process').exec;

一个指令

npm run arrange // 执行脚本

一个package.json 配置

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "fb": "node ./fb.js", // 发布执行的js
    "eject": "react-scripts eject"
  },

一个ymn.json 配置

{
    "filePath":"build",
    ..., // 根目录下，添加一个json，相当于配置项
}

一个fb.js 脚本

• 1. 利用exec执行打包指令
• 2. 打包完成后，利用compressing进行压缩包创建
• 3. 压缩包创建完成后，利用fs去读取buffer
• 4. 将buffer利用axios发送给服务器，服务器进行数据存储
• 5. 服务器收到数据后，将数据进行创建文件和文件类型。

直接上完整代码

const fs =require('fs');
const compressing = require('compressing');
const axios = require('axios')
const exec = require('child_process').exec;
let data =fs.readFileSync('./ymn.json')
const { filePath } = JSON.parse(data) ;
console.log('开始执行yarn build,进行打包项目');
exec('yarn build', (err, stdout, stderr) => {
        if (err) {
            return;
        }
        console.log('打包成功！');
        // 创建压缩包
        console.log('开始创建压缩包');
        let type = 'zip'
        let fileName =  new Date()*1
        compressing.zip.compressDir(`./${filePath}/`, `./${fileName}.${type}`).then(res=>{
            console.log('创建压缩包成功！',`${fileName}.${type}`);
            console.log('读取文件buffer');
            const buffer =fs.readFileSync(`./${fileName}.${type}`);
            console.log('读取文件buffer成功');
            return uploadfile(buffer,type,fileName)
        },(err)=>{console.log('压缩失败');})
        .then(res=>{
            console.log(res.data,'发送成功');
        })
})

const uploadfile = (buffer,type,fileName)=>new Promise((resolve, reject) => {
    console.log('开始上传文件');
    axios({
        method: 'post',
        url:  '127.0.0.1:3000',
        data: buffer,
        headers: { 'Content-Type': 'application/octet-stream', }, onUploadProgress: () => { }, 
    }).then(res=>{
        console.log('文件上传成功',res.data);
        fs.unlinkSync(`${__dirname}/${fileName}.${type}`)
        console.log('删除build文件成功',`${__dirname}/${fileName}.${type}`);
        resolve(res)
    }).catch(res=>{
        console.log('文件上传失败');
        fs.unlinkSync(`${__dirname}/${fileName}.${type}`)
        console.log('删除build文件成功');
        reject(res)
    })
})