使用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,這是什麼鬼，這個函數哪裏來的，這個庫是幹嗎用的，這裏這麼寫究竟是爲了什麼",因此當你把過程當中的這些疑問都搞清楚了，纔是真正的提升了，光看不少細節是注意不到的。

對原有的改動

抄代碼是好，可是最好在原來的基礎上加點本身的相法，因此我作的改動主要有以下

1. 把全部不是用ES6的代碼所有改爲ES6的

2. 用數據庫從mongodb 改爲了mysql

3. 用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開發一個角色投票應用的學習過程（二）