文章目录
一、准备工作
React项目配置Less
搭建项目
使用 create-react-app 脚手架创建项目
or
安装create-react-app
并自动引入ts
$ cnpm install create-react-app
$ create-react-app proName --typescript
暴露配置项
需要先安装react-scripts
cnpm install react-scripts -g
然后执行
react-scripts eject
修改webpack.config
参照sass的配置来添加less配置
添加lessRegex变量
配置less-loader
安装依赖
cnpm install less-loader
此时运行项目会报错,需要安装less
cnpm install less
引入less文件
less-loader和less安装完成后,less编译配置就完成了,可以直接在项目引用less文件
import './global.less';
配置绝对路径
根据官方文档的解释,在你项目的根目录下创建jsconfig.json文件,并添加以下代码。(注意,如果配置了ts,应当直接在tsconfig.json里配置里就好了)
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
好极了,现在就可以像往常一样使用相对路径
antd在React项目中按需加载
在antd官网中只介绍了使用react-app-rewired来配置antd的按需加载,但我们日常开发通常会使用eject命令暴露所有配置,所以官网提供的配置方法已不再适用,本文将会介绍在eject项目之后配置antd按需加载的方法
- 安装antd
cnpm install antd --save
- 引入babel-plugin-import
使用babel-plugin-import按需引入antd样式
cnpm install babel-plugin-import
- 修改 package.json
修改package.json文件中的babel配置信息,增加babel-plugin-import的配置
{
······
"babel": {
"plugins": [
······
[
"import",
{
"libraryName": "antd",
"style": "css"
}
],
],
"presets": [
"react-app"
]
}
}
- 然后移除前面在 src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’; 直接引入组件使用就会有对应的css
import {
Button } from 'antd';
<Button type="primary">Primary</Button>
添加路由表
我们先在router/router.js 写好我们的路由表
import Root from 'pages/App'
import Home from 'pages/Home'
import Test from 'pages/Home/test'
import Detail from 'pages/Detail'
const routes = [
{
path: '/',
label: '首页',
exact: true,
component: Root
},
{
path: '/detail',
label: '书籍',
component: Detail
},
{
path: '/home',
label: '书籍',
component: Home,
routes: [
{
path: '/home/test',
label: '书籍test',
component: Test
}
]
},
]
export default routes
安装 react-router-config
npm install --save react-router-config
在index.js中引入并且使用
import ReactDOM from 'react-dom';
// import 'antd/dist/antd.css';
import {
BrowserRouter as Router } from 'react-router-dom';
import routes from 'router/router.js'
import {
renderRoutes } from 'react-router-config'
console.log(routes);
console.log(renderRoutes(routes));
ReactDOM.render(
<Router>
{
renderRoutes(routes)}
</Router>
, document.getElementById(