前言
本文主要记录在开发react+typescript+antd项目过程中遇到的问题，踩过的坑，希望对看到的同学有一些帮助。由于是第一次使用react做项目，有些理解错误和描述不对的地方，希望大家能够指出。同时这也是我第一次写这种博客性质的东西，不当的地方也请大家告诉我，万分感谢。
环境搭建
使用 create-react-app 一步步地创建一个 TypeScript 项目，并引入 antd。
参照antd官方文档
1、创建项目
create-react-app react-typescript-antd-demo --scripts-version=react-scripts-ts
进入项目并启动，默认端口是3000
cd react-typescript-antd-demo
yarn start
此时浏览器会访问 http://localhost:3000/ ，看到以下界面就算成功了。
2、引入antd
yarn add antd
3、高级配置
使用react-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）
yarn add react-app-rewired@1.6.2 --dev
注：react-app-rewired@2.0.1的版本获取react-scripts-ts配置路径报错
修改 package.json 里的启动配置
"scripts": {
"start": "react-app-rewired start --scripts-version react-scripts-ts",
"build": "react-app-rewired build --scripts-version react-scripts-ts",
"test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
"eject": "react-scripts-ts eject"
},
然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
使用 ts-import-plugin（一个用于按需加载组件代码和样式的 TypeScript 插件）
yarn add ts-import-plugin --dev
修改 config-overrides.js 文件
/* config-overrides.js */
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");
module.exports = function override(config, env) {
const tsLoader = getLoader(
config.module.rules,
rule =>
rule.loader &&
typeof rule.loader === 'string' &&
rule.loader.includes('ts-loader')
);
tsLoader.options = {
getCustomTransformers: () => ({
before: [ tsImportPluginFactory({
libraryDirectory: 'es',
libraryName: 'antd',
style: 'css',
}) ]
})
};
return config;
}
使用 react-app-rewire-less 自定义主题
yarn add react-app-rewire-less --dev
修改 config-overrides.js 文件
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
const tsLoader = getLoader(
config.module.rules,
rule =>
rule.loader &&
typeof rule.loader === 'string' &&
rule.loader.includes('ts-loader')
);
tsLoader.options = {
getCustomTransformers: () => ({
before: [ tsImportPluginFactory({
libraryDirectory: 'es',
libraryName: 'antd',
style: true,
}) ]
})
};
config = rewireLess.withLoaderOptions({
javascriptEnabled: true,
modifyVars: {
"@primary-color": "#1DA57A", // 主题色
},
})(config, env);
return config;
};
运行 yarn eject 命令将所有内建的配置暴露出来（不可逆，谨慎操作）
注：运行yarn eject只有可能会出现依赖包丢失的情况，我遇到的是react-scripts-ts丢失，需要根据具体报错信息解决
项目地址：https://github.com/kaichen87/react-typescript-antd-demo
