React, Antd, Redux, Saga, Router4, Webpack4, Babel7, Service-worker, Eslint, multiple env
10
stars
3
forks
source link
目录
技术栈
-
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
的时候才会启用。
默认不启用。由于第三方库的过滤上存在一定的问题,设置白名单也存在一定的局限性。
开发环境
点击展开
```shell
git clone git@github.com:xiaohesong/react-by-webpack4.git
cp example.env.development .env.development
npm i && npm start
```
正式环境
点击展开
```shell
npm run build && npm run pro
```
环境配置
点击展开
支持配置环境变量
`.env`,`.env.development`, `.env.development.local`, `.env.production`, `.env.production.local`.
环境变量是以`XHS`开头.
`.env.development`
```file
XHS_NMAE='xiaohesong'
XHS_ID='xhs'
```
`app.js`
```js
...
console.log(process.env.XHS_NAME) //xiaohesong
...
```
> 如不想以`XHS`开头,可以在config/env下修改`NAMESPACE`.
目前使用到的优化有按需加载,webpack hash缓存.
目前效果
点击展开
> 注册页面
![](https://github.com/xiaohesong/TIL/blob/master/assets/front-end/imgs/react-by-webpack4/register.jpeg)
> 登陆页面
![](https://github.com/xiaohesong/TIL/blob/master/assets/front-end/imgs/react-by-webpack4/login.jpeg)
> 播放页面
![](https://github.com/xiaohesong/TIL/blob/master/assets/front-end/imgs/react-by-webpack4/home.jpeg)