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項目的適配的相關操做，如今就能夠在項目中愉快的實現咱們的需求了。