React+Typescript+antd 搭建项目

React+Typescript+antd 搭建项目

初始化项目

开发环境:

node: v14.15.0
yarn: 1.22.10
npx: 7.8.0
editor: visual studio code

使用cra进行项目初始化

npx create-react-app my-app --template typescript

如果已经使用cra创建过项目, 执行:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

官方文档关于这一节的介绍

antd

安装依赖

antd 本身已支持typescript4+, 不要使用@types/antd, 详见

yarn add antd

按需加载

可以使用暴露webpack配置的方式进行, 但是yarn eject这种方式是不可逆的, 可能会人为造成不必要的损失, 官方也不推荐

这里采用create-react-app官方给出的方法

引入react-app-rewired、customize-cra和babel-plugin-import

babel-plugin-import 是一个按需加载代码或样式的插件, create-app-rewired 需要配和 customize-cra 使用

yarn add react-app-rewired customize-cra babel-plugin-import

修改package.json

"scripts"