让你的Express项目自动刷新浏览器，开发更轻松！

使用 browserSync 提升 Express 项目开发效率

在前端开发中，反复修改代码并刷新浏览器来查看效果是一项耗时的工作。Express 项目也不例外，其本身不具备修改代码后自动刷新浏览器的功能。为了解决这一痛点，我们可以使用一款强大的工具 - browserSync 。

browserSync 的优势

browserSync 可以通过创建一个代理服务器来帮助开发人员实现修改代码后浏览器自动刷新。它将代码更改推送到代理服务器，然后由代理服务器将更改发送到所有连接的浏览器。这样，开发人员就可以实时看到代码更改后的效果，而无需手动刷新浏览器。

安装 browserSync

要在 Express 项目中使用 browserSync，首先需要安装它。可以使用 npm 或 yarn 来安装，具体步骤如下：

npm install browser-sync --save-dev

或

yarn add browser-sync --dev

配置 browserSync

在 Express 项目中配置 browserSync 非常简单。在项目根目录创建一个名为 browser-sync.config.js 的文件，并添加以下内容：

const browserSync = require('browser-sync').create();

browserSync.init({
  server: {
    baseDir: './public'
  }
});

在上面的配置中，server.baseDir 指定了需要监视的目录。当该目录下的文件发生更改时，browserSync 会自动刷新浏览器。

启动 browserSync

配置好 browserSync 后，就可以启动它了。有两种方式可以启动 browserSync：

1. 在命令行中运行以下命令：

npm start

或

yarn start

2. 在项目根目录下的 package.json 文件中添加以下脚本：

"scripts": {
  "start": "browser-sync start --config browser-sync.config.js"
}

然后在命令行中运行以下命令：

npm run start

或

yarn run start

效果展示

启动 browserSync 后，当代码发生更改时，浏览器会自动刷新。

总结

使用 browserSync 可以轻松实现 Express 项目修改代码后浏览器自动刷新，大大提高开发效率。希望这篇文章对大家有所帮助。

常见问题解答

Q1：如何自定义 browserSync 的端口号？

const browserSync = require('browser-sync').create();

browserSync.init({
  server: {
    baseDir: './public'
  },
  port: 8080 // 自定义端口号
});

Q2：如何只刷新更改的部分内容？

默认情况下，browserSync 会在文件发生任何更改时刷新整个页面。我们可以使用 reloadOnSameFile 选项仅刷新更改的部分内容。

const browserSync = require('browser-sync').create();

browserSync.init({
  server: {
    baseDir: './public'
  },
  reloadOnSameFile: true
});

Q3：如何忽略某些文件或目录？

我们可以使用 exclude 选项忽略某些文件或目录。

const browserSync = require('browser-sync').create();

browserSync.init({
  server: {
    baseDir: './public'
  },
  exclude: ['**/node_modules/** ', '**/dist/** ']
});

Q4：如何使用 UI 来控制 browserSync？

browserSync 提供了一个 UI，可以用来控制其功能。我们可以使用 ui 选项启用 UI。

const browserSync = require('browser-sync').create();

browserSync.init({
  server: {
    baseDir: './public'
  },
  ui: {
    port: 3000
  }
});

Q5：如何使用代理服务器？

browserSync 还可以用作代理服务器。这在开发需要后端服务的项目时非常有用。

const browserSync = require('browser-sync').create();

browserSync.init({
  proxy: 'localhost:3000' // 后端服务地址
});