npm 包 egg-browsersync 使用教程

介绍

egg-browsersync 是一款基于 egg 框架的实时刷新工具。它能够自动监控文件变化，并刷新浏览器页面。这个工具的依赖于 browsersync。browsersync 是一款基于 Node.js 的自动化浏览器同步测试工具。

安装

安装步骤如下：

1. 全局安装 egg-bin

npm install egg-bin -g

1. 初始化项目

egg-init egg-example --type=simple

1. 安装 egg-browsersync

cd egg-example
npm install egg-browsersync --save-dev

配置

在 egg 项目的 config.default.js 中配置 egg-browsersync：

exports.browsersync = {
  enable: true,
  package: "egg-browsersync"
};

然后，你可以可以在 egg 项目的根目录下创建 config.browsersync.js 文件，配置 browsersync。

module.exports = app => ({
  fileExtensions: ["html", "js", "css"],
  folders: ["app/assets"],
  watchOptions: {
    ignored: "*.txt"
  }
});

以上示例配置了：

• fileExtensions 表示监视的文件扩展名；
• folders 表示监视的文件夹；
• watchOptions 可以用来配置其他的选项，比如忽略某些文件或文件夹。

使用

在启动项目时，会自动开启 browsersync 服务。你可以使用以下命令启动项目：

npm run dev

运行后打开 http://127.0.0.1:7001/ 就可以在浏览器中查看到你的项目。

当你修改项目中的文件时，browsersync 会自动监视变化并刷新页面。你无需手动刷新浏览器。

示例代码

以下是一个示例启用 egg-browsersync 的 config.default.js：

exports.browsersync = {
  enable: true,
  package: "egg-browsersync"
};

以下是示例配置 config.browsersync.js：

module.exports = app => ({
  fileExtensions: ["html", "js", "css"],
  folders: ["app/assets"],
  watchOptions: {
    ignored: "*.txt"
  }
});

启动项目：

npm run dev

以上就是使用 npm 包 egg-browsersync 的教程，希望对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590881e8991b448d665a