介绍
egg-browsersync
是一款基于 egg
框架的实时刷新工具。它能够自动监控文件变化,并刷新浏览器页面。这个工具的依赖于 browsersync
。browsersync
是一款基于 Node.js 的自动化浏览器同步测试工具。
安装
安装步骤如下:
- 全局安装
egg-bin
--- ------- ------- --
- 初始化项目
-------- ----------- -------------
- 安装
egg-browsersync
-- ----------- --- ------- --------------- ----------
配置
在 egg 项目的 config.default.js
中配置 egg-browsersync
:
------------------- - - ------- ----- -------- ----------------- --
然后,你可以可以在 egg 项目的根目录下创建 config.browsersync.js
文件,配置 browsersync
。
-------------- - --- -- -- --------------- -------- ----- ------- -------- --------------- ------------- - -------- ------- - ---
以上示例配置了:
fileExtensions
表示监视的文件扩展名;folders
表示监视的文件夹;watchOptions
可以用来配置其他的选项,比如忽略某些文件或文件夹。
使用
在启动项目时,会自动开启 browsersync
服务。你可以使用以下命令启动项目:
--- --- ---
运行后打开 http://127.0.0.1:7001/
就可以在浏览器中查看到你的项目。
当你修改项目中的文件时,browsersync
会自动监视变化并刷新页面。你无需手动刷新浏览器。
示例代码
以下是一个示例启用 egg-browsersync
的 config.default.js
:
------------------- - - ------- ----- -------- ----------------- --
以下是示例配置 config.browsersync.js
:
-------------- - --- -- -- --------------- -------- ----- ------- -------- --------------- ------------- - -------- ------- - ---
启动项目:
--- --- ---
以上就是使用 npm
包 egg-browsersync
的教程,希望对你有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005590881e8991b448d665a