react脚手架如何配置less和ant按需加载

前言

create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,须要咱们手动集成

1、react脚手架搭建

一、先全局安装create-react-app(提早须要安装node)

npm install -g create-react-app

二、而后经过create-react-app建立项目my-app

create-react-app my-app

三、最后经过cd进入项目文件夹并启动

cd my-app
yarn start

四、终端出现以下界面表示启动成功，并在浏览器中输入http://localhost:3000/便可看到react的初始页面

2、目录结构

┌─node_modules                      -依赖包
       ├─public                            -全局文件
       ├─src                               -项目文件
       ├─.gitignore                        -提交被git忽略文件目录
       ├─package.json                      -项目配置文件
       ├─README.md                         -README文件
       └─yarn.lock                         -锁定项目所需的各类配置版本

3、安装less和less-loader(less编译器)

yarn add less less-loader

安装完成以后该怎么配置呢？这时须要经过webpack来配置less-loader，可是咱们在上面的目录结构中彷佛并无发现webpack.config.js文件，这是由于脚手架为了实现“零配置”，会默认把一些通用的脚本和配置集成到 react-scripts，目的是让咱们专一于src目录下的开发工做，再也不操心环境配置。同时，被其集成的脚本和配置也会从程序目录中消失 ，程序目录也会变得干净许多
接下来，咱们就须要经过yarn eject将webpack配置暴露出来

4、暴露webpack配置

执行yarn eject

提示：执行该命令后会把已构建依赖项、配置文件和脚本复制到程序目录中。该操做是不可逆转的，执行完成后会删除这个命令，也就是说只能执行一次

配置完成以后，咱们会发现咱们的目录结构中会多出两个文件夹：

其中config文件夹，有三个关于 webpack 的配置文件：

webpack.config.dev.js 开发环境配置
webpack.config.prod.js 生产环境配置
webpackDevServer.config.js 开发服务器配置

5、修改webpack配置文件

第一步：到webpack.config.dev.js文件中找到以下代码，在sassModuleRegex后面加上lessRegex和lessModuleRegex变量

第二步：在下面加上这两段代码

第三步：按照一样的方法，把webpack.config.prod.js也配置上

6、测试

一、在src目录中把App.css改成App.less文件，并在里面加上

@title-color:#f00;
.App-link {
  color:@title-color;
}

二、而后再App.js中把less文件导入

import './App.less';

三、回到页面刷新，发现字体变红，说明配置成功

7、集成Ant Design 并配置按需加载

antd：是蚂蚁金服推出的一个很优秀的react UI库，其中包含了不少咱们常用的组件，对于小白学习react来讲十分友好！

一、首先须要安装antd

yarn add antd

二、安装完成以后咱们就能够直接在代码里使用它的ui组件了

import {Button} from 'antd';
import 'antd/dist/antd.css';

这个方法的优势是比较简单，不需再次配置，直接加载便可，可是比较麻烦，每次载入一个新的组件都须要先载入组件，再加载组件的css文件，性能较差

三、使用 babel-plugin-import 来进行按需加载

yarn add babel-plugin-import --save-dev

四、安装完成以后，在package.json中找到babel配置项，而后再里面加上plugins

注意： 这里babel配置项是须要经过yarn eject暴露出来才会有，本来的package.json是没有这个配置项的

五、最后只需从antd引入模块便可，无需单独引入样式, babel-plugin-import会帮助你加载 JS 和 CSS

import {Button} from 'antd';

六、关于antd的按需加载其实还有其余的方法，官方推荐使用react-app-rewired来实现antd的按需加载
详见: https://ant.design/docs/react...