一、背景和意义

使用过Vue开发时，都会觉得修改代码之后浏览器自动更新是一个比较方便的特性。但包括Express在内的很多框架本身不自带修改代码后浏览器自动刷新的功能，如果每次修改之后再按一下F5刷新，还是感觉不太方便。这种情况下可以引用第三方工具browserSync实现修改代码后浏览器自动刷新，本文将相关的Demo示例。

二、示例代码

先通过命令行创建一个简单的express项目，该项目使用ejs模板引擎：

bash 复制代码

echo '{}' > package.json
npm install express ejs --save

接下来添加入口文件index.js，其代码如下：

javascript 复制代码

const express = require("express");
const app = express();

app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/", (req, res) => res.render("index", {"title": "HelloWorld"}));

app.listen(8000);

再添加ejs模板文件：

javascript 复制代码

<!DOCTYPE html>
<html>
    <body>
        <h1><%= title %></h1>
    </body>
</html>

用nodemon运行index.js（如果还没有安装nodemon，需要执行npm install -g nodemon安装）：

bash 复制代码

nodemon index.js

执行之后访问http://localhost:8000，将看到如下页面：

此时修改项目代码文件之后，nodemon会重启，但浏览器端不会自动刷新。要让浏览器自动刷新，需要安装browser-sync：

bash 复制代码

npm install -g browser-sync

接下来在刚才的项目目录下运行browser-sync：

bash 复制代码

browser-sync start --proxy "localhost:8000" --files "**"

运行该命令时，browser-sync会让浏览器会自动打开一个新的地址localhost:3000，其内容如下：

注意，页面右上角会有一段提示文字：Browsersync: connected，如果没有这一段文件则说明browser-sync并没有正常工作。此时再修改index.js文件，可以看到修改完成之后，浏览器会自动刷新页面：

三、需要注意的问题

打开地址http://localhost:3000/时，用浏览器的开发者工具查看页面HTML源码，可以看到browser-sync在页面中增加了一段代码：

这段代码是接在body后面，如果把index.ejs改成比较简陋的没有body的代码：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
  </head>
  <h1><%= title %></h1>
</html>

浏览器也是可以正常运行和展示的，但是browser-sync并没有往页面中添加应有的代码：

此时browser-sync并未生效，修改代码之后浏览器不会自动刷新。

Express项目实现修改代码后浏览器自动刷新

一、背景和意义

二、示例代码

三、需要注意的问题