前言
本文主要記錄在開發(fā)react+typescript+antd項(xiàng)目過程中遇到的問題，踩過的坑，希望對(duì)看到的同學(xué)有一些幫助。由于是第一次使用react做項(xiàng)目捌木，有些理解錯(cuò)誤和描述不對(duì)的地方，希望大家能夠指出嫉戚。同時(shí)這也是我第一次寫這種博客性質(zhì)的東西钮莲，不當(dāng)?shù)牡胤揭舱埓蠹腋嬖V我，萬分感謝彼水。
環(huán)境搭建
使用 create-react-app 一步步地創(chuàng)建一個(gè) TypeScript 項(xiàng)目，并引入 antd极舔。
參照antd官方文檔
1凤覆、創(chuàng)建項(xiàng)目
create-react-app react-typescript-antd-demo --scripts-version=react-scripts-ts
進(jìn)入項(xiàng)目并啟動(dòng)，默認(rèn)端口是3000
cd react-typescript-antd-demo
yarn start
此時(shí)瀏覽器會(huì)訪問 http://localhost:3000/ 拆魏，看到以下界面就算成功了盯桦。
2、引入antd
yarn add antd
3渤刃、高級(jí)配置
使用react-app-rewired（一個(gè)對(duì) create-react-app 進(jìn)行自定義配置的社區(qū)解決方案）
yarn add react-app-rewired@1.6.2 --dev
注：react-app-rewired@2.0.1的版本獲取react-scripts-ts配置路徑報(bào)錯(cuò)
修改 package.json 里的啟動(dòng)配置
"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"
},
然后在項(xiàng)目根目錄創(chuàng)建一個(gè) config-overrides.js 用于修改默認(rèn)配置拥峦。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
使用 ts-import-plugin（一個(gè)用于按需加載組件代碼和樣式的 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;
};
運(yùn)行 yarn eject 命令將所有內(nèi)建的配置暴露出來（不可逆，謹(jǐn)慎操作）
注：運(yùn)行yarn eject只有可能會(huì)出現(xiàn)依賴包丟失的情況卖子，我遇到的是react-scripts-ts丟失略号，需要根據(jù)具體報(bào)錯(cuò)信息解決
項(xiàng)目地址：https://github.com/kaichen87/react-typescript-antd-demo
