react+antd+vite自动引入组件、图标等

前言：

        react在使用antd的时候，也是需要每个组件都在界面上按需引入的，那能不能自动生成，按需使用呢？我们这里说一说这个。

安装插件，组件按需引入

unplugin-antd-resolver

unplugin-auto-import

npm install unplugin-antd-resolver unplugin-auto-import -D

配置：vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import AutoImport from 'unplugin-auto-import/vite';
import AntdResolver from 'unplugin-antd-resolver';

export default defineConfig({
  plugins: [
    react(),
    AutoImport({
      resolvers: [AntdResolver()], // 自动导入 Ant Design 的组件和 Hook
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true, // 必须开启，用于 antd 的 less 变量解析
      },
    },
  },
});

界面上使用：不用单独引入也可以使用了

return (
    <>
      <Button type="primary">按钮</Button> {/* 自动引入 Button */}
      {message.success('成功')} {/* 自动引入 message */}
    </>
  );

图标按需引入 ：unplugin-icons/resolver

@iconify/json

unplugin-icons

unplugin-auto-import

npm install @iconify/json unplugin-icons unplugin-auto-import -D

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    react(),
    AutoImport({
      resolvers: [
        IconsResolver({ prefix: 'Icon' }), // 图标自动导入，前缀为 Icon
      ],
    }),
    Icons({ compiler: 'jsx', autoInstall: true }), // 图标编译为 JSX
  ],
});

界面上使用 ：直接使用图标（通过约定前缀 Icon + 图标名）

function App() {
  return (
    <>
      <IconCarbonSun /> {/* 自动引入 Carbon 太阳图标 */}
      <IconMdiAccount /> {/* 自动引入 Material Design 用户图标 */}
    </>
  );
}

组合使用

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import AutoImport from 'unplugin-auto-import/vite';
import AntdResolver from 'unplugin-antd-resolver';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';

export default defineConfig({
  plugins: [
    react(),
    AutoImport({
      imports: ['react'], // 自动引入 React 的 Hooks
      resolvers: [
        AntdResolver(), // Ant Design 按需导入
        IconsResolver({ prefix: 'Icon' }), // 图标按需导入
      ],
      dts: 'types/auto-imports.d.ts', // 生成类型声明文件
    }),
    Icons({ compiler: 'jsx', autoInstall: true }), // 图标配置
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true, // antd 需要
      },
    },
  },
});

生成的auto.imports.d.ts

如果这个文件没有自动生成，运行下服务，重新启动就行

项目中使用源码：

vite里面的plugins

import AutoImport from 'unplugin-auto-import/vite'
import AntdResolver from 'unplugin-antd-resolver'
import IconsResolver from 'unplugin-icons/resolver'

export default function setupAutoImport() {
  return AutoImport({
    resolvers: [AntdResolver(), IconsResolver()],
    imports: ['react', 'react-router-dom', {
      'react-i18next': ['initReactI18next', 'useTranslation'],
    }],
    dirs: ['src/components/**'],
    dts: 'types/auto-imports.d.ts',
  })
}