第一步:新建Express项目

第一步:新建Express项目

创建一个新目录newedenfaces,进入目录并创建两个空文件 package.jsonserver.js

注:我的OS X终端使用了Monokai主题和oh-my-fish框架以提供Fish 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 React的Flux实现
async 异步流程控制
babel ES6转换为ES5
body-parser 渲染POST请求数据
colors 美化控制台输出结果
compression Gzip压缩
express Node.js Web框架
mongoose MongoDB ODM
morgan HTTP请求日志
react React框架
react-router React路由库
request HTTP请求库
serve-favicon 提供favicon.png
socket.io 显示有多少用户在线
swig 渲染HTML
underscore JS辅助库
xml2js 将XML渲染为JSON

在终端输入npm install安装依赖。

如果你使用Windows,可以使用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文件。

现在你可以在终端输入npm start启动应用,确保Express app没有问题。

注意:你现在可以使用node server.js来直接启动应用,但之后我们将使用Babel来预编译文件,也就是说你需要运行babel-node server.js来启动应用。

现在你应该可以看到终端输出“Express server listening on port 3000.”

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部