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代码
Nov 09 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
微信小程序实现导航栏选项卡效果
Jun 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
深入探究PHP的多进程编程方法
2015/08/18 PHP
php实现生成验证码实例分享
2016/04/10 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
美国精油公司:Plant Therapy
2019/05/17 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
寒假思想汇报
2014/01/10 职场文书
离职证明标准格式
2014/09/15 职场文书
交通事故起诉书
2015/05/19 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
Python利用zhdate模块实现农历日期处理
2022/03/31 Python