Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tumars/boilerplate-webpack-react-es6-cssmodule

a boilerplate for Webpack-React-ES6-CssModule project
https://github.com/tumars/boilerplate-webpack-react-es6-cssmodule

css-modules javascript react redux webpack

Last synced: 3 months ago
JSON representation

a boilerplate for Webpack-React-ES6-CssModule project

Awesome Lists containing this project

README

        

本项目主要作为 react 项目开发的启动模板。使用 webpack v3、react v16、react-router v4,相较旧模板有较大的变化。

> webpack 的具体使用及优化可参考我的博文 [webpack 使用总结](http://www.ferecord.com/webpack-summary.html) 。

## 主要依赖及工具

![https://github.com/facebook/react](https://img.shields.io/badge/react-v16.2.0-blue.svg)
![https://reacttraining.com/react-router](https://img.shields.io/badge/react--router-v4.2.0-blue.svg)
![https://github.com/reactjs/redux](https://img.shields.io/badge/redux-v3.6.1-blue.svg)

![https://github.com/webpack/webpack](https://img.shields.io/badge/webpack-v3.1.0-orange.svg)
![https://github.com/eslint/eslint](https://img.shields.io/badge/eslint-v4.13.1-orange.svg)
![https://github.com/babel/babel](https://img.shields.io/badge/babel--loader-v7.0.0-orange.svg)
![https://github.com/postcss/postcss](https://img.shields.io/badge/postcss--loader-v2.0.9-orange.svg)

## 功能
#### 主要功能
- [x] Hot Module Replacement 热加载
- [x] ESLint 检测
- [x] less、autoprefixer
- [x] 业务组件使用 cssModule,通用组件使用 BEM 命名法
- [x] 小于 8k 图片转为 base64
- [x] svg 图标
- [x] 文件压缩、添加 MD5
- [x] ES6+, Fetch
- [x] 使用 Redux DevTools ([安装浏览器插件](https://github.com/zalmoxisus/redux-devtools-extension))

#### 示例动图:
demo

### 组件
本项目用到的纯组件主要如下:
- 按钮 Button
- 走马灯 Carousel
- 弹框 Dialog
- 图标 Icon
- 无限滚动 Infinite-Scroll
- 列表载入 List-Loading
- 结果页 Result-Card
- 分段器 Segmented
- 菊花图 Spin
- 步骤条 Steps
- 标签页 Tabs
- 倒计时 Time-Count
- 轻提示 Toast

这些组件主要展示思路与方法,功能较基础,仅供参考。实际开发生产时请根据业务需求二次开发。

## 开始使用
本项目使用`yarn`作为包管理,也可替换为`npm`。两者的差异请参阅[从 npm 客户端迁移](https://yarnpkg.com/zh-Hans/docs/migrating-from-npm)。无论使用哪个都建议将安装源替换为[淘宝镜像](https://npm.taobao.org/)。

### 安装
```
git clone https://github.com/tumars/boilerplate-webpack-react-es6-cssModule
cd boilerplate-webpack-react-es6-cssModule
yarn install
```

### 开发
```
yarn start
```

访问 `http://localhost:3000/` 查看页面。

![iterm1](./img/iterm1.png)

### mock 接口数据

打开新命令行窗口,执行:
```
yarn run mock
```

接口将会在本地 3003 端口启动。本项目的接口数据通过 node http 服务建立,配置文件在 /mock 文件夹内。

![iterm2](./img/iterm2.png)

### 打包
Windows 用户使用:
```
yarn run build-win
```

Mac 用户使用:
```
yarn run build-mac
```

文件将会在`./dist`文件夹内生成。

可以使用`anywhere`工具建立本地服务查看页面:
```
yarn global add anywhere 或 npm i -g anywhere
cd ./dist
anywhere
```
页面会自动打开。

## 目录文件结构
![structure](./img/structure.png)

## 其他技术选择
### REM 与 VW、VH
之前使用 rem 布局,后来看了[再聊移动端页面的适配](https://www.w3cplus.com/css/vw-for-layout.html),决定使用 vw、vh 布局,配合 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport)和 [viewport-units-buggyfill](https://github.com/rodneyrehm/viewport-units-buggyfill) 能通过大部分机型的测试。

> 经测试发现 viewport-units-buggyfill 在处理 base64 背景图片的 vw vh 时会导致图片出错,请注意。

当然使用 rem 布局还是最安全的,提供三个方案:

1. 参考本项目 v2 版本使用 js 控制 html 的 font-size 。
2. 使用 [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)。
3. 使用淘宝的 [lib-flexible](https://github.com/amfe/lib-flexible),这个是最推荐的。

### async 函数
本项目中的获取接口数据处的异步处理使用的是 async 函数,相比 Promise 直观、方便了许多。

### Decorator
本项目的一些组件使用了 Decorator(修饰器)的写法,例如 module/mo-carousel。以及 css module 也是以 Decorator 的方式使用。

## 性能优化
### Reselect
Reselect 库可以创建可记忆的(Memoized)、可组合的 selector 函数。Reselect selectors 可以用来高效地计算 Redux store 里的衍生数据。

使用 Reselect 相当一个缓存,使容器组件传递的 props 输入值不变时输出值不变,以减少显示组件的重复渲染。

本项目的 layout/data-list-tabs 文件内使用了 Reselect。

更多 Reselect 的访问跟介绍请访问:[https://github.com/reactjs/reselect](https://github.com/reactjs/reselect)

### Immutable
Immutable 是指数据不可变。使用 Immutable 在每次操作修改对象时都会生成一个新对象,而不修改原对象。这对 react 有这么两点意义:

- 1. 保证了 state 的不可被直接更改。
- 2. 便于 shouldComponentUpdate 对比前后对象是否相同。

从而一定的程度上的保证安全性和提提高性能。

这是 Immutable.js 的文档页面:[https://facebook.github.io/immutable-js/](https://facebook.github.io/immutable-js/)

### 其他优化

#### 列表不要使用 index 作为 key
React Diff 算法中 React 会借助元素的 key 值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。
如果使用 index 来作为 key,当数据更新仅仅是数组重新排序或在其中间位置插入新元素,那么视图元素都将重新渲染。

#### 不要在 componentWillMount 中调用 setState

在 componentWillMount 没有意义,所有的 state 初始化应当在 this.state 中定义,而第一次 render 后改变 state 应当在 componentDidMount 中执行。

而且该时间周期钩子在 react v17 版本中将会被移除,查看:https://reactjs.org/docs/react-component.html#mounting

#### 注意动画渲染优化,使用 chrome 调试性能
页面的图像渲染经过如下五个步骤

- script (js 计算)
- style (样式计算)
- layout (布局)
- paint (绘制)
- composite (合成)

具体的讲解与优化请查看 chrome 开发者文档的说明: https://developers.google.com/web/fundamentals/performance/rendering/?hl=zh-cn

## 主要版本变化

#### v3
- 主要使用 webpack v3 + react v16 + react-router v4
- 更改文件结构,组件更新
- Promise 改为 async await
- rem 布局改为 vw、vh,使用 postcss-px-to-viewport 配置
- 动画组件依赖更新至 react-transition-group

#### [v2](https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/webpack1.x)
主要使用 webpack v2 + react v15 + react-router v4

#### [v1](https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/webpack1.x)
主要使用 webpack v1 + react v13 + react-router v2

## 联系我
如有问题请提 issue,或通过以下方式联系到我:
- 邮箱 [email protected]
- 博客 [ferecord.com](http://www.ferecord.com/ "前端记录 ")
- Twitter [@Tumars](https://twitter.com/Tumars)

欢迎指教交流 🙆‍