项目说明

本项目是为了满足快速搭建基于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
# 成功后，会在控制台打印服务的地址，端口，访问即可

rictt / react-h5-template

项目说明

使用

目录

文档记录

✅ 配置多环境变量

✅ 样式预处理管理

✅ 路由配置化配置

✅ 开发设置代理

✅ 国际化管理

✅ 构建生产包并本地预览

相关链接

About

Languages