【偷懒】基于React cra的H5开发模板

2,333 阅读3分钟

项目说明

本项目是为了满足快速搭建基于React的H5项目,集成了一些基本的功能,例如预处理器的使用、路由配置化管理、国际化等等,节省开发时间;项目是基于create-react-app脚手架创建的,有相关问题可以参考cra的文档;

使用

  • 安装依赖
npm install
  • 本地运行
npm run start
  • 打包部署
npm run build

目录

文档记录

  • ✅ 配置多环境变量

    在根目录新建环境文件,如.env.development, .env.test,然后写入不同环境的变量值,!注意,变量名称只能以REACT_APP_开头,否则不生效

    REACT_APP_ENV=/api
    
  • ✅ 样式预处理管理

    • 文件用module.scss结尾,在jsx中导入样式对象,使用对象的语法
    import testStyle from './index.module.scss'
    
    function Test() {
      return (
        <div className={testStyle['test-page']}>
          嵌套在test下面的字路由
        </div>
      )
    }
    
    • 文件正常scss结尾,但需在文件中声明好相应的作用域名称
    $name: 'home-page';
    .#{$name}-test {
      color: red;
    
      .custom-color {
        color: skyblue;
      }
    }
    
    function Home() {
      return (
        <div className='home-page-test'>
          我是Home页面的内容
          <h3 className='custom-color'>自定义颜色</h3>
        </div>
      )
    }
    
  • ✅ 路由配置化配置

    采用react-router-config,进行配置化管理,需注意的是,相应的react-router(dom)版本不能是最新v5,否则会有不适配的问题

  • ✅ 开发设置代理

    在src目录下新建proxySetup.js文件

    // https://www.cnblogs.com/echolun/p/15173956.html
    
    const { createProxyMiddleware } = require('http-proxy-middleware');
    
    module.exports = function(app) {
      app.use(
        createProxyMiddleware(
          '/api', 
          {
            target: 'http://176.113.69.25:6208',
            secure: false,
            changeOrigin: true,
            pathRewrite: {
              "^/api": ""
            }
          }
        )
      )
    }
    
    
  • ✅ 国际化管理

    国际化管理使用了react-i18next、i18next这两个库,前者是在后者的基础上进行扩展,所以遇到配置上的问题优先找i18next的文档

    添加依赖

    npm install react-i18next i18next --save
    // 在入口
    import { initReactI18next } from "react-i18next";
    const resources = {
      zh: {
        // translation是官方的写法,里面才是国际化的对象
        translation: {
          "aaa": 123,
          "obj": {
            "aaa": 456
          }
        }
      },
      // 其他语言...
    }
    i18n.use(initReactI18next)
      .init({
        resources,
        // 从本地缓存取语言头
        lng: getLanguage(),
        fallbackLng: "en"
      })
    

    切换语言

    import { useTranslation } from "react-i18next";
    // 在组件里面
    function Home() {
      const { t, i18n } = useTranslation()
    
      const onCheckoutLanguage = () => {
        i18n.changeLanguage('en')
      }
    
      return (
        <div className='home-page-test'>
        <div onClick={onCheckoutLanguage}>{t('checkoutLanguage')}</div>
        </div>
      )
    }
    
    

    基本使用,参数传递

    <div>{t('welcome')}</div>
    <div>{t('user.name')}</div>
    <div>{t('user.password', { psd: 123456 })}</div>
    
    // 在json中,参数需要用双花括号{{ psd }}
    "user": {
      "name": "用户姓名",
      "password": "用户密码为:{{psd}}"
    }
    
  • ✅ 构建生产包并本地预览

    npm run build
    # 完成后,本地会有一个build目录,就是构建结果
    npm i serve -g
    serve -s build
    # 成功后,会在控制台打印服务的地址,端口,访问即可
    
  • ✅ 移动端适配

先安装依赖npm i postcss-pxtorem -D

//src/public/index.html
<body>
  <script>
    (function (doc, win) {
      var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 750 / 10 + 'px';
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  </script>
  <div id="root"></div>
</body>
// src/config/webpack.config.js
const getStyleLoaders = () => {
    ....
    // 找到normalize后面,添加postcss-pxtorem配置
    'postcss-normalize',
    [
      'postcss-pxtorem',
      {
        rootValue: 75,
        propWhiteList: [],
        minPixelValue: 2,
      }
    ]
}

项目地址

github.com/RiCTT/react…

如果有好的建议或者想法也欢迎反馈,感谢star

相关链接