目录

• 技术栈
• 基础环境
• 开发环境
• 正式环境
• 环境参数
• 页面效果

---

技术栈

• react全家桶

  • react
  • redux
  • react-redux
  • react-router-dom
  • redux-saga
  • antd
  • typescript
  • eslint
  • stylelint

• mobx

  包含mobx的版本

基础环境

• node >= 7.1

• port 支持自定义端口

  例如.env.development配置XHS_PORT=8888，如果不配置则默认是3000端口.

• PURGECSS

  这个可以写在环境配置里，只有在设置成true的时候才会启用。

  默认不启用。由于第三方库的过滤上存在一定的问题，设置白名单也存在一定的局限性。

开发环境

点击展开

git clone git@github.com:xiaohesong/react-by-webpack4.git
cp example.env.development .env.development 
npm i && npm start

正式环境

点击展开

npm run build && npm run pro

环境配置

点击展开

支持配置环境变量

.env,.env.development, .env.development.local, .env.production, .env.production.local.

环境变量是以XHS开头.

.env.development

XHS_NMAE='xiaohesong'
XHS_ID='xhs'

app.js

...
console.log(process.env.XHS_NAME) //xiaohesong
...

如不想以XHS开头，可以在config/env下修改NAMESPACE.

目前使用到的优化有按需加载，webpack hash缓存.

目前效果

点击展开

注册页面

登陆页面

播放页面