react项目ui自动导入

使用react框架进行日常开发过程，最常见的就是使用ui组件进行开发，目前个人常用的ui库为antd,但是官方网站所提供的的使用方式为：

import React from 'react';
import { Button, Space } from 'antd';
const App = () => (
    <Space wrap>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
    </Space>
);
export default App;

就是每次使用的时候都必须在顶部 import 导入一次，这些就会导致每次繁琐的导入代码。

偶尔的机会学习到 unplugin-auto-import/vite 插件可以自定义导入自己所需的内容（该插件自动导入时会检测js代码中是否有相关自动导入的内容，有了则会自动帮我们导入进来），所以基于此插件，我们来进行 react 项目 ui组件的 自动导入。

• 首先生成组件的l ist 数据

// 自动导入ui库
import * as antdModules from 'antd';
const antdList = [];
for (const key of Object.keys(antdModules)) {
    if (!key.includes(['version'])) antdList.push(key);
}

• 然后在 vite.config.js 添加相关配置

import AutoImport from 'unplugin-auto-import/vite';
import { antdList } from './src/utils/autoImport';

export default ({ command, mode }) => {
    const plugins = [
        react(),
        AutoImport({
            // 自动导入相关函数
            imports: [
                'react',
                'react-router-dom',
                {
                    // 使用的时候才会自动导入，检查js代码
                    antd: antdList,
                },
            ],
            dts: '.auto-import.d.ts', // 生成 `auto-import.d.ts` 全局声明
        }),
    ];
    return defineConfig({
        plugins,
    });
};

这样在使用时，就不需要手动引入了，我们日常中只管使用就行（嘻嘻嘻嘻嘻）。