express 熱啟動 靜態文件部署 跨域解決 調試

1.熱啟動

每次修改app.js文件，都得重新啟動項目，十分不方便。這里可以用hotnode插件實現熱啟動

安裝：$ npm install -g hotnode

啟動項目：$ hotnode app.js

2.靜態文件部署

app.use(express.static(__dirname + '/src/static'));指定了src目錄下的static為靜態目錄，__dirname 是app.js的絕對路徑 node自帶的

這樣可以直接訪問到靜態文件 http://localhost:8081/aaa.js 其中aaa.js是放在src目錄下的static的。

可以指定多個目錄為靜態文件夾 如：

app.use(express.static(__dirname + '/src/static1'));

app.use(express.static(__dirname + '/src/static2'));

3.跨域

安裝：$ npm install express-http-proxy --save

使用：

var proxy = require('express-http-proxy');
var app = require('express')();
app.use('/proxy', proxy('www.google.com'));

4.調試

使用命令$ npm install -g node-inspector 安裝。安裝后就可以使用了。

啟動調試項目 $ supervisor --debug app.js

再打開一個控制面板 啟動調試監控 $ node-inspector -p 8081 這時cmd輸出的“http://127.0.0.1:8081/?port=5858”就是調試網址

復制到瀏覽器 打斷點跟js一樣

付上我的app.js文件

//demo.js 文件
var express = require('express'),
    hbs = require('hbs'),
    cookieParser = require('cookie-parser'),
    session = require('express-session'),
    fs = require('fs'),
    http = require('http'),
    app = express();

app.use(cookieParser());
app.use(session({
    secret: '123456',
    cookie: {maxAge: 60 * 1000 * 30},
    resave: false,
    saveUninitialized: true
}));

app.use(express.static(__dirname + '/src/static'));

app.get('/hello', function (req, res) {
    res.send('HELLO');
});

var user = require(__dirname + '/src/server/user.js');
app.get('/login', function (req, res) {
    if (req.session.sign) {//檢查用戶是否登錄
        res.send('welecome <strong>' + req.session.name + '</strong>, 歡迎你再次登錄');
    } else {
        user.login('王沖', '111qqq',function(userInfo){
            req.session.sign = true;
            req.session.name = userInfo.userName;
            res.send('歡迎登錄,' + req.session.name);
        });
    }
});

//app.get('/index', function (req, res) {
//    console.log(__dirname);
//    res.sendFile(__dirname + '/src/views/' + 'index.html');
//});

app.get('/process_get', function (req, res) {
    var response = {
        firstName: req.query.firstName,
        lastName: req.query.lastName
    }
    console.log(response);
    res.end(JSON.stringify(response));
});

hbs.registerPartials(__dirname + '/src/views/partials');
app.set('view engine', 'hbs');
app.set('views', __dirname + '/src/views/');

app.get('/news', function (req, res) {
    var userInfo = {
        userName: req.session.name
    }
    res.render('index', {title: 'hbs news demo', author: 'qujh',userInfo:userInfo});
});


app.get('/about/ygt', function (req, res) {
    res.render('about/test', {title: 'hbs ygt demo', author: 'qujh'});
});

app.get('/about/about', function (req, res) {
    res.render('about/about', {title: 'hbs about demos', author: 'qujh'});
});

var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("應用實例，訪問地址為 http://%s:%s", host, port);
});

附上配置文件 package.json

{
  "name": "expressgulp",
  "version": "1.0.0",
  "description": "express nodeJs hbs模板",
  "main": "app.js",
  "dependencies": {
    "amui-hbs-helper": "^2.2.0",
    "body-parser": "^1.17.1",
    "browser-sync": "^2.18.8",
    "cookie-parser": "^1.4.3",
    "express": "^4.15.2",
    "express-session": "^1.15.2",
    "fs": "0.0.1-security",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-replace": "^0.5.4",
    "gulp-replace-task": "^0.11.0",
    "gulp-seajs-concat": "^1.0.5",
    "gulp-seajs-transport": "^0.4.0",
    "gulp-uglify": "^2.1.2",
    "handlebars": "^4.0.8",
    "hbs": "^4.0.1",
    "jquery": "^3.2.1",
    "merge-stream": "^1.0.1",
    "multer": "^1.3.0",
    "seajs": "^3.0.2",
    "session": "^0.1.0",
    "yargs": "^7.0.2"
  },
  "devDependencies": {
    "http": "0.0.0"
  },
  "scripts": {
    "注釋":"npm run test以debug形式啟動，另打開cmd命令node-inspector -p 8081 啟動斷點調試命令",
    "test": "supervisor --debug app.js",
    "dev": "node app.js"
  },
  "keywords": [
    "express",
    "hbs"
  ],
  "author": "qjh",
  "license": "ISC"
}