用create-react-app开发移动web所需的配置

create-react-app是react的一款优秀的脚手架（简称cra），但是cra生成的项目结构还有很大的配置空间，为了更好的开发移动web应用，还需要做一些其他配置。

创建一个项目 npx create-react-app react-template

安装所需要的包

// 常见的路由管理
npm install --save react-router-dom
// css预处理器
npm install --save node-sass
// 在不需要eject的情况下修改webpack配置
npm install --save-dev react-app-rewired customize-cra
// 移动端UI库
npm install --save antd-mobile
// postcss相关插件
npm install --save postcss-aspect-ratio-mini // 用于将元素的尺寸固定为宽高比
npm install --save postcss-px-to-viewport // 可将px转换为vw单位
npm install --save postcss-write-svg // 直接在CSS中编写SVG
npm install --save postcss-viewport-units // 解决vw在低版本移动设备的兼容性
npm install --save cssnano // 压缩和清理CSS代码
npm install --save cssnano-preset-advanced // 搭配cssnano使用
npm install --save postcss-preset-env // 解决css的大部分的兼容性问题

清空src目录下的文件，是的没错，全删了。

在src下创建：

• 入口文件：index.js
• 路由文件：app-router.js
• 静态资源文件夹：static，static/images，static/style，static/style/reset.css
• 组件文件夹：components
• 页面文件夹：views
• 接口文件夹：api
• 插件文件夹：plugins

在根目录下创建：

• webpack修改文件：config-overrides.js

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './app-router'
import './static/style/reset.css'

ReactDOM.render(<AppRouter />, document.getElementById('root'))

app-router.js：

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

export default () => (
  <Router>
    <div>
        init router
    </div>
  </Router>
)

reset.css :

html {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

img { 
  content: normal; 
}

a {
  background-color: transparent;
  text-decoration: none;
}

样式重置仅仅是个人喜好，仅作参考。

config-overrides.js：

const { override, fixBabelImports, addPostcssPlugins } = require('customize-cra')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  addPostcssPlugins([
    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: 375, // (Number) The width of the viewport.
      viewportHeight: 667, // (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
    })
  ])
)

这里是postcss和UI库 antd 的配置，对于postcss每个插件的用途我在上面已经进行了简单的描述，用的是视窗适配单位，如果你想深入了解，这里 也许能帮到你。关于antd，主要是为了在cra中实现按需加载，相关信息你可以看这里。

public/index.html：

<script>
  if (!window.Promise) {
    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
  }
</script>

解决部分机器不支持es6的promise的兼容性问题。

package.json：

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

简单总结一下，使用sass作为css预处理，你也可以配置其他的，如less、stylus，但这里对sass支持程度最好，而且预处理器都差不多嘛，使用路由管理页面，并对项目目录做了一些简单的划分，都是为了以后维护迭代的时候陷入混乱，移动端适配使用视窗单位，它在移动端已经足够安全了，请放心使用，配置了最热门的UI框架antd在cra中的使用。

首先，这里仅仅是个人的一个配置，你可以当作一个参考，或者你没有头绪而又紧迫投入开发的时候，可以直接用。我学习react也就几天时间，所以我没有踩过什么坑，如果它出现了问题，请联系我，我们一起解决。