React + TypeScript 记录

在 Create React App 中使用 TypeScript
使用官方推荐的cli create-react-app

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

目录文件是酱紫的

引入 antd ( 按需加载 ) 详细配置参考antd文档：https://ant.design/docs/react/use-in-typescript-cn

yarn add antd react-app-rewired customize-cra

修改package.json文件

  /* package.json */
        "scripts": {
        -   "start": "react-scripts start",
        +   "start": "react-app-rewired start",
        -   "build": "react-scripts build",
        +   "build": "react-app-rewired build",
        -   "test": "react-scripts test",
        +   "test": "react-app-rewired test",
        }

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

/* config-overrides.js */

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

使用 babel-plugin-import

yarn add babel-plugin-import

修改config-overrides.js

/*  config-overrides.js */

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

最后 引入引入模块

 /* App.css */
 import { Button } from 'antd'