前端项目打包过滤指定icon文件

1.需求背景

项目中有部分功能需要vip权限才可以使用，所有部分筛选、按钮 等有vip的icon提示 如下图

此项目衍生出一个特殊版本，此版本无需登录且拥有最高权限，所以产品要求去除项目中的所有vip相关的提示。

2.解决思路

（1）首先想到的是找到对应组件把引用icon的节点隐藏  如下

此方法过于繁琐，项目中涉及到的页面有数十个，对与修改和验证的压力都很大，容易出现遗漏和错误。

（2）直接把引用的vip的icon删除，或者换成空白的图片。

所以准备在项目打包的时候增加脚本处理相关文件。

3.具体操作

（1）大概统计一下 项目中凡是涉及到vip显示的icon 命名中基本都带有 vip 字符

（2）新建三个空白图片 

（3）替换：递归src文件夹下的所有文件 匹配到文件名含有vip的图片，并根据图片类型 替换成 对应的blank文件（此处把源文件做了一次备份，在文件名后加了一个后缀）。代码如下所示

// 替换并备份 项目内的所有vip图片
const fs = require('fs');
const path = require('path');
// const { format } = require('date-fns'); // 用于格式化日期
const joinDir = (...dir) => path.join(__dirname, ...dir);
// 定义要搜索的目录
const searchDir = './'; // 当前目录
const replacementPath = joinDir('../blankImg/');
// 定义备份文件的后缀
const backupSuffix = `_bak`;

// 定义要删除文件的扩展名
const fileExtensions = ['.png', '.jpg', '.svg'];

// 定义替换文件的映射
const replacementFiles = {
  '.png': 'blank.png',
  '.jpg': 'blank.jpg',
  '.svg': 'blank.svg'
};

// 递归查找并处理文件
function processDirectory(dir) {
  const files = fs.readdirSync(dir);
  
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);

    if (stat.isDirectory() && fullPath.includes('src')) {
      // 如果是目录，则递归处理
      processDirectory(fullPath);
    } else if (stat.isFile()) {
      // 检查文件名是否包含 "vip" 且扩展名是否为 .png, .jpg, 或 .svg
      const ext = path.extname(file).toLowerCase();
      if (file.toLowerCase().includes('vip') && fileExtensions.includes(ext) && !file.toLowerCase().includes(backupSuffix)) {
        // 生成备份文件名
        const backupExt = path.extname(file);
        const baseName = path.basename(file, backupExt);
        const backupFileName = `${baseName}${backupSuffix}${backupExt}`;
        const backupPath = path.join(dir, backupFileName);

        // 创建备份文件
        fs.copyFileSync(fullPath, backupPath);

        // 替换原文件
        let tempPath = path.join(replacementPath,replacementFiles[ext]);
        fs.copyFileSync(tempPath, fullPath);
      }
    }
  });
}


let startTime  = new Date().getTime()
// 替换并备份
processDirectory(searchDir);
console.log('Done: 替换并备份 vip文件 耗时：', new Date().getTime() - startTime , 'ms')

（4）恢复源文件：打包完成之后把替换成空图片的文件恢复成源文件，直接用3里备份的文件替换就可以，代码如下

// 打包完成之后恢复vip图片
const fs = require('fs');
const path = require('path');
// const { format } = require('date-fns'); // 用于格式化日期

// 定义要搜索的目录
const searchDir = './'; // 当前目录
// 定义备份文件的后缀
const backupSuffix = `_bak`;

// 定义要删除文件的扩展名
const fileExtensions = ['.png', '.jpg', '.svg'];

// 递归查找并删除符合条件的文件
function deleteFilesRecursively(dir) {
  const files = fs.readdirSync(dir);

  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);

    if (stat.isDirectory() && fullPath.includes('src')) {
      // 如果是目录，则递归处理
      deleteFilesRecursively(fullPath);
    } else if (stat.isFile()) {
      // 检查文件名和扩展名
      const ext = path.extname(file).toLowerCase();
	    const baseNameOrigin = path.basename(file, ext);
      const baseName = path.basename(file, ext).toLowerCase();

      if (fileExtensions.includes(ext) && baseName.toLowerCase().includes('vip') && !baseName.includes(backupSuffix)) {
        // 删除文件
        fs.unlinkSync(fullPath);
      }
	  
	    if (fileExtensions.includes(ext) && baseName.toLowerCase().includes('vip') && baseName.includes(backupSuffix)) {
        // 去掉文件名中的 backupSuffix
        const newName = baseNameOrigin.replace(backupSuffix, '').concat(ext);
        const newFullPath = path.join(dir, newName);
        // 重命名文件
        fs.renameSync(fullPath, newFullPath);
      }
	  
    }
  });
}



let startTime  = new Date().getTime()
// 删除blankVip文件 恢复vip文件
deleteFilesRecursively(searchDir);
console.log('Done: 恢复vip文件 耗时:', new Date().getTime() - startTime , 'ms')

（5）调用：在打包前替换文件，打包后恢复文件

4.总结

在打包之后会发现项目中引入的vip文件的逻辑并没变，只是每个vip文件都变成空白的了。

其实此处有一个问题就是vip的icon如果设置了尺寸的话，占位还是在的。