阅读 1160

用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也就几天时间,所以我没有踩过什么坑,如果它出现了问题,请联系我,我们一起解决。

文章分类
前端
文章标签