React降级配置及Ant Design配置详解


Posted in Javascript onDecember 27, 2018

React降级配置

1.使用create-react-app创建一个目录

React降级配置及Ant Design配置详解 

2.查看当前目录下的package.json文件中的配置

React降级配置及Ant Design配置详解 

注意:

可以看到当前的react-scripts是2.1.2版本,且只兼容IE11以上,所以为了更好地兼容IE浏览器,我们需要做降级配置

3.进入目录,在master分支下进行配置(如果创建好的目录中没有.git文件,使用git init初始化目录)

注意:

之所以要在master分支下进行配置,是为了在下文中运行 npm run eject

4.将原来的react-script删除

React降级配置及Ant Design配置详解 

5.重新安装对应版本(比如1.x的版本,比较稳定的版本)

React降级配置及Ant Design配置详解

6.添加git库(将以上做的修改添加到git库,这也是为什么如果没有.git文件,一定要先初始化)

React降级配置及Ant Design配置详解

7.运行npm run eject(如果有报错,可以不用管,只要有ejected successfully就可以)

React降级配置及Ant Design配置详解 

8.由于重新配置可以先删除node-moduls,然后在 npm i重新安装依赖

React降级配置及Ant Design配置详解

9.npm start,查看是否能运行(可能会报错,解决方法再下面)

10.删除package.json中的browserslist(因为这个配置是react-scripts2.x版本的,再降级以后,如果还存在,代码运行会报错)

React降级配置及Ant Design配置详解 

配置less

1.src中内容可以都删除,留下index.js

React降级配置及Ant Design配置详解

2.创建一个App.js(此时查看是否能运行,显示App.js的内容)

React降级配置及Ant Design配置详解 

3.创建App.less,并将文件引入到App.js中(import './App.less')

React降级配置及Ant Design配置详解 

4.安装less包

React降级配置及Ant Design配置详解 

5.进行less文件的配置,找到config中的dev文件

React降级配置及Ant Design配置详解

6.找到里面的css的配置,复制一份到css配置文件的下方,将loader中css换成less-loader以及options为以下内容

React降级配置及Ant Design配置详解
React降级配置及Ant Design配置详解

 7.配置完选项,需要重启项目才能生效

此时配置的less已经生效

React降级配置及Ant Design配置详解

Ant Design 配置

1.安装antd

React降级配置及Ant Design配置详解

2.安装按需加载组件代码和样式的插件

React降级配置及Ant Design配置详解

3.在package.json的babel中配置(注意要在babel中进行配置,不要写在babel外面去了)

React降级配置及Ant Design配置详解

4.测试引用button为例(先重启)

React降级配置及Ant Design配置详解

5.配置ant中的样式变量

React降级配置及Ant Design配置详解

以下是可以配置的样式变量

React降级配置及Ant Design配置详解

6.除了第5条的配置的方法,还可以引入配置(新建配置文件color.js在config文件中)

React降级配置及Ant Design配置详解

React降级配置及Ant Design配置详解

7.在dev中引入colors.js,再调用

8.在prod中和dev中一样修改less、引入默认colors

9.最后npm run build检查是否会出错

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

Javascript 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
详解Ant Design of React的安装和使用方法
Dec 27 #Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 #Javascript
angular 用Observable实现异步调用的方法
Dec 27 #Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 #Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 #Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 #Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 #Javascript
You might like
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
yii2安装详细流程
2018/05/23 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python 中random模块的常用方法总结
2017/07/08 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
python找出因数与质因数的方法
2019/07/25 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Django实现文件上传下载功能
2019/10/06 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
年度考核自我评价
2014/01/25 职场文书
学校门卫管理制度
2014/01/30 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
搞笑的获奖感言
2014/08/16 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
党支部三会一课计划
2014/09/24 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
免职通知
2015/04/23 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js