vite插件之svgrsvgr插件 1.根据id入参过滤出svg资源 2.读取svg文件内容 3.利用@svgr/cor

svgr插件

• 1.根据id入参过滤出svg资源
• 2.读取svg文件内容
• 3.利用@svgr/core将svg转为React组件代码
• 5.利用esbuild，将组件中的jsx代码转移为浏览器可运行的代码

import { Plugin } from 'vite';
import * as fs from 'fs';
import * as resolve from 'resolve';
import { transformWithEsbuild } from 'vite';

interface SvgrOptions {
  // svg 资源模块默认导出，url或者组件
  defaultExport: 'url' | 'component';
}

export default function viteSvgrPlugin(options: SvgrOptions) {
  const { defaultExport = 'url' } = options;
  return {
    name: 'vite-plugin-svgr',
    async transform(code, id) {
      // 1.根据id入参过滤出svg资源
      if (!id.includes('.svg')) {
        return code;
      }
      // console.log('id2',id)

      const svgrTransform = require('@svgr/core').transform;

      // 解析esbuild的路径，后续转移为jsx会用到，我们这里拿vite中的esbuild即可
      // const esbuildPackagePath = resolve.sync('esbuild',{
      //   basedir:require.resolve('vite')
      // })
      // const esbuild = require(esbuildPackagePath);

      // 2.读取svg文件内容
      const svg = await fs.promises.readFile(id, 'utf8');
      const { default: jsx } = await import('@svgr/plugin-jsx');
      //3.利用@svgr/core将svg转为React组件代码
      const svgrResult = await svgrTransform(
        svg,
        {},
        {
          // componentName:"ReactComponent"
          caller: {
            defaultPlugins: [jsx],
          },
        }
      );

      // 4.处理为默认的导出为url的情况
      let componentCode = svgrResult;
      if (defaultExport === 'url') {
        // 加上vite默认的 export default 资源路径
        componentCode += code;
        componentCode = componentCode.replace(
          'export default ReactComponent',
          'export { ReactComponent }'
        );
      }
      // 5.利用esbuild，将组件中的jsx代码转移为浏览器可运行的代码
      const result = await transformWithEsbuild(componentCode, id, {
        loader: 'jsx',
      });
      console.log('result', result.code);
      return {
        code: result.code,
        map: null,
      };
    },
  };
}

使用直接使用引入到vite-config.ts中即可