tumars / Boilerplate Webpack React Es6 Cssmodule

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

webpack 的具体使用及优化可参考我的博文 webpack 使用总结 。

主要依赖及工具

功能

主要功能

• [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 (安装浏览器插件)

示例动图：

组件

本项目用到的纯组件主要如下：

• 按钮 Button
• 走马灯 Carousel
• 弹框 Dialog
• 图标 Icon
• 无限滚动 Infinite-Scroll
• 列表载入 List-Loading
• 结果页 Result-Card
• 分段器 Segmented
• 菊花图 Spin
• 步骤条 Steps
• 标签页 Tabs
• 倒计时 Time-Count
• 轻提示 Toast

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

开始使用

本项目使用yarn作为包管理，也可替换为npm。两者的差异请参阅从 npm 客户端迁移。无论使用哪个都建议将安装源替换为淘宝镜像。

安装

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

开发

yarn start

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

mock 接口数据

打开新命令行窗口，执行：

yarn run mock

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

打包

Windows 用户使用：

yarn run build-win

Mac 用户使用：

yarn run build-mac

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

可以使用anywhere工具建立本地服务查看页面：

yarn global add anywhere 或 npm i -g anywhere
cd ./dist
anywhere

页面会自动打开。

目录文件结构

其他技术选择

REM 与 VW、VH

之前使用 rem 布局，后来看了再聊移动端页面的适配,决定使用 vw、vh 布局，配合 postcss-px-to-viewport和 viewport-units-buggyfill 能通过大部分机型的测试。

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

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

1. 参考本项目 v2 版本使用 js 控制 html 的 font-size 。
2. 使用 postcss-pxtorem。
3. 使用淘宝的 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

Immutable

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

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

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

这是 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

主要使用 webpack v2 + react v15 + react-router v4

v1

主要使用 webpack v1 + react v13 + react-router v2

联系我

如有问题请提 issue，或通过以下方式联系到我：

• 邮箱 [email protected]
• 博客 ferecord.com
• Twitter @Tumars

欢迎指教交流 🙆‍