搭建 Ant Design 项目

简介

使用create-react-app脚手架搭建React + Antd项目，并配置好Ant Design的按需加载。

Ant Design官方文档中在create-react-app中使用antd的教程写的太散了，每次创建一个antd项目需要的操作有点麻烦，一会儿+一会-，那我直接把官方教程的步骤全部提出来，方便以后创建antd项目。

搭建

1. 创建 React 项目

create-react-app ant-demo

没有安装create-react-app需要先安装npm i -g create-react。

然后进入到创建的项目内 :

cd ant-demo

2. 安装所有需要的依赖

npm i antd react-app-rewired customize-cra babel-plugin-import

react-app-rewired用来自定义create-react-app配置

customize-cra是react-app-rewired版本关系需要

babel-plugin-import用于按需加载组件代码和样式

3. 自定义配置

1. 修改package.json文件的script：

   {
     // 省略其他键
     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test",
       "eject": "react-scripts eject"
     }
   }
   

2. 项目根目录（和package.json平级）创建config-overrides.js用来自定义配置：

   const { override, fixBabelImports } = require('customize-cra')
   
   module.exports = override(
     fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
       style: 'css',
     })
   )
   

4. 使用 Antd

在App.js组件中使用antd，然后npm start启动项目，antd组件的js和css代码都会按需加载了。

import React from 'react'
import { Button } from 'antd'

function App() {
  return (
    <Button type='primary'>Hello</Button>
  )
}

export default App

版权声明：

Anand's Blog文章皆为站长Anand Zhang原创内容，转载请注明出处。

包括商业转载在内，注明下方要求的文章出处信息即可，无需联系站长授权。

请尊重他人劳动成果，用爱发电十分不易，谢谢！

请注明出处：

本文出自：Anand's Blog

本文永久链接：https://anandzhang.com/posts/frontend/16