react+ts+antd项目搭建

前言： 基于ts语言创建react项目，node版本是v16.14.2

一、 脚手架创建项目

1. 全局安装

 npm install -g creacte-react-app

2. 创建项目file-management，ts需要添加–template typescript

npx create-react-app file-management --template typescript

二、 添加craco.config.js配置文件，类似于vue的vue.config.js文件

1. 安装

npm i -D @craco/craco

2. 在项目根目录添加craco.config.js文件并添加路径别名

const path = require('path')module.exports = {// webpack 配置webpack: {// 配置别名alias: {'@': path.resolve(__dirname, 'src')}}
}

3. 修改 package.json 中的脚本命令

修改前：

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

修改后：

"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "craco eject"},

4. 配置路径识别，在根目录tsconfig.json文件中添加baseUrl和paths

{"compilerOptions": {"target": "es5","lib": ["dom","dom.iterable","esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx","baseUrl": "./","paths": {"@/*": ["src/*"]}},"include": ["src"]
}

更多配置参见craco配置文档

三、使用第三方组件库antd

需要注意的是antd是按需导入的，react并不能像vue一样把组件全部引用并注册。所以在react中使用antd只能是需要什么组件在页面中引入使用

1. 安装

npm install antd --save

2. 引入，以app.tsx为例

import { ConfigProvider } from 'antd';
import './App.css';function App() {return (<ConfigProvider></ConfigProvider>);
}export default App;

四、使用less

1. 安装，我们使用craco方式

npm i craco-less

2. 在craco.config.js文件中添加配置

const CracoLessPlugin = require('craco-less')module.exports = {plugins:[{// lessplugin: CracoLessPlugin,options: {// resolve-url-loader只对sass生效，craco-less默认使用sass配置，所以这里手动过滤掉resolve-url-loadermodifyLessRule: (lessRule) => {lessRule.use = lessRule.use.filter((i) => !i.loader.includes('resolve-url-loader'));return lessRule;},},},],
}

3. 把app.css改为app.less并在app.tsx中引入
   

五、使用路由

1. 安装

npm install react-router react-router-dom

2. 使用 app.tsx

import { ConfigProvider } from 'antd';
import { BrowserRouter as Router } from 'react-router-dom';
import './App.less';function App() {return (<Router><ConfigProvider></ConfigProvider></Router>);
}export default App;