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

lbool 发布于2019-08-23 12:30 / 1181人阅读

摘要：一个中使用的。比如在项目中的引入它们在中加入以下代码修改项目中的后记完结撒花本文简单研究了一下如何搭建解决方案，如有错误欢迎指出。

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

前言：我第一次接触到vw适配移动端的方案是在大漠先生的博客里（如何在Vue项目中使用vw实现移动端适配）,强烈建议没看过的朋友先去看一下这篇博客。vw解决方案早有耳闻，我也很想上手尝试一下，所以想要自己上手配置一个CRA脚手架的解决方案。在自己动手之前也先查了一些资料，其中Ghan的这篇博客很有帮助：使用create-react-app脚手架搭建vw-layout解决方案。和Ghan的方案不同，我研究了下决定借助react-app-rewired来搭建。下面把我的配置过程写在这里，有什么不对的地方欢迎批评，小白第一次配，求轻拍。

先上一些背景资料。主要用到以下几个工具：
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默认配置的目的。

除此之外还要用到几个常规插件：
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这几个插件是这个方案的核心，大漠先生已经做了非常详细的解释，强烈建议大家去看大漠的这篇文章。

开始构建

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作为包管理工具，习惯npm的朋友也可以用npm

这里简单说明一下，大漠先生的教程中提到的postcss-cssnext已经停止维护了，整合进了postcss-preset-env这个项目中，因此不需要再安装postcss-cssnext了，具体信息参见该项目github。

react-app-rewired配置

在项目根目录下新建config-overrides.js文件。内容如下：

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作为兼容工具，我简单看了下这个项目的gitHub介绍，这是一个buggyfill，主要是修复某些浏览器中关于viewport实现的bug，而不是作为polyfill在完全不支持viewport的浏览器中来实现它。

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

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

One more thing

修改项目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"
}

后记：完结撒花~本文简单研究了一下如何搭建viewport解决方案，如有错误欢迎指出。

专线服务云服务器 viewport viewport布局 create-react-app 搭建私有云方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98646.html

通过create-react-app从零搭建react环境

摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。一、快速开始：全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...

Cympros 2019-08-02 16:02 评论0 收藏0
通过create-react-app从零搭建react环境

摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。一、快速开始：全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...

CoyPan 2019-08-22 18:05 评论0 收藏0
Create-react-app+Antd+Less配置

摘要：说明官方脚手架工具用于快速创建应用，但依旧有局限性，我们根据项目需求需要对的配置进行修改。这里针对引入的两种配置方式进行配置。方案一一个对进行自定义配置的社区解决方案。安装修改启动项在项目根目录创建一个用于修改默认配置。说明 React官方脚手架工具Create-react-app 用于快速创建React应用，但依旧有局限性，我们根据项目需求需要对Create-react-app的配...

solocoder 2019-08-22 17:10 评论0 收藏0
create-react-app 2.0版本如何启用装饰器语法

摘要：简称已经更新之版本也更新至版本装饰器语法虽然还不是标准但是借助于也能在项目里愉快的玩耍时代如何启用装饰器语法呢我们依旧采用的是通过劫持对象达到修改的目的修改安装装饰器语法所需的插件也可以顺带升级在项目 create-react-app(简称cra)已经更新之2.0.3版本, babel也更新至7.x版本, JavaScript装饰器语法虽然还不是标准, 但是借助于babel, 也能在项...

Rindia 2019-08-23 12:29 评论0 收藏0
TypeScript 、React、 Redux和Ant-Design的最佳实践

摘要：使用官方的的另外一种版本和一起使用自动配置了一个项目支持。需要的依赖都在文件中。带静态类型检验，现在的第三方包基本上源码都是，方便查看调试。大型项目首选和结合，代码调试维护起来极其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

wangbinke 2019-08-23 17:10 评论0 收藏0