前端实现文件夹操作 - 复制、压缩、重命名

前言

我们在用项目打包时每次都生成dist文件，但是发给实施的时候我们一般都会进行压缩以及重命名使用日期加环境来命名。所以打包次数多了，每次都重命名很麻烦，我看vite也有vite-plugin-zip-pack这个插件，但是我觉得实际上自己写个脚本也很方便，自定义程度也高，所以就自己写脚本来对打包后的dist文件进行压缩重命名。搞压缩过程中顺带的搞了一个文件夹及其内容复制的脚本。

前置知识

写脚本之前还是需要了解一些前置知识的，方便阅读代码。

path

const path = require('path');

path是node.js官方提供用来处理路径的模块，里面包含了一系列方法和属性，帮助用户处理路径需求

path.join()

路径拼接

const distPath = path.join(__dirname, 'dist');

path.join()方法可以将多个路径拼接成一个完整的路径路径拼接

fs.readdirSync

同步读取文件夹信息

  const dirInfo = fs.readdirSync(originPath, { withFileTypes: true });

originPath: 目标路径 withFileTypes: 是用来定义返回的信息类型的，默认是false。
withFileTypes: 为false时,返回的是目标路径下的所有名称集合，也就是名称数组
withFileTypes: 为true时，返回的是目标路径下的所有名称和文件类型集合，也就是对象数组，加这个的是为了拿到文件类型，可以判断当前文件是文件夹还是文件。

fs.mkdirSync

同步创建文件夹

fs.mkdirSync(copyPath, { recursive: true });

copyPath：目标文件的路径
recursive: 文件夹的创建方式是否以递归的方式创建目录

fs.copyFileSync

文件复制

 fs.copyFileSync(originFilePath, copyFilePath);

originFilePath: 源文件路径
copyFilePath：目标文件路径

脚本一：复制文件夹以及文件

const fs = require('fs');
const path = require('path');

/**
 * dist文件路径
 */
const distPath = path.join(__dirname, 'dist');

/**
 * 目标路径
 */
const copyDistPath = path.join(__dirname, 'copy-dist');

/**
 *
 * @param originPath 源路径
 * @param copyPath 目标路径
 */
function copyDir(originPath, copyPath) {
    // 读取文件信息
    const dirInfo = fs.readdirSync(originPath, { withFileTypes: true });
    // 创建文件夹
    fs.mkdirSync(copyPath, { recursive: true });

    dirInfo.forEach((entries) => {
        // 拼接当前文件路径
        const originFilePath = path.join(originPath, entries.name);
        // 拼接目标文件路径
        const copyFilePath = path.join(copyPath, entries.name);
        // 判断是否是文件夹
        if (entries.isDirectory()) {
            // 如果是文件夹，进入递归
            copyDir(originFilePath, copyFilePath);
        } else {
            // 如果不是文件夹，直接复制
            fs.copyFileSync(originFilePath, copyFilePath);
        }
    });
}

copyDir(distPath, copyDistPath);

脚本二：压缩文件夹以及重命名

核心思路是通过jszip这个插件来进行文件压缩和输出，读取目标文件夹进行文件夹以及文件夹内容收集，通过zip实例进行文件压缩信息生成，最后通过fs.writeFileSync这个API来进行文件重命名和输出。

const fs = require('fs');
const path = require('path');
const JSZip = require('jszip');
const dayjs = require('dayjs');
const zipPath = path.join(__dirname, '../dist');

/**
 * 读文件
 * @param currentPath 需要读取文件的路径
 * @param zipInstance JSZip实例
 */
function readDir(currentPath, zipInstance) {
    // 读取dist文件夹下的所有文件
    const dirInfo = fs.readdirSync(currentPath);
    dirInfo.forEach((fileName) => {
        // 拼接当前文件路径
        const fullPath = path.join(currentPath, fileName);
        // 同步读取文件信息
        const file = fs.statSync(fullPath);
        // 判断是否是文件夹
        if (file.isDirectory()) {
            // 如果是文件夹，实例中写入文件夹，进入递归
            readDir(fullPath, zipInstance.folder(fileName));
        } else {
            // 如果是文件，直接写文件
            zipInstance.file(fileName, fs.readFileSync(fullPath));
        }
    });
}

/**
 * 生成zip文件
 */
function generateZip() {
    // 新建zip实例
    const zip = new JSZip();
    // 读取dist文件夹
    readDir(zipPath, zip);
    // 生成zip包
    zip.generateAsync({
        type: 'nodebuffer',
        compression: 'DEFLATE',
        compressionOptions: { level: 9 },
    }).then((content) => {
        const nowTime = dayjs().format('YYYYMMDDHHmmss');
        // 同步输出文件
        fs.writeFileSync(`${nowTime}prod.zip`, content, 'utf-8');
    });
}

generateZip();

运行

最后在package.json中添加运行命令即可使用，非常简单便捷

"scripts": {
    "generate-zip": "node ./script/generate-zip.js",
    "copy-file": "node ./script/copy-file.js"
},

总结

总的来说，感觉实现还是挺简单的，主要还是需要掌握一些node.js操作文件的api。