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...

2、暴露配置

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

3、准备包

要实现咱们的需求，须要安装如下几个包：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

4、开始配置

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的源码。

5、总结以上就是react项目的适配的相关操做，如今就能够在项目中愉快的实现咱们的需求了。