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 相关文章推荐
JS隐藏参数post传值实例
Apr 18 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
jQuery动态添加
Apr 07 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
vue-resource调用promise取数据方式详解
Jul 21 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
详解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
PHP脚本的10个技巧(6)
2006/10/09 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
js replace替换所有匹配的字符串
2014/02/13 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
input框中的name和id的区别
2016/11/16 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
详解webpack进阶之插件篇
2017/07/06 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
init进程的作用
2012/04/12 面试题
客户服务经理岗位职责
2014/01/29 职场文书
教师现实表现材料
2014/02/14 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
党员理论学习心得体会
2016/01/21 职场文书
导游词之介休绵山
2019/12/31 职场文书
python热力图实现的完整实例
2022/06/25 Python