项目阐明

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