Code Monkey home page Code Monkey logo

chinese_checkers's Introduction

Chinese Checkers **跳棋

女朋友最近对这个跳棋游戏有些上瘾啊,想在某东上面买一副跳棋回来陪她下,可是要几十啊,算了,自己写个吧,又不是很难的东西,2333333333。

好吧,我承认,这简单玩意确实可以不需要 React 等全家桶。

目录

详情可参阅 package.json

  • React 15.3.1
  • Redux
  • React Router
  • Fetch
  • Webpack
  • ES6 + Babel
  • Node.js >=6.4.0
  • Socket.io
  • Sass
# 推荐切换到淘宝 npm 源
npm set registry https://registry.npm.taobao.org/

npm install

请升级到 >= node 6.4 + >= npm 3.10 环境

npm run libs

在这个项目中初始化的时候,您必须先运行一次,以获得打包好的 libs; 原因参照:用DllPlugin来优化webpack打包速度

npm run dev
npm run deploy
npm run server

需要注意的是:在开发调试的过程中,默认不用单独启动该服务。在dev模式下已经用子进程启动此服务了。见 config/app.webpack.config.js 130行。

├─build                      # 打包编译出来的app
├─config                     # 配置文件夹
│  ├─app.config.js           # 整个应用的一些配置,包括 xhr、应用信息等的
│  ├─app.webpack.config.js   # 前端中调试开发、打包的 webpack 配置
│  ├─libs.webpack.config.js  # 前端的 libs 配置
│  └─manifest.json           # 前端 libs 打包的缓存信息
├─dist                       # 前端编译的静态资源文件夹
├─doc                        # 文档、项目设计等
├─client                     # 前端开发文件夹
│  ├─assets
│  │  ├─imgs
│  │  └─scss                 # 自制的 ui 组件库
│  ├─components              # 组件,与页面强相关
│  ├─redux                   # redux
│  │  ├─actions 
│  │  ├─reducers 
│  │  └─store 
│  ├─routers                 # router 的集散地,主要 connet
│  ├─services                # 整个应用的服务,主要跟 xhr 相关的
│  ├─utils                   # 公共的一些方法
│  ├─views                   # 主要页面布局,木偶组件
│  ├─app.js                  # app 启动
│  └─index.html              # 静态页面基页
├─server                     # 服务端开发文件夹
├─test                       # 测试
├─.babelrc                   # Babel 转码配置
├─.eslintrc                  # ESLint 配置
├─.gitignore                 # (配置)需被 Git 忽略的文件(夹)
├─package.json               # 不解释
└─README.md                  # 不解释
  • 本示例项目秉承最佳实践,地实现代码分离/复用
  • 优化目录结构,更好的模块分离
  • 引入服务层统一管理 XHR 请求(Fetch 实现)
  • 引入 路径别名 实现优雅的加载模式
  • 引入 React Hot Reload,支持热替换
  • 使用 Sode.js 粗略实现了一套类 Express (天差地别的,但好歹是自己实现的)
  • 使用 Socket.io 支持在线对战

HTML/CSS 参考

CSS 开发规范

详情可参阅 .eslintrc JavaScript 编码规范

commit ####Type explain

feat | 新功能
fix | 修补bug
docs | 文档(documentation)
style | 格式(不影响代码运行的变动)
refactor | 重构(即不是新增功能,也不是修改bug的代码变动)
test | 增加测试
chore | 构建过程或辅助工具的变动

####Example

git commit -m "<type>(<scope>): <subject>"
# practical examples
git commit -m 'docs: 增加了git msg规范'

###包含功能

  • 重来
  • 悔棋

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.