{"id":14990563,"url":"https://github.com/tumars/boilerplate-webpack-react-es6-cssmodule","last_synced_at":"2025-04-12T02:24:44.273Z","repository":{"id":42218620,"uuid":"58198457","full_name":"tumars/boilerplate-webpack-react-es6-cssModule","owner":"tumars","description":"a boilerplate for Webpack-React-ES6-CssModule project","archived":false,"fork":false,"pushed_at":"2018-05-15T15:21:48.000Z","size":18219,"stargazers_count":62,"open_issues_count":0,"forks_count":20,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-12T02:24:38.268Z","etag":null,"topics":["css-modules","javascript","react","redux","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tumars.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-06T10:03:53.000Z","updated_at":"2023-08-17T19:30:13.000Z","dependencies_parsed_at":"2022-08-27T10:41:59.681Z","dependency_job_id":null,"html_url":"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tumars%2Fboilerplate-webpack-react-es6-cssModule","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tumars%2Fboilerplate-webpack-react-es6-cssModule/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tumars%2Fboilerplate-webpack-react-es6-cssModule/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tumars%2Fboilerplate-webpack-react-es6-cssModule/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tumars","download_url":"https://codeload.github.com/tumars/boilerplate-webpack-react-es6-cssModule/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248506304,"owners_count":21115414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-modules","javascript","react","redux","webpack"],"created_at":"2024-09-24T14:20:22.952Z","updated_at":"2025-04-12T02:24:44.250Z","avatar_url":"https://github.com/tumars.png","language":"JavaScript","readme":"本项目主要作为 react 项目开发的启动模板。使用 webpack v3、react v16、react-router v4，相较旧模板有较大的变化。\n\n\u003e webpack 的具体使用及优化可参考我的博文 [webpack 使用总结](http://www.ferecord.com/webpack-summary.html) 。\n\n\u003c!-- \u003e \u003cdel\u003e组件的使用开发可参考 [ActiUI](https://tumars.github.io/ActiUI/) (自己写的 react component 组件库，该库目前用的仍是 webpack v1 及 react v13，参考就好，以后会更新)。\u003c/del\u003e\n\n\u003e ActiUI 组件太久没更新，还是请直接参考本项目中 module 文件夹内的组件吧。此外推荐饿了么的 [element-react](https://github.com/eleme/element-react)，以及蚂蚁金服的 [Ant Design of React](https://ant.design/docs/react/introduce-cn)。 --\u003e\n\n\n## 主要依赖及工具\n\n![https://github.com/facebook/react](https://img.shields.io/badge/react-v16.2.0-blue.svg)\n![https://reacttraining.com/react-router](https://img.shields.io/badge/react--router-v4.2.0-blue.svg)\n![https://github.com/reactjs/redux](https://img.shields.io/badge/redux-v3.6.1-blue.svg)\n\n![https://github.com/webpack/webpack](https://img.shields.io/badge/webpack-v3.1.0-orange.svg)\n![https://github.com/eslint/eslint](https://img.shields.io/badge/eslint-v4.13.1-orange.svg)\n![https://github.com/babel/babel](https://img.shields.io/badge/babel--loader-v7.0.0-orange.svg)\n![https://github.com/postcss/postcss](https://img.shields.io/badge/postcss--loader-v2.0.9-orange.svg)\n\n\n## 功能\n#### 主要功能\n- [x] Hot Module Replacement 热加载\n- [x] ESLint 检测\n- [x] less、autoprefixer\n- [x] 业务组件使用 cssModule，通用组件使用 BEM 命名法\n- [x] 小于 8k 图片转为 base64\n- [x] svg 图标\n- [x] 文件压缩、添加 MD5\n- [x] ES6+, Fetch\n- [x] 使用 Redux DevTools ([安装浏览器插件](https://github.com/zalmoxisus/redux-devtools-extension))\n\n#### 示例动图：\n\u003cimg src=\"./img/demo.gif\"  alt=\"demo\" width=\"300\"\u003e\n\u003c!-- ![demo](./img/demo.gif) --\u003e\n\n\u003c!-- #### \u003ca href=\"#start\"\u003e开始使用\u003c/a\u003e --\u003e\n\n\n### 组件\n本项目用到的纯组件主要如下：\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-button\"\u003e按钮 Button\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-carousel\"\u003e走马灯 Carousel\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-dialog\"\u003e弹框 Dialog\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-icon\"\u003e图标 Icon\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-infinite-scroll\"\u003e无限滚动 Infinite-Scroll\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-list-loading\"\u003e列表载入 List-Loading\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-result-card\"\u003e结果页 Result-Card\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-segmented\"\u003e分段器 Segmented\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-spin\"\u003e菊花图 Spin\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-steps\"\u003e步骤条 Steps\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-tabs\"\u003e标签页 Tabs\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-time-count\"\u003e倒计时 Time-Count\u003c/a\u003e\n- \u003ca href=\"https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/src/module/mo-toast\"\u003e轻提示 Toast\u003c/a\u003e\n\n这些组件主要展示思路与方法，功能较基础，仅供参考。实际开发生产时请根据业务需求二次开发。\n\n\u003c!-- #### 补充说明\n- \u003ca href=\"#structure\"\u003e目录文件结构说明\u003c/a\u003e\n- 其他技术选择\n\t- \u003ca href=\"#VWVH\"\u003eREM 与 VW、VH\u003c/a\u003e\n\t- \u003ca href=\"#async\"\u003epromise 与 async 函数\u003c/a\u003e\n\t- \u003ca href=\"#Decorator\"\u003eDecorator\u003c/a\u003e\n- 性能优化\n\t- \u003ca href=\"#Reselect\"\u003eReselect\u003c/a\u003e\n\t- \u003ca href=\"#Immutable\"\u003eImmutable\u003c/a\u003e\n\t- \u003ca href=\"#otheropt\"\u003e其他优化\u003c/a\u003e\n\t- \u003ca href=\"#noindex\"\u003e列表不要使用 index 作为 key\u003c/a\u003e\n\t- \u003ca href=\"#nocwa\"\u003e不要在 componentWillAmount 中调用 setState\u003c/a\u003e\n\t- \u003ca href=\"#layout\"\u003e注意动画渲染优化，使用 chrome 调试性能\u003c/a\u003e\n\t- \u003ca href=\"#userpd\"\u003e使用 react-perf-devtool 调试性能\u003c/a\u003e\n --\u003e\n\n\n\n\n## \u003cspan id=\"start\"\u003e开始使用\u003c/span\u003e\n本项目使用`yarn`作为包管理，也可替换为`npm`。两者的差异请参阅[从 npm 客户端迁移](https://yarnpkg.com/zh-Hans/docs/migrating-from-npm)。无论使用哪个都建议将安装源替换为[淘宝镜像](https://npm.taobao.org/)。 \n\n### 安装\n```\ngit clone https://github.com/tumars/boilerplate-webpack-react-es6-cssModule\ncd boilerplate-webpack-react-es6-cssModule\nyarn install\n```\n\n### 开发\n```\nyarn start\n```\n\n访问 `http://localhost:3000/` 查看页面。\n\n![iterm1](./img/iterm1.png)\n\n### mock 接口数据\n\n打开新命令行窗口，执行：\n```\nyarn run mock\n```\n\n接口将会在本地 3003 端口启动。本项目的接口数据通过 node http 服务建立，配置文件在 /mock 文件夹内。\n\n![iterm2](./img/iterm2.png)\n\n### 打包\nWindows 用户使用：\n```\nyarn run build-win\n```\n\nMac 用户使用：\n```\nyarn run build-mac\n```\n\n文件将会在`./dist`文件夹内生成。\n\n\n可以使用`anywhere`工具建立本地服务查看页面：\n```\nyarn global add anywhere 或 npm i -g anywhere\ncd ./dist\nanywhere\n```\n页面会自动打开。\n\n\n##  \u003cspan id=\"structure\"\u003e目录文件结构 \u003c/span\u003e\n![structure](./img/structure.png)\n\n\n## 其他技术选择\n###  \u003cspan id=\"VWVH\"\u003eREM 与 VW、VH \u003c/span\u003e\n之前使用 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) 能通过大部分机型的测试。\n\n\u003e 经测试发现 viewport-units-buggyfill 在处理 base64 背景图片的 vw vh 时会导致图片出错，请注意。\n\n当然使用 rem 布局还是最安全的，提供三个方案：\n\n1. 参考本项目 v2 版本使用 js 控制 html 的 font-size 。\n2. 使用 [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)。\n3. 使用淘宝的 [lib-flexible](https://github.com/amfe/lib-flexible)，这个是最推荐的。\n\n\n###  \u003cspan id=\"async\"\u003easync 函数  \u003c/span\u003e\n本项目中的获取接口数据处的异步处理使用的是 async 函数，相比 Promise 直观、方便了许多。\n\n###  \u003cspan id=\"Decorator\"\u003eDecorator \u003c/span\u003e\n本项目的一些组件使用了 Decorator（修饰器）的写法，例如 module/mo-carousel。以及 css module 也是以 Decorator 的方式使用。\n\n\n## 性能优化\n### \u003cspan id=\"Reselect\"\u003eReselect \u003c/span\u003e\nReselect 库可以创建可记忆的(Memoized)、可组合的 selector 函数。Reselect selectors 可以用来高效地计算 Redux store 里的衍生数据。\n\n使用 Reselect 相当一个缓存，使容器组件传递的 props 输入值不变时输出值不变，以减少显示组件的重复渲染。\n\n本项目的 layout/data-list-tabs 文件内使用了 Reselect。\n\n更多 Reselect 的访问跟介绍请访问：[https://github.com/reactjs/reselect](https://github.com/reactjs/reselect)\n\n### \u003cspan id=\"Immutable\"\u003eImmutable \u003c/span\u003e\nImmutable 是指数据不可变。使用 Immutable 在每次操作修改对象时都会生成一个新对象，而不修改原对象。这对 react 有这么两点意义：\n\n- 1. 保证了 state 的不可被直接更改。\n- 2. 便于 shouldComponentUpdate 对比前后对象是否相同。\n\n从而一定的程度上的保证安全性和提提高性能。\n\n这是 Immutable.js 的文档页面：[https://facebook.github.io/immutable-js/](https://facebook.github.io/immutable-js/)\n\n### \u003cspan id=\"otheropt\"\u003e其他优化 \u003c/span\u003e\n\n#### 列表不要使用 index 作为 key\nReact Diff 算法中 React 会借助元素的 key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。\n如果使用 index 来作为 key，当数据更新仅仅是数组重新排序或在其中间位置插入新元素，那么视图元素都将重新渲染。\n\n#### 不要在 componentWillMount 中调用 setState\n\n在 componentWillMount 没有意义，所有的 state 初始化应当在 this.state 中定义，而第一次 render 后改变 state 应当在 componentDidMount 中执行。\n\n而且该时间周期钩子在 react v17 版本中将会被移除，查看：https://reactjs.org/docs/react-component.html#mounting\n\n#### 注意动画渲染优化，使用 chrome 调试性能\n页面的图像渲染经过如下五个步骤\n\n- script （js 计算）\n- style （样式计算）\n- layout （布局）\n- paint （绘制）\n- composite （合成） \n\n具体的讲解与优化请查看 chrome 开发者文档的说明： https://developers.google.com/web/fundamentals/performance/rendering/?hl=zh-cn\n\n\u003c!-- ### \u003cspan id=\"userpd\"\u003e使用 react-perf-devtool 调试性能\u003c/span\u003e --\u003e\n\n\n\n\n\n\n## 主要版本变化\n\n#### v3\n- 主要使用 webpack v3 + react v16 + react-router v4\n- 更改文件结构，组件更新\n- Promise 改为 async await\n- rem 布局改为 vw、vh，使用 postcss-px-to-viewport 配置\n- 动画组件依赖更新至 react-transition-group\n\n\n#### [v2](https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/webpack1.x)\n主要使用 webpack v2 + react v15 + react-router v4\n\n#### [v1](https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/tree/master/webpack1.x)\n主要使用 webpack v1 + react v13 + react-router v2\n\n\n## 联系我\n如有问题请提 issue，或通过以下方式联系到我：\n - 邮箱 menghui9898@gmail.com\n - 博客 [ferecord.com](http://www.ferecord.com/ \"前端记录 \")\n - Twitter [@Tumars](https://twitter.com/Tumars)\n\n 欢迎指教交流 🙆‍\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftumars%2Fboilerplate-webpack-react-es6-cssmodule","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftumars%2Fboilerplate-webpack-react-es6-cssmodule","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftumars%2Fboilerplate-webpack-react-es6-cssmodule/lists"}