create-react-app 添加typescript与ant design实现按需加载

首先创建初始项目

npx create-react-app test-demo

添加typescript

注意create-react-app引入typescript不需要自己手动创建tsconfig.json等配置文件，安装引入即可，引入之后将test-demo项目src路径下的.js后缀文件改为.tsx
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

引入ant design

npm install --save antd

实现ant design按需加载

项目运行后控制台会有警告，“You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.”，一般是tree shaking失效导致，至于为什么失效真不知道，解决方法如下
npm install --save react-app-rewired
npm install --save customize-cra
npm install --save babel-plugin-import
npm run eject
如果执行npm run eject被弹出，请执行如下命令
git add .
git commit -am “test demo”
项目根目录添加config-overrides.js文件，没错就是根目录，添加如下配置

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

修改package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
}

运行npm start 如有报错，“Error: Cannot find module ‘react-scripts/package.json’ ”
npm install --save react-scripts

大胆去用吧

import {Button} from ‘antd’