跟我一块儿使用create-react-app脚手架搭建vw-layout解决方案

时间 2019-11-10

标签一块儿使用 create react app 脚手架搭建 layout 解决方案栏目 React 繁體版

原文原文链接

以前也是看过大漠的vw适配Vue-cli，我本身写H5，还有使用vue作项目的时候，会搭建大漠博客中的那一套。
如今在github上面，看见了一位博主使用create-react-app也是用vw适配，很是开心，如今咱们一块儿使用vw给react适配移动端项目吧~
先放上博主大大的开源地址：https://github.com/gaohan1994/react-vw-layout
给各位无私开源的程序员们点赞，大家是最可爱的人儿。
1.建立项目css

cnpm install -g create-react-app
create-react-app react-vw-layout
cd react-vw-layout
npm start

2..打开配置选项
因为react默认隐藏webpack配置须要手动显示。
eject完的项目以下

第二步收工，第三部开始配置各类插件。
3.增长配置
安装postCss插件html

cnpm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano

在config/webpack.confi.js文件中进行以下修改
1.引入postCss插件vue

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配置react

加入配置代码位置以下android

{
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            // postcssNormalize()
            // 加入地点
            // 加入地点
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },

须要加入的代码以下webpack

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.jsgit

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;
}

接下来运行项目，运行项目会报错

解决办法为：github

cnpm i cssnano-preset-advanced --save-dev

运行项目
web

5.生产环境打包项目
使用npm run build报错

解决办法为修改package.json文件

[
    "last 2 versions",
    "android 4",
    "opera 12"
  ],

接下来打包项目成功

打开static/css/main.********.css

6.加入viewport-units-buggyfill配置
打开public/index.html

首先在中引入阿里cdn

<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>

在body中，加入以下js代码：

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

最终index.html以下

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      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="//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>
    <script>
      window.onload = function () {
        window.viewportUnitsBuggyfill.init({
          hacks: window.viewportUnitsBuggyfillHacks
        });
      }
    </script>
    <!--
      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`.
    -->
  </body>
</html>

从新执行npm start打开页面发现：

若是遇到img没法显示，则添加全局css

img { 
    content: normal !important; 
}

这样就适配了低版本安卓机型
7.加入css-modules配置
通常的小项目不使用css-modules已经能够hold住了，可是页面多起来仍是建议使用css-modules，下面介绍一下用法：

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

修改导出方式 export default App=>export default CSSModules(App, styles);

保存，重新执行npm start查看页面发现失败

缘由是未打开css import配置，此时import styles from './App.css';该语句并未成功引入css文件。

打开webpack.config.js加入modules: true 找到以下位置

{
        loader: require.resolve('css-loader'),
        // options: cssOptions,
        // 代码看这里看这里
        options:{
          //添加添加添加
          modules:true,
          importLoaders:1,
        }
      },

保存，再次执行npm start查看页面

是这个class名太过乱码不适于调试，再次打开webpack.config.dev.js 找到以下位置加入语句localIdentName:'[name][local][hash:base64:5]'

{
        loader: require.resolve('css-loader'),
        // options: cssOptions,
        // 代码看这里看这里
        options:{
          //添加添加添加
          modules:true,
          importLoaders:1,
          localIdentName: '[name]_[local]_[hash:base64:5]'
        }
      }

再次运行项目

咱们能够看到对应的class，方便咱们在项目中的调试
最后咱们执行npm run build 查看打包文件

嗯，已经大功告成啦啦啦啦啦啦啦开心，再次感谢做者大大无私的分享经验