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 的 Hooksresolvers: [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',})
}