脚本宝典收集整理的这篇文章主要介绍了

react项目的适配

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

利用create-react-app创建一个react项目 react-demo, 具体操作见: https://github.com/facebook/c...
create-react-app创建的项目默认是不对外暴露配置信息的,所有的配置信息可以在node_modules/react-scripts下面看到。因此如果对原配置信息不满意,希望加上自定义配置,可以这么做:

一 、技术背景

下面以实现淘宝的flexible布局+sass语法糖为例来进行操作。
何为flexible? https://github.com/amfe/artic...
sass语法糖的使用: http://www.ruanyifeng.com/blo...

二、暴露配置

在react-demo项目的package.json中使用npm run eject 来恢复默认配置,需要注意的是,此命令是不可逆的。此时会在根目录下生成我们需要的 config 和 public 两个配置文件夹。

三、准备包

要实现我们的需求,需要安装以下几个包:lib-flexible sass-loader node-sass postcss-px2rem

npm i lib-flexible --save 
npm i sass-loader node-sass --save-dev
npm i postcss-px2rem --save

四、开始配置

  1. 在 config/webpack.config.dev.js 下做如下配置:

图片描述

图片描述

2.同样在config/webpack.config.dev.js里也需要同样的配置,这里就不重复说明了。

3.在index.js中引入lib-flexible

图片描述

3.还有一步需要做的,我在完成上面的适配和之前vue的适配后做对比后,发现二者在同样的页面下居然会有些许差异,找了半天才找到了破解之道。找到 public/index.html文件,并注释掉下面的的viewport代码。至于为什么,可以查看lib-flexible的源码。

图片描述

五、总结
以上就是react项目的适配的相关操作,现在就可以在项目中愉快的实现我们的需求了。

总结

以上是脚本宝典为你收集整理的

react项目的适配

全部内容,希望文章能够帮你解决

react项目的适配

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过