react脚手架如何配置less和ant按需加载的方法步骤


Posted in Javascript onNovember 28, 2018

前言

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

一、react脚手架搭建

1、先全局安装create-react-app(提前需要安装node)

npm install -g create-react-app

2、然后通过create-react-app创建项目my-app

create-react-app my-app

3、最后通过cd进入项目文件夹并启动

cd my-app
yarn start

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

react脚手架如何配置less和ant按需加载的方法步骤

二、目录结构

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

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

yarn add less less-loader

安装完成之后该怎么配置呢?这时需要通过webpack来配置less-loader,但是我们在上面的目录结构中似乎并没有发现webpack.config.js文件,这是因为脚手架为了实现“零配置”,会默认把一些通用的脚本和配置集成到 react-scripts,目的是让我们专注于src目录下的开发工作,不再操心环境配置。同时,被其集成的脚本和配置也会从程序目录中消失 ,程序目录也会变得干净许多

接下来,我们就需要通过yarn eject将webpack配置暴露出来

四、暴露webpack配置

执行yarn eject

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

配置完成之后,我们会发现我们的目录结构中会多出两个文件夹:

react脚手架如何配置less和ant按需加载的方法步骤

其中config文件夹,有三个关于 webpack 的配置文件:

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

五、修改webpack配置文件

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

react脚手架如何配置less和ant按需加载的方法步骤

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

react脚手架如何配置less和ant按需加载的方法步骤

第三步:按照同样的方法,把webpack.config.prod.js也配置上

六、测试

1、在src目录中把App.css改为App.less文件,并在里面加上

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

2、然后再App.js中把less文件导入

import './App.less';

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

react脚手架如何配置less和ant按需加载的方法步骤

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

antd:是蚂蚁金服推出的一个很优秀的react UI库,其中包含了很多我们经常使用的组件,对于小白学习react来说十分友好!

1、首先需要安装antd

yarn add antd

2、安装完成之后我们就可以直接在代码里使用它的ui组件了

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

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

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

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

4、安装完成之后,在package.json中找到babel配置项,然后再里面加上plugins

react脚手架如何配置less和ant按需加载的方法步骤

注意: 这里babel配置项是需要通过yarn eject暴露出来才会有,原本的package.json是没有这个配置项的

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

import {Button} from 'antd';

6、关于antd的按需加载其实还有其他的方法,官方推荐使用react-app-rewired来实现antd的按需加载
详见: https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 #Javascript
微信小程序实现评论功能
Nov 28 #Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 #Javascript
小程序点击图片实现自动播放视频
May 29 #Javascript
django使用channels2.x实现实时通讯
Nov 28 #Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 #Javascript
详解Vue中watch的详细用法
Nov 28 #Javascript
You might like
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
js select option对象小结
2013/12/20 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
简单讲解Python中的闭包
2015/08/11 Python
Python实现简易Web爬虫详解
2018/01/03 Python
详解Python装饰器
2019/03/25 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
python轮询机制控制led实例
2020/05/03 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
会计主管岗位职责
2014/01/03 职场文书
家长会学生演讲稿
2014/04/26 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
争做文明公民倡议书
2019/06/24 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server