Express 结合 browser-sync with node

Question

我是 JavaScript 世界的新手，我第一次尝试构建我的开发环境，我想实现的目标应该很简单...

我想运行一个 Express 服务器连同浏览器同步以进行热重载我没有使用 gulp 或 g运行t

但我一直收到此错误:

Starting the application in the development mode...
[BS] Proxying: http://localhost:3000
[BS] Access URLs:
 ------------------------------------
    Local: http://localhost:3000
 External: http://10.111.234.196:3000
 ------------------------------------
[BS] Watching files...
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::3000

这是我的脚本在 package.jason 文件中的样子

"scripts": {
"prestart": "babel-node buildScripts/startMessage.js",
"start": "npm-run-all --parallel security-check open:src",
"open:src": "babel-node buildScripts/srcServer.js & browser-sync start --proxy 'localhost:3000' --files 'src' --no-ui",
"security-check": "nsp check"
},

在 srcServer.js 中：

import express from 'express';
import path  from 'path';
import open  from 'open';

const port = 3000;
const app = express();


app.get('/', function(request, response){
response.sendFile(path.join(__dirname, '../src/index.html'));
});

app.listen(port, function(err){
if(err){
console.log(err);
}else{
open('http://localhost:'+ port)
}
});

bs-config.js 文件中的默认文件是我刚刚将 ui 更改为 false

给了我使用代理的提示，但我仍然收到错误，我不知道为什么...请赐教我我想了解问题所在

Answer 1

该错误意味着您已经在端口 3000 上有一些东西运行。可能是同一个项目运行在另一个 window 中的另一个实例。 :)

Answer 2

我遇到了类似的问题。看起来 BrowserSync 不再与同一端口上的 Express 一起工作。我设法运行使用 connect-browser-sync 中间件将它们都放在不同的端口上。

这是我的server.js:

var express = require('express'),
    bodyParser = require('body-parser'),
    http = require('http'),
    path = require('path'),
    cors = require('cors');


// Express server
var app = module.exports = express();
app.set('port', process.env.PORT || 3000);


// BrowserSync at development host
if (app.get('env') === 'development') {
    var browserSync = require('browser-sync'),
    var bsconf = {
        host: 'localhost',
        port: 3001,
        https: false,
        notify: false,
        open: false,
        online: false,
        ui: false,
        server: {
            baseDir: path.join(__dirname, '/public')
        },
        files: [path.join(__dirname, '/public/**/*.{html,css,js,json}')]
    };  
    var bs = browserSync.create().init(bsconf);

    app.use(require('connect-browser-sync')(bs));
}

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(cors());


// Route index.html
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});


// Starting express server
http.createServer(app).listen(app.get('port'), function () {
    console.log('Listening on port ' + app.get('port') + '...');
});

在端口 3000 上有一个 Express 服务器（没有页面自动重新加载）。在端口 3001 上有 BrowserSync 服务器提供与页面自动重新加载相同的内容。

Answer 3

我不知道为什么没有 npm-run-all browser-sync 自动将端口转移到 3001。在我尝试使用 npm-run-all 之后它似乎没有自动转移端口。所以我认为你必须这样指定它：

"browser-sync": "browser-sync start--proxy=localhost:3000 --port=3001 --files=views"

或者至少对我有用:)

Express 结合 browser-sync with node

Express combined with browser-sync with node

javascript

automation

node.js

express

browser-sync