基于 React 和 Redux 最佳实践构建的 2048 游戏。
👉 开始游戏
- react，组件式构建 UI
- redux，管理应用状态
- babel，把 es2017+ 语法转成 es5 兼容语法
- webpack，代码热加载，scss 样式文件处理，组件打包编译等等
- scss，成熟的 css 预处理器（之所以没有用 CssInJS 的方案是因为这些方案普遍不完美，也考虑到要遵循样式和结构分离的原则）
- eslint，使用流行的 airbnb 的代码规范严格约束代码风格
- stylelint，scss 代码风格检查
- jest，fb 出品的代码测试框架，snapshot 功能对测试 react 组件 UI 十分方便
- Prettier,js 和 scss 代码格式美化工具
- PWA(Progressive Web Apps),借助浏览器 service worker 能力，使 web 应用在移动平台有接近原生应用的能力，可离线使用，接收通知消息等等
建议使用 yarn 来管理依赖包。
git clone git@github.com:devrsi0n/React-2048-game.git
cd React-2048-game
yarn # 安装依赖包
yarn start # 开启调试模式
yarn test # 自动测试
yarn build # 打包代码- 在调烟花动画的时候发现没效果，仔细对比了下 webpack 编译后的 css 文件发现所有的 @keyframes 的名字都加了 hash 值（也就是当成普通的局部 css 类名），解决办法就是在 @keyframes 的名字前面和整个 scss 文件添加伪类 :global，可以参考烟花的 scss 文件，这不是完美的解决办法(css 类名不再有局部特性)，后续再深挖一下。