React+vite引入antd并按需引入

<think>我们使用Vite来搭建React + TypeScript项目，并集成Ant Design (antd)作为UI库。 步骤： 1. 使用Vite创建项目 2. 安装依赖（包括antd） 3. 配置antd（按需加载样式） 4. 修改App.tsx测试antd组件 具体操作如下： 1. 创建项目： npm create vite@latest my-react-app -- --template react-ts 2. 进入项目目录并安装依赖： cd my-react-app npm install npm install antd @ant-design/icons 3. 配置antd的按需引入（使用Vite的插件）： 安装插件：npm install vite[email protected] -D 或者使用unplugin（推荐使用unplugin，因为vite-plugin-style-import可能更新不及时） 但是，antd v5推荐使用更简单的配置，因为v5支持按需引入，我们只需要在vite.config.ts中配置即可。 实际上，antd v5默认支持ES模块的按需引入，我们只需要在vite.config.ts中做如下配置（使用unplugin插件）： 首先安装：npm i unplugin-import -D 但是，更简单的方式是使用`antd`的按需引入，我们可以通过直接引入组件的方式，因为antd默认支持ES模块树摇。 不过，为了样式的按需加载，我们需要一个插件来按需引入样式。我们可以使用`vite-plugin-imp`（但该插件已不再维护）或者使用`unplugin`系列。 这里我们使用`unplugin-auto-import`和`unplugin-vue-components`（针对Vue）不适用，针对React，我们可以使用`babel-plugin-import`，但在Vite中我们通常不使用Babel。 因此，我们采用手动引入组件和样式的方式，或者使用另一种方式：在Vite中配置CSS的预处理器。 实际上，antd v5使用CSS-in-JS，所以不需要额外的按需引入插件，只需要在项目中引入组件即可，样式会自动按需加载。但为了减少包体积，我们仍然可以手动引入组件。 例如：import Button from 'antd/es/button'; 这样只会引入Button组件和它的样式。但是这样写比较麻烦。 另一种方式是使用babel-plugin-import，但Vite默认使用esbuild，所以我们不使用babel。因此，我们可以选择手动引入，或者使用vite的插件。 目前，有一个vite插件`vite-plugin-imp`（但已不维护），所以我们可以考虑使用`unplugin-auto-import`和`unplugin-react-components`（这个插件可以自动为antd生成按需引入的代码）。 这里我们使用`unplugin-react-components`，它支持antd的自动按需引入。 安装： npm install unplugin-react-components -D 然后在vite.config.ts中配置： ```ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import Components from 'unplugin-react-components/vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), Components({ // 配置选项 // 这里我们使用antd的解析器 resolvers: [ // 这里需要安装一个解析器，例如 `unplugin-react-components` 并没有内置antd解析器，所以我们需要使用另一个插件：`unplugin-antd5`? // 实际上，我们可以使用 `unplugin-react-components` 的antd解析器，但是查看文档，它似乎没有专门为antd提供解析器。 // 因此，我们可能需要换一种方式。 ], }), ], }) ``` 但是，经过调查，目前（2023）antd v5推荐的方式是直接使用ES模块导入，因为Tree Shaking已经足够好，所以我们可以不用插件，而是手动按需引入。 例如： import { Button } from 'antd'; 这样，生产构建时，Vite（使用rollup）会自动进行Tree Shaking，只打包用到的组件。 而样式方面，antd v5使用了CSS-in-JS，所以样式也会按需加载。因此，我们不需要额外的配置。 所以，我们只需要在项目中直接使用`import { Button } from 'antd';`即可。 4. 修改App.tsx，使用antd的Button组件测试。 5. 清理默认的App.css和index.css，避免影响antd的样式。 6. 在main.tsx中引入antd的全局样式（可选，如果需要重置样式等，但antd的组件样式是按需加载的，所以不需要全局引入所有样式）。但是，为了确保antd的样式正常，我们需要在main.tsx中引入antd的dist/reset.css（v5中不需要，因为CSS-in-JS会自动注入）。 7. 运行项目：npm run dev 但是，为了确保项目结构清晰，我们进行以下调整： - 创建views、components、utils等目录（按需） - 配置路径别名（可选） 配置路径别名（在vite.config.ts中）： ```ts import path from 'path'; export default defineConfig({ // ...其他配置 resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, }) ``` 同时，在tsconfig.json中配置： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } ``` 8. 修改App.tsx测试： ```tsx import { Button } from 'antd'; function App() { return ( <div> <Button type="primary">Button</Button> </div> ); } export default App; ``` 9. 运行：npm run dev 如果出现按钮样式，则成功。 但是，antd v5默认使用dayjs，所以不需要额外安装moment。 总结步骤： 1. 创建项目：npm create vite@latest my-app -- --template react-ts 2. 进入项目：cd my-app 3. 安装依赖：npm install 4. 安装antd：npm install antd 5. 修改App.tsx，引入Button组件 6. 运行：npm run dev 注意：如果遇到样式问题，可以尝试在main.tsx中引入antd的reset样式（但v5不需要，因为每个组件都会注入自己的样式）。如果全局样式有冲突，可以引入一个重置样式表（例如normalize.css）。 另外，我们可以配置主题色等，通过antd的ConfigProvider，或者使用Vite的插件来修改less变量（因为antd v5使用CSS-in-JS，所以不再使用less，因此不需要配置less）。 因此，整个搭建过程非常简单。 但是，为了更好的开发体验，我们还可以配置eslint和prettier（可选）。 下面给出一个完整的vite.config.ts示例（包含路径别名）：</think>以下是使用 React + Vite + TypeScript + Ant Design (antd) 搭建前端项目的完整步骤： ### 基础搭建步骤 1. **创建项目** ```bash npm create vite@latest my-app -- --template react-ts cd my-app ``` 2. **安装依赖** ```bash npm install antd @ant-design/icons npm install -D less vite-plugin-style-import ``` 3. **配置 `vite.config.ts`** ```ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import styleImport from 'vite-plugin-style-import' export default defineConfig({ plugins: [ react(), styleImport({ libs: [{ libraryName: 'antd', esModule: true, resolveStyle: (name) => `antd/es/${name}/style/index` }] }) ], css: { preprocessorOptions: { less: { javascriptEnabled: true, modifyVars: { 'primary-color': '#1890ff' // 自定义主题色 } } } } }) ``` 4. **配置 `tsconfig.json`** ```json { "compilerOptions": { "jsx": "react-jsx", "esModuleInterop": true, "types": ["vite/client"] } } ``` 5. **修改 `src/App.tsx`** (测试组件) ```tsx import { Button, DatePicker } from 'antd'; import { UserOutlined } from '@ant-design/icons'; function App() { return ( <div style={{ padding: 24 }}> <Button type="primary">按钮</Button> <DatePicker /> <UserOutlined style={{ fontSize: 24 }} /> </div> ); } export default App; ``` 6. **启动项目** ```bash npm run dev ``` ### 关键优化配置 1. **按需加载**：通过 `vite-plugin-style-import` 实现组件和样式的按需加载 2. **主题定制**：在 `less.modifyVars` 中修改 Ant Design 主题变量 3. **路径别名**（可选）： ```ts // vite.config.ts resolve: { alias: { '@': path.resolve(__dirname, 'src') } } ``` ### 项目结构建议 ``` my-app/ ├── src/ │ ├── assets/ // 静态资源 │ ├── components/ // 通用组件 │ ├── pages/ // 页面组件 │ ├── utils/ // 工具函数 │ ├── App.tsx │ └── main.tsx ├── index.html └── vite.config.ts ```