react-app-rewired 搭建viewport解决方案

什么是viewport？

表示宽度是设备屏幕的宽度

在网上一直流传一种移动端的适配方案rem

在看了很多文章后，我发现一个问题，都是说说原理，并没有告诉你如何把rem 或者 vw 用的项目当中，难道你写代码的时候还会一边拿计算器一边计算单位长度嘛？我已经想象到那个画面了。知道你同事还知道你在做什么，那不知道你的同事，会不会在怀疑你是当会计的，还是不是流出一中 “归零归零” 的叫声，那到时估计不是计算机归零咯，是你钱包归零咯。

那我们应该怎么处理这种的单位换算。

先上一些背景资料。主要用到以下几个工具：

react-app-rewired：一个CRA再配置的工具，源自React社区，可以在不eject的情况下自定义配置CRA脚手架创建的app。原理很简单，在项目根目录下新建一个配置文件（config-overrides.js），把webpack的配置作为一个config对象传入react-app-rewired，再用config-overrides中的配置对其做修改，然后用修改后的config对象对项目打包。

react-app-rewire-postcss：一个react-app-rewired中使用的postcss-loader。通过在config-overrides.js中加载这个loader并自定义配置，从而实现修改CRA默认配置的目的。

为什么用react-app-rewired？

因为antd罗！自己看文档

除此之外还要用到几个常规插件：
cssnano-preset-advanced
postcss-aspect-ratio-mini
postcss-px-to-viewport
postcss-write-svg
cssnano
postcss-viewport-units
postcss-flexbugs-fixes
postcss-preset-env

其中，postcss-flexbugs-fixes、postcss-preset-env是目前版本CRA的默认配置，就不做过多的解释了；由于cssnano的配置中使用了preset: "advanced"配置，需要安装cssnano-preset-advanced包;zhipostcss-aspect-ratio-mini、postcss-px-to-viewport、postcss-write-svg、cssnano、postcss-viewport-units这几个插件是这个方案的核心，大漠先生已经做了非常详细的解释，强烈建议大家去看大漠的这篇文章。

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-viewport-units cssnano cssnano-preset-advanced react-app-rewired postcss-preset-env --save-dev

然后把config-overrides.js修改成

module.exports = function override(config, env) {

    ...
    ...

    require('react-app-rewire-postcss')(config, {
        plugins: loader => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
                autoprefixer: {
                    flexbox: 'no-2009',
                },
                stage: 3,
            }),
            require('postcss-aspect-ratio-mini')({}),
            require('postcss-px-to-viewport')({
                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.
            }),
            require('postcss-write-svg')({
                utf8: false
            }),
            require('postcss-viewport-units')({}),
            require('cssnano')({
                preset: "advanced",
                autoprefixer: false,
                "postcss-zindex": false
            })
        ]
    });
    return config;
}

即刻

以上方法是由polyfill实现的，在完全不支持viewport的浏览器中来实现polyfill的浏览器中，我们还需要做点兼容。

1.引入JavaScript文件：
viewport-units-buggyfill主要有两个JavaScript文件：viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js。你只需要在你的HTML文件中引入这两个文件。比如在react项目中的index.html引入它们：

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

2.在body中加入以下代码：

<script> 
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
            hacks: window.viewportUnitsBuggyfillHacks
        }); 
    } 
</script>

如果是Create-React-App的话
请查看这里

https://github.com/gaohan1994/react-vw-layout

Vue-cli3.0 默认就是vw-layout