create-react-app+react-app-rewired搭建viewport解決方案

lbool 發(fā)布于2019-08-23 12:30 / 1392人閱讀

摘要：一個(gè)中使用的。比如在項(xiàng)目中的引入它們?cè)谥屑尤胍韵麓a修改項(xiàng)目中的后記完結(jié)撒花本文簡(jiǎn)單研究了一下如何搭建解決方案，如有錯(cuò)誤歡迎指出。

create-react-app搭建vw-layout解決方案

前言：我第一次接觸到vw適配移動(dòng)端的方案是在大漠先生的博客里（如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動(dòng)端適配）,強(qiáng)烈建議沒看過的朋友先去看一下這篇博客。vw解決方案早有耳聞，我也很想上手嘗試一下，所以想要自己上手配置一個(gè)CRA腳手架的解決方案。在自己動(dòng)手之前也先查了一些資料，其中Ghan的這篇博客很有幫助：使用create-react-app腳手架搭建vw-layout解決方案。和Ghan的方案不同，我研究了下決定借助react-app-rewired來搭建。下面把我的配置過程寫在這里，有什么不對(duì)的地方歡迎批評(píng)，小白第一次配，求輕拍。

先上一些背景資料。主要用到以下幾個(gè)工具：
react-app-rewired：一個(gè)CRA再配置的工具，源自React社區(qū)，可以在不eject的情況下自定義配置CRA腳手架創(chuàng)建的app。原理很簡(jiǎn)單，在項(xiàng)目根目錄下新建一個(gè)配置文件（config-overrides.js），把webpack的配置作為一個(gè)config對(duì)象傳入react-app-rewired，再用config-overrides中的配置對(duì)其做修改，然后用修改后的config對(duì)象對(duì)項(xiàng)目打包。
react-app-rewire-postcss：一個(gè)react-app-rewired中使用的postcss-loader。通過在config-overrides.js中加載這個(gè)loader并自定義配置，從而實(shí)現(xiàn)修改CRA默認(rèn)配置的目的。

除此之外還要用到幾個(gè)常規(guī)插件：
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的默認(rèn)配置，就不做過多的解釋了；由于cssnano的配置中使用了preset: "advanced"配置，需要安裝cssnano-preset-advanced包;zhipostcss-aspect-ratio-mini、postcss-px-to-viewport、postcss-write-svg、cssnano、postcss-viewport-units這幾個(gè)插件是這個(gè)方案的核心，大漠先生已經(jīng)做了非常詳細(xì)的解釋，強(qiáng)烈建議大家去看大漠的這篇文章。

開始 構(gòu)建

create-react-app vwpage

安裝依賴

yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-viewport-units cssnano cssnano-preset-advanced react-app-rewired postcss-preset-env --dev
//使用yarn作為包管理工具，習(xí)慣npm的朋友也可以用npm

這里簡(jiǎn)單說明一下，大漠先生的教程中提到的postcss-cssnext已經(jīng)停止維護(hù)了，整合進(jìn)了postcss-preset-env這個(gè)項(xiàng)目中，因此不需要再安裝postcss-cssnext了，具體信息參見該項(xiàng)目github。

react-app-rewired配置

在項(xiàng)目根目錄下新建config-overrides.js文件。內(nèi)容如下：

module.exports = function override(config, env) {
    //do stuff with the webpack config...
    return config;
}

安裝react-app-rewire-postcss Loaders

yarn add react-app-rewire-postcss --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;
}

兼容方案

大漠老師在博客中提到了Viewport Units Buggyfill作為兼容工具，我簡(jiǎn)單看了下這個(gè)項(xiàng)目的gitHub介紹，這是一個(gè)buggyfill，主要是修復(fù)某些瀏覽器中關(guān)于viewport實(shí)現(xiàn)的bug，而不是作為polyfill在完全不支持viewport的瀏覽器中來實(shí)現(xiàn)它。

1.引入JavaScript文件：
viewport-units-buggyfill主要有兩個(gè)JavaScript文件：viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js。你只需要在你的HTML文件中引入這兩個(gè)文件。比如在react項(xiàng)目中的index.html引入它們：

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

One more thing

修改項(xiàng)目package.json中的npm scripts：

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"
}

后記：完結(jié)撒花~本文簡(jiǎn)單研究了一下如何搭建viewport解決方案，如有錯(cuò)誤歡迎指出。