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 标签。
