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 相关文章推荐
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
js实现随机点名
Jan 19 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
咖啡常见的种类
2021/03/03 新手入门
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
JavaScript字符串对象
2017/01/14 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
巴西购物网站:Submarino
2020/01/19 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
银行介绍信范文
2014/01/10 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
党员承诺书范文
2014/05/19 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Python中使用Lambda函数的5种用法
2021/04/01 Python
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python