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 ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
详解Angular路由之路由守卫
May 10 Javascript
vue中使用腾讯云Im的示例
Oct 23 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,不用COM,生成excel文件
2006/10/09 PHP
php 远程关机操作的代码
2008/12/05 PHP
Yii学习总结之安装配置
2015/02/22 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
python中黄金分割法实现方法
2015/05/06 Python
SVM基本概念及Python实现代码
2017/12/27 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
django+echart数据动态显示的例子
2019/08/12 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
python实现按日期归档文件
2021/01/30 Python
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
三年级科学教学反思
2014/01/29 职场文书
环保建议书200字
2014/05/14 职场文书
工作证明格式范文
2015/06/15 职场文书