第一步：新建Express項目 · 使用React、Node.js、MongoDB、Socket.IO開發一個角色投票應用

## 第一步：新建Express項目創建一個新目錄newedenfaces，進入目錄并創建兩個空文件?*package.json*和*server.js*： ![](https://box.kancloud.cn/2015-09-14_55f641e9f153c.jpg) 注：我的OS X終端使用了[Monokai](https://github.com/stephenway/monokai.terminal)主題和[oh-my-fish](https://github.com/oh-my-fish/oh-my-fish)框架以提供[Fish](http://fishshell.com/)?shell. 打開*package.json*并粘貼下面的代碼： ~~~ { "name": "newedenfaces", "description": "Character voting app for EVE Online", "version": "1.0.0", "repository": { "type": "git", "url": "https://github.com/sahat/newedenfaces-react" }, "main": "server.js", "scripts": { "start": "babel-node server.js", "watch": "nodemon --exec babel-node -- server.js" }, "dependencies": { "alt": "^0.17.1", "async": "^1.4.0", "babel": "^5.6.23", "body-parser": "^1.13.2", "colors": "^1.1.2", "compression": "^1.5.1", "express": "^4.13.1", "mongoose": "^4.0.7", "morgan": "^1.6.1", "react": "^0.13.3", "react-router": "^0.13.3", "request": "^2.58.0", "serve-favicon": "^2.3.0", "socket.io": "^1.3.6", "swig": "^1.4.2", "underscore": "^1.8.3", "xml2js": "^0.4.9" }, "devDependencies": { "babelify": "^6.1.3", "bower": "^1.4.1", "browserify": "^11.0.0", "gulp": "^3.9.0", "gulp-autoprefixer": "^2.3.1", "gulp-concat": "^2.6.0", "gulp-cssmin": "^0.1.7", "gulp-if": "^1.2.5", "gulp-less": "^3.0.3", "gulp-plumber": "^1.0.1", "gulp-streamify": "0.0.5", "gulp-uglify": "^1.2.0", "gulp-util": "^3.0.6", "vinyl-source-stream": "^1.1.0", "watchify": "^3.3.0" }, "license": "MIT" } ~~~ 這是我們的應用所需要的所有依賴包，簡要介紹如下： | 包名稱 | 描述 | | --- | --- | | [alt](https://github.com/goatslacker/alt) | React的Flux實現 | | [async](https://github.com/caolan/async) | 異步流程控制 | | [babel](http://babeljs.io/) | ES6轉換為ES5 | | [body-parser](https://github.com/expressjs/body-parser) | 渲染POST請求數據 | | [colors](https://github.com/marak/colors.js/) | 美化控制臺輸出結果 | | [compression](https://github.com/expressjs/compression) | Gzip壓縮 | | [express](http://expressjs.com/) | Node.js Web框架 | | [mongoose](http://mongoosejs.com/) | MongoDB ODM | | [morgan](https://github.com/expressjs/morgan) | HTTP請求日志 | | [react](http://facebook.github.io/react/) | React框架 | | [react-router](https://github.com/rackt/react-router) | React路由庫 | | [request](https://github.com/request/request) | HTTP請求庫 | | [serve-favicon](https://github.com/expressjs/serve-favicon) | 提供*favicon.png* | | [socket.io](http://socket.io/) | 顯示有多少用戶在線 | | [swig](http://paularmstrong.github.io/swig/) | 渲染HTML | | [underscore](http://underscorejs.org/) | JS輔助庫 | | [xml2js](https://github.com/Leonidas-from-XIV/node-xml2js) | 將XML渲染為JSON | 在終端輸入`npm install`安裝依賴。 ![](https://box.kancloud.cn/2015-09-14_55f641ea26cd5.jpg) > 如果你使用Windows，可以使用[cmder](http://bliker.github.io/cmder)控制臺模擬器，可以達到接近OS X/Linux終端的效果。打開*server.js*粘貼下面代碼，下面是最基礎的Express應用，足夠我們開始了。 ~~~ 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')); }); ~~~ > 注意：盡管我們將使用ES6編寫React app，但在這兒我還是決定使用ES5，因為這段代碼從兩年前到現在基本沒有變過。并且，如果你第一次使用ES6，至少這個Express app對你來說還算熟悉。然后，新建文件夾public，這里是我們放文件如圖片、字體，以及壓縮后的CSS和JS文件。 ![](https://box.kancloud.cn/2015-09-14_55f641ea941d5.jpg) 現在你可以在終端輸入`npm start`啟動應用，確保Express app沒有問題。 > 注意：你現在可以使用`node server.js`來直接啟動應用，但之后我們將使用Babel來預編譯文件，也就是說你需要運行`babel-node server.js`來啟動應用。現在你應該可以看到終端輸出“Express server listening on port 3000.”