摘要：本項(xiàng)目是對(duì)使用開發(fā)一個(gè)角色投票應(yīng)用的學(xué)習(xí)過程。到這里為止沒有遇到多大的坑，最多的往往是拼寫錯(cuò)誤引起的問題，唯一由于拼寫導(dǎo)致，但不提示錯(cuò)誤的是我打成了運(yùn)行的時(shí)候服務(wù)器一直沒有響應(yīng)，找了好久才找到這個(gè)錯(cuò)誤后篇使用開發(fā)一個(gè)角色投票應(yīng)用的學(xué)習(xí)過程二

本項(xiàng)目是對(duì)使用React、Node.js、MongoDB、Socket.IO開發(fā)一個(gè)角色投票應(yīng)用的學(xué)習(xí)過程。

英文原文:Create a character voting app using React, Node.js, MongoDB and Socket.IO 
原項(xiàng)目github

要想系統(tǒng)的學(xué)習(xí)些新東西，網(wǎng)上看了很多代碼片段，但很少有這樣完整的一個(gè)系統(tǒng)來學(xué)習(xí)，基實(shí)我本來是比較偏向Vue的但是看到了這個(gè)文章，太全面了，對(duì)于想入門的人來說，方方面面都有，有前端，有后端，所以忍不住想把它提供的代碼全敲一遍。敲代碼的過程，雖然只是個(gè)抄的過程，但比光看要很很多，有的時(shí)候往往看人家代碼的時(shí)候，感覺是這樣的，"哦，就是這樣的啊.so easy,不過如此嗎~"，但一句一句去敲的時(shí)候，感覺就是這樣的，"WTF,這是什么鬼，這個(gè)函數(shù)哪里來的，這個(gè)庫(kù)是干嘛用的，這里這么寫到底是為了什么",所以當(dāng)你把過程中的這些疑問都搞清楚了，才是真正的提高了，光看很多細(xì)節(jié)是注意不到的。

抄代碼是好，但是最好在原來的基礎(chǔ)上加點(diǎn)自己的相法，所以我做的改動(dòng)主要有如下

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

用數(shù)據(jù)庫(kù)從mongodb 改成了mysql

用waterline替換mongoose操作數(shù)據(jù)庫(kù)

改動(dòng)后的代碼，我也全發(fā)布在github上了,還沒改完，我會(huì)不定期commit的
https://github.com/papersnake/newdenfaces-es6

對(duì)ES6學(xué)也的也不深，改了這么多也發(fā)現(xiàn)語法上也只用到了import let const 和=>,希望大家提出更多的改進(jìn)意見
原文第一步的代碼

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"));
});

為了能讓它跑起來，要在原有依賴的基礎(chǔ)上添加

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

有幾個(gè)依賴是后面才用到的，我這里一并安裝了
在根目錄新建一個(gè).babelrc文件

{
  "presets": [
    "es2015"
  ]
}

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

為了節(jié)省篇幅，有些全篇的代碼我就不粘貼，給出連接吧 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"]);

由于到現(xiàn)在為止，還沒有做其他工作，所以看不到打包的實(shí)際效果， 但是也是要控制臺(tái)下運(yùn)行一下gulp 看看有沒有語法錯(cuò)誤。

到這里為止沒有遇到多大的坑，最多的往往是拼寫錯(cuò)誤引起的問題，唯一由于拼寫導(dǎo)致，但不提示錯(cuò)誤的是

app.use(bodyParser.json());

我打成了

app.use(bodyParser.json);

運(yùn)行的時(shí)候服務(wù)器一直沒有響應(yīng)，找了好久才找到這個(gè)錯(cuò)誤

使用React、Node.js、MongoDB、Socket.IO開發(fā)一個(gè)角色投票應(yīng)用的學(xué)習(xí)過程（二）