项目阐明

本项目是为了满意快速建立根据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

相关链接

  • 国际化——i18next
  • 国际化-react-i18next quick start
  • 路由装备化办理config
  • 多环境装备-create-react-app