@lwxyfer 2016-03-07T00:31:45.000000Z 字数 2733 阅读 1493

24小时 chatroom

先说技术实现：

后端： Node.js + socket.io
前端： React + redux + socket(client) + babel

环境配置

https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
http://blog.xebia.com/unlocking-es2015-features-with-webpack-and-babel/
http://zhuanlan.zhihu.com/FrontendMagazine/20522487 学习
http://wwsun.github.io/posts/react-with-es6-part-1.html?utm_source=tuicool&utm_medium=referral
https://segmentfault.com/a/1190000004506929
http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Node.js

熟悉Node.js

目前不用管

webpack

更多需求：

Path 路径设置
server-dev 服务器设置
hot 热插拔设置或者 react-transform

websocket：

WebSocket是HTML5开始提供的一种在单个TCP 连接上进行全双工通讯的协议。
https://www.zhihu.com/question/20215561 讨论
http://javascript.ruanyifeng.com/htmlapi/websocket.html
http://www.html5rocks.com/zh/tutorials/websockets/basics/
https://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/

直接使用socket.io 作为通信中间，不做过多细节探讨。

socket.io ws断开：

npm

各种命令

设置npm命令
为了能每一次都非常简单的使用编译命令，你可以更新你的 package.json 文件去为Babel加一个构建命令。在 package.json 的 script 对象你可以如下添加构建命令。
"scripts": {
  "build": "babel -w code/ -d build -s"
}
现在，我们运行：
npm run build

npm自定义命令

npm的各种命令： --save -dev 这些怎么设置，怎么直接与webpack关联。

https://coderwall.com/p/lwfndg/use-npm-start-to-launch-node-app just npm start

http://javascript.ruanyifeng.com/nodejs/npm.html

Babel

https://babeljs.io/docs/setup/#webpack 官方基本配置，完成加载 ES2015.js 、 react.jsx 两个加载器，不用使用react的jsx加载器。

https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md 文档

 npm install --save-dev babel-loader babel-core
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react

loader: webpack配置

{
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }