先上github地址 https://github.com/gaohan1994/react-vw-layout 有空點個贊蛤~~
2018-4-19日更新適配到安卓低版本的插件buggyfill（是我疏忽導(dǎo)致大家以為vw解決方案兼容范圍過小用狱，原第六步css-modules改為buggyfill耻涛，css-modules順延為第七步）
2018-4-16日更新css-modules配置茉贡，前面步驟不變旬蟋，可直接跳到第七步。
寫在前面的話
在接觸到大漠先生牽頭開發(fā)的vw解決方案之前大咱，我使用的是阿里的第一代適配解決方案 lib-flexible 在使用vw解決方案開發(fā)一套H5之后礁竞，我真正的被vw的威力所折服夷恍。
由于大漠先生只給出了vue-cli的配置方式拱雏，并未給出react系列對應(yīng)腳手架create-react-app配置版本棉安，在看過大漠先生的配置之后底扳，我在create-react-app腳手架生成的項目上進行了一套配置铸抑，使得使用react的各位師兄弟也可以使用vw解決方案！
話不多說開工
vue使用方式：《如何在Vue項目中使用vw實現(xiàn)移動端適配》
關(guān)于具體如何使用請參考
再聊移動端頁面的適配
使用Flexible實現(xiàn)手淘H5頁面的終端適配
移動端適配最接近完美的解決方案在react中的使用方式衷模。本文只講create-react-app創(chuàng)建的項目如何配置鹊汛，具體每個插件的用途和使用方法請先查閱大漠先生的文章蒲赂，我相信大漠先生的文章已經(jīng)講的很明白。
重要的事情說三遍刁憋。一定要先大概看一下大漠先生的文章再往下看滥嘴，否則可能會一頭霧水。
1.創(chuàng)建項目
create-react-app react-vw-layout
cd react-vw-layout
npm start
打開http://localhost:3000/ 可以看到react歡迎頁面至耻，第一步成功若皱。
2.打開配置選項
由于react默認隱藏webpack配置需要手動顯示。
npm run eject
//Are you sure you want to eject? This action is permanent. (y/N)
y
運行完eject之后項目結(jié)構(gòu)如下
第二步收工尘颓，第三部開始配置各種插件走触。
3.增加配置
安裝postCss插件
npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
在config/webpack.config.dev.js文件中進行如下修改
1.引入postCss插件
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
2.加入postCss配置
加入配置代碼位置如下
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
//加入地點
//加入地點
//加入地點
],
},
},
],
},
需要加入的代碼如下
postcssAspectRatioMini({}),
postcssPxToViewport({
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
postcssWriteSvg({
utf8: false
}),
postcssCssnext({}),
postcssViewportUnits({}),
cssnano({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
第三步收工。
4.測試
修改App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
hello vw-layout
</div>
);
}
}
export default App;
修改App.css
.App {
width: 750px;
height: 200px;
background: #f27a7a;
color: #ffffff;
line-height: 200px;
text-align: center;
}
重新npm start頁面顯示如下
可以說是非常OK疤苹，剩下最后一個問題互广，配置生產(chǎn)環(huán)境webpack配置文件。
5.配置生產(chǎn)環(huán)境webpack.config.js
操作與配置測試環(huán)境文件相同先引入插件卧土，在相同的位置配置postCss插件
配置完成后執(zhí)行npm run build
打開static/css/main.********.css
可以看到已經(jīng)成功編譯惫皱，打完收工
6.加入viewport-units-buggyfill配置
這一步不過在大漠先生的文章中或是我自己的項目中都已經(jīng)配置，系我自己的疏忽忘記寫在文章中導(dǎo)致大家以為vw兼容范圍小尤莺。抱歉Ｂ梅蟆！颤霎！
打開public/index.html
首先在<head></head>中引入阿里cdn
<script src="http://g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
在body中扫皱，加入如下js代碼：
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
最終index.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script src="http://g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
</body>
</html>
重新執(zhí)行npm start打開頁面發(fā)現(xiàn)：
如果遇到img無法顯示，則添加全局css
img {
content: normal !important;
}
OK配置成功捷绑。這樣就適配了低版本安卓機型
7.加入css-modules配置
一般的小項目不使用css-modules已經(jīng)可以hold住了韩脑，但是頁面多起來還是建議使用css-modules，下面介紹一下用法：
執(zhí)行npm i --save react-css-modules
在App.js文件中引入插件
import CSSModules from 'react-css-modules';
修改css文件的引入方式
從import './App.css';修改為import styles from './App.css';
修改引用Css方式
className=>styleName
修改導(dǎo)出方式
export default App=>export default CSSModules(App, styles);
保存粹污，從新執(zhí)行npm start查看頁面發(fā)現(xiàn)失敗
原因是未打開css import配置段多，此時import styles from './App.css';該語句并未成功引入css文件。
打開webpack.config.dev.js加入modules: true
找到如下位置
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
//看這里看這里看這里看這里
modules: true,
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
//.....省略
}
}
],
},
保存壮吩，再次執(zhí)行npm start查看頁面
成功进苍！但是這個
class名太過亂碼不適于調(diào)試，再次打開webpack.config.dev.js找到如下位置加入語句
localIdentName:'[name]_[local]_[hash:base64:5]'
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
importLoaders: 1,
//看這里看這里看這里
localIdentName: '[name]_[local]_[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
//.....省略
}
}
],
},
再次執(zhí)行npm start查看頁面
OJBK大功告成鸭叙！
最后相同步驟加入到webpack.config.prod.js中
執(zhí)行npm run build 查看打包文件
彳亍吧觉啊，OK了。
END.其他想說的話
git地址再發(fā)一次沈贝，希望有空能幫忙點個贊謝謝~８苋恕！ https://github.com/gaohan1994/react-vw-layout 沒有配置成功的可以參考一下。尤其是css-modules可能改的地方比較多嗡善。
當初看到大漠先生的vw適配方案真的是眼前一亮辑莫，在嘗試了之后覺得這套方案的生產(chǎn)力非常強悍，其實按照本文進行配置已經(jīng)可以滿足相當一部分項目罩引，<del>除了一點就是沒有使用
css-modules各吨，當然我自己已經(jīng)成功配置了css-modules要修改的地方比較多，以后會出一篇文章來再繼續(xù)分享袁铐，</del>同時我是個Typescript重度患者揭蜒！我極度作死的成功配置了create-react-app typescript version的vw + css-modules版本，現(xiàn)在回想起來配置的那幾天真的生不如死剔桨。忌锯。。各種
踩坑领炫。 等如果有人需要ts + react + vw 解決方案的時候我再寫一篇文章吧偶垮。
那就到這里了，希望大家使用vw解決方案玩的愉快帝洪！
