摘要：本項目是對使用開發一個角色投票應用的學習過程。到這里為止沒有遇到多大的坑，最多的往往是拼寫錯誤引起的問題，唯一由于拼寫導致，但不提示錯誤的是我打成了運行的時候服務器一直沒有響應，找了好久才找到這個錯誤后篇使用開發一個角色投票應用的學習過程二

本項目是對使用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開發一個角色投票應用的學習過程（二）