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

今天药忘吃喽~ 2023-01-11 08:43 94阅读 0赞

### 首先创建初始项目 ###

> 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’