使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（一

摘要：本项目是对使用开发一个角色投票应用的学习过程。到这里为止没有遇到多大的坑，最多的往往是拼写错误引起的问题，唯一由于拼写导致，但不提示错误的是我打成了运行的时候服务器一直没有响应，找了好久才找到这个错误后篇使用开发一个角色投票应用的学习过程二

本项目是对使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程。

英文原文:Create a character voting app using React, Node.js, MongoDB and Socket.IO 
原项目github

要想系统的学习些新东西，网上看了很多代码片段，但很少有这样完整的一个系统来学习，基实我本来是比较偏向Vue的但是看到了这个文章，太全面了，对于想入门的人来说，方方面面都有，有前端，有后端，所以忍不住想把它提供的代码全敲一遍。敲代码的过程，虽然只是个抄的过程，但比光看要很很多，有的时候往往看人家代码的时候，感觉是这样的，"哦，就是这样的啊.so easy,不过如此吗~"，但一句一句去敲的时候，感觉就是这样的，"WTF,这是什么鬼，这个函数哪里来的，这个库是干嘛用的，这里这么写到底是为了什么",所以当你把过程中的这些疑问都搞清楚了，才是真正的提高了，光看很多细节是注意不到的。

抄代码是好，但是最好在原来的基础上加点自己的相法，所以我做的改动主要有如下

把所有不是用ES6的代码全部改成ES6的

用数据库从mongodb 改成了mysql

用waterline替换mongoose操作数据库

改动后的代码，我也全发布在github上了,还没改完，我会不定期commit的
https://github.com/papersnake/newdenfaces-es6

对ES6学也的也不深，改了这么多也发现语法上也只用到了import let const 和=>,希望大家提出更多的改进意见
原文第一步的代码

var express = require("express");
var path = require("path");
var logger = require("morgan");
var bodyParser = require("body-parser");

var app = express();

app.set("port", process.env.PORT || 3000);
app.use(logger("dev"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "public")));

app.listen(app.get("port"), function() {
  console.log("Express server listening on port " + app.get("port"));
});

改写后，变成

import express    from "express";
import path       from "path";
import logger     from "morgan";
import bodyParser from "body-parser";

let app = express();

app.set("port",process.env.PORT || 3000);
app.use(logger("dev"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "public")));

app.listen(app.get("port"),() => {
    console.log("Express server listening on port " + app.get("port"));
});

为了能让它跑起来，要在原有依赖的基础上添加

npm install --save-dev babel-cli,babel-core,babel-preset-es2015,babel-preset-react,babel-register

有几个依赖是后面才用到的，我这里一并安装了
在根目录新建一个.babelrc文件

{
  "presets": [
    "es2015"
  ]
}

用babel-node server.js 就要以跑起来了

为了节省篇幅，有些全篇的代码我就不粘贴，给出连接吧 gulpfile.js

gulp 从3.9.0开始支持babel，但是要把文件名改为gulpfile.babel.js
改写后的代码

import gulp from "gulp";
import gutil from "gulp-util";
import gulpif from "gulp-if";
import streamify from "gulp-streamify";
import autoprefixer from "gulp-autoprefixer";
import cssmin from "gulp-cssmin";
import less from "gulp-less";
import concat from "gulp-concat";
import plumber from "gulp-plumber";
import source from "vinyl-source-stream";
import babelify from "babelify";
import browserify from "browserify";
import watchify from "watchify";
import uglify from "gulp-uglify";

const production = process.env.NODE_ENV === "production";

const dependencies = [
    "alt",
    "react",
    "react-router",
    "underscore"
];

/*
 |--------------------------------------------------------------------------
 | Combine all JS libraries into a single file for fewer HTTP requests.
 |--------------------------------------------------------------------------
 */
gulp.task("vendor",()=>
    gulp.src([
        "bower_components/jquery/dist/jquery.js",
        "bower_components/bootstrap/dist/bootstrap.js",
        "bower_components/magnific-popup/dist/jquery.magnific-popup.js",
        "bower_components/toastr/toastr.js"
        ]).pipe(concat("vendor.js"))
          .pipe(gulpif(production,uglify({ mangle:false })))
          .pipe(gulp.dest("public/js"))
    );


/*
 |--------------------------------------------------------------------------
 | Compile third-party dependencies separately for faster performance.
 |--------------------------------------------------------------------------
 */
gulp.task("browserify-vendor", () =>
  browserify()
    .require(dependencies)
    .bundle()
    .pipe(source("vendor.bundle.js"))
    .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
    .pipe(gulp.dest("public/js"))
);

/*
 |--------------------------------------------------------------------------
 | Compile only project files, excluding all third-party dependencies.
 |--------------------------------------------------------------------------
 */
gulp.task("browserify", ["browserify-vendor"], () =>
  browserify("app/main.js")
    .external(dependencies)
    .transform(babelify,{ presets: ["es2015", "react"]}) //注意这里，只有加上presets配置才能正常编译
    .bundle()
    .pipe(source("bundle.js"))
    .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
    .pipe(gulp.dest("public/js"))
);

/*
 |--------------------------------------------------------------------------
 | Same as browserify task, but will also watch for changes and re-compile.
 |--------------------------------------------------------------------------
 */
gulp.task("browserify-watch", ["browserify-vendor"], () =>{
  var bundler = watchify(browserify("app/main.js", watchify.args));
  bundler.external(dependencies);
  bundler.transform(babelify,{ presets: ["es2015", "react"]});
  bundler.on("update", rebundle);
  return rebundle();

  function rebundle() {
    var start = Date.now();
    bundler.bundle()
      .on("error", function(err) {
        gutil.log(gutil.colors.red(err.toString()));
      })
      .on("end", function() {
        gutil.log(gutil.colors.green("Finished rebundling in", (Date.now() - start) + "ms."));
      })
      .pipe(source("bundle.js"))
      .pipe(gulp.dest("public/js/"));
  }
});


/*
 |--------------------------------------------------------------------------
 | Compile LESS stylesheets.
 |--------------------------------------------------------------------------
 */
gulp.task("styles", () =>
  gulp.src("app/stylesheets/main.less")
    .pipe(plumber())
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(gulpif(production, cssmin()))
    .pipe(gulp.dest("public/css"))
);

gulp.task("watch", () =>{
  gulp.watch("app/stylesheets/**/*.less", ["styles"]);
});

gulp.task("default", ["styles", "vendor", "browserify-watch", "watch"]);
gulp.task("build", ["styles", "vendor", "browserify"]);

由于到现在为止，还没有做其他工作，所以看不到打包的实际效果， 但是也是要控制台下运行一下gulp 看看有没有语法错误。

到这里为止没有遇到多大的坑，最多的往往是拼写错误引起的问题，唯一由于拼写导致，但不提示错误的是

app.use(bodyParser.json());

我打成了

app.use(bodyParser.json);

运行的时候服务器一直没有响应，找了好久才找到这个错误

使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（二）