在 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'