使用umi的插件功能编写一个自定义插件，实现在打包前去除代码中所有svg图片的title内容功能

1.在src下面新建plugins文件夹,并在其中创建你的插件文件，比如 removeSvgTitle.js。
2.编写插件代码:

/*
 * Description:当调用打包命令时，去除代码中所有svg图片的title内容,本地打包会改变源文件，提交会比较多，无其他影响
 * @Author: aoshilin
 * @Date : 2024-09-27 11:23:25
 * @LastEditTime: 2024-09-27 11:48:41
 * @LastEditors: aoshilin
 */

import type { IApi } from 'umi';
import { join, extname } from 'path';
import { readdirSync, readFileSync, writeFileSync } from 'fs';

export default (api: IApi) => {
  api.describe({
    key: 'removeSvgTitle',
    config: {
      schema(joi) {
        return joi.object();
      },
    },
  });

  api.onGenerateFiles(() => {
    const outputPath = api.paths.absSrcPath;
    // 递归读取目录中的所有文件
    function traverseDir(dir: string): string[] {
      const files: string[] = [];
      const items = readdirSync(dir, { withFileTypes: true });
      items.forEach((item) => {
        const fullPath = join(dir, item.name);
        if (item.isDirectory()) {
          files.push(...traverseDir(fullPath));
        } else if (extname(item.name).toLowerCase() === '.svg') {
          files.push(fullPath);
        }
      });
      return files;
    }

    const files = traverseDir(outputPath || '');

    // 处理普通 SVG 文件
    function processSvgFile(filePath: string) {
      let content = readFileSync(filePath, 'utf-8');
      // 使用正则表达式移除 <title> 标签及其内容
      content = content.replace(/<title[^>]*>[\s\S]*<\/title>/gi, '');
      // 保存修改后的内容
      writeFileSync(filePath, content, 'utf-8');
    }

    // 处理所有 .svg 文件
    for (const file of files) {
      processSvgFile(file);
    }
  });
};

 

3.注册插件：接下来，你需要在 Umi 的配置文件中注册这个插件。打开 config/config.ts 或者 config/config.js，并添加你的插件到 plugins 数组中。

export default {
  plugins: [
    // 其他插件...
    path.resolve(__dirname, './src/plugins/removeSvgTitle'),
  ],
  // 其他配置项...
};

 

4.测试插件：完成上述步骤后，尝试构建你的项目 (npm run build)，检查构建后的 SVG 文件是否已经没有 title 标签了。

请注意，此方法会直接修改源代码中的 SVG 文件，这可能不是你想要的行为，特别是在这些文件是通过版本控制系统管理的情况下。如果你不希望修改原始的 SVG 文件，你可以在 Webpack 的加载过程中处理 SVG 文件，而不是在生成文件时修改它们。例如，你可以创建一个自定义的 Webpack 加载器（loader）或使用现有的 loader 并对其进行配置以忽略 title 标签。