npm 包 browser-refresh 使用教程

在前端开发领域中,实时刷新网页是一个很重要的功能,可以提高开发效率。browser-refresh 是一款用于实现浏览器自动刷新的 npm 包,其使用方法如下。

安装和启动

首先,在项目根目录下执行以下命令安装 browser-refresh:

--- ------- -- ---------------

安装完成后,进入到需要实现自动刷新的 HTML 页面所在目录下,并运行以下命令启动 browser-refresh:

--------------- ----------

其中 index.html 为需要实现自动刷新的 HTML 页面名称。执行该命令后,会在控制台输出如下信息:

------- ------- ------ -------- ----------------------
-------- --------- -------------------
----- ----- -- -----

此时,可以在浏览器中打开 http://localhost:9988/,并进行开发工作。如果修改了 HTML、CSS 或 JavaScript 文件,则浏览器会自动刷新并显示最新结果。

高级用法

除了基本的启动命令外,browser-refresh 还支持一些高级用法,如下所述。

监听多个文件

如果需要同时监听多个文件,可以将它们的名称以空格分隔,放在启动命令的最后面,如下所示:

--------------- ---------- --------- ---------

这样,当 index.html、script.js 或 style.css 中的任何一个文件被修改时,浏览器都会自动刷新。

自定义端口和路径

默认情况下,browser-refresh 会监听本地的 9988 端口,并自动打开浏览器。如果需要使用其他端口或自定义路径,则可以在启动命令中使用以下选项:

--- ------ ---       ---- -- ------ -- --------- -----
--- ----- ------     ---- --------- -- ----- ----- ----
--- ------           ---- ------- -------------

例如,要将端口改为 8000,根目录改为 public,则可以执行以下命令:

--------------- -- ---- -- ------ ----------

配置文件

如果需要更复杂的配置选项,可以创建一个名为 .browser-refresh-ignore 的配置文件,放在项目根目录下。该文件是一个 JSON 对象,支持以下选项:

  • dirs: 要忽略的目录列表。
  • files: 要忽略的文件列表。
  • exts: 要忽略的扩展名列表。
  • poll_interval: 文件轮询间隔时间(毫秒)。
  • delay: 刷新延迟时间(毫秒)。
  • min_delay: 最小延迟时间(毫秒)。

例如,将所有以 .txt 结尾的文件排除在刷新范围之外,可以在 .browser-refresh-ignore 文件中添加以下内容:

-
  ------- --------
-

示例代码

--------- -----
------
  ------
    ----- ----------------
    ---------------------- ----------
  -------
  ------
    ---------- -----------
    ------- -------------------------
  -------
-------
-- ---------
------------------- ---------

以上就是关于 npm 包 browser-refresh 的详细使用教程,希望对你有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/44798


猜你喜欢

  • npm 包 extended-emitter 使用教程

    介绍 extended-emitter 是一个基于 Node.js 的事件发射器模块,它提供了更多的功能和灵活性,可以让你更方便地使用事件驱动编程。 本文将会介绍如何安装和使用该模块,并且详细讲解其 ...

    6 年前
  • npm 包 array-events 使用教程

    在前端开发中,数组是一种常见的数据结构。而在 JavaScript 中,我们可以通过使用 array-events 这个 npm 包来对数组进行事件监听和触发。 安装 首先,我们需要在项目中安装 ar...

    6 年前
  • npm 包 bit-mask 使用教程

    前言 在前端开发中,我们经常需要处理二进制数据,在这种情况下使用 bit mask 可以很方便地进行位运算,从而实现对二进制数据的快速操作。bit-mask 是一个 npm 包,它提供了一些有用的函数...

    6 年前
  • 理解 React Hooks

    React是一款流行的JavaScript库,用于构建用户界面。在React 16.8版本中引入了Hooks,它是一种新的React功能,可以让我们在无需编写类组件的情况下使用状态和其他React特性...

    6 年前
  • W3C官方:HTML & CSS 国际化技术实践

    在当今全球化的环境中,网站和应用程序需要支持多语言和多文化。Web标准组织W3C为此提供了一系列国际化技术指南,其中包括HTML和CSS的国际化实践。 HTML国际化实践 文字方向 对于从右到左书写的...

    6 年前
  • npm 包 jsonpointer.js 使用教程

    JSON Pointer 是一种用于在 JSON 文档中定位具体值的简单语法。 jsonpointer.js 是一个实现了 JSON Pointer 功能的 JavaScript 库,它可以使我们很方...

    6 年前
  • npm 包 chai-json-schema 使用教程

    在编写前端测试用例时,我们可能会需要对返回的 JSON 数据进行验证。chai-json-schema 是一个方便的 npm 包,可以让我们使用 Chai 断言库来验证 JSON 数据是否符合特定的 ...

    6 年前
  • 使用 npm 包 jshint-path-reporter 进行代码规范检查

    在前端开发中,我们经常需要进行代码规范的检查,以确保代码风格的一致性和可读性。而 jshint-path-reporter 是一个方便的 npm 包,可以帮助我们更好地进行代码规范检查。

    6 年前
  • npm 包 ministyle 使用教程

    介绍 ministyle 是一个格式化和着色 ANSI 终端输出的轻量级 JavaScript 库。它提供了一些基本的样式(如粗体、斜体等)和颜色,并且易于扩展。 在前端开发中,我们通常需要输出日志信...

    6 年前
  • npm 包 miniwrite 使用教程

    介绍 miniwrite 是一个基于 Node.js 的轻量级的日志库,支持多种配置和输出方式,并且易于使用。使用 miniwrite 可以方便地在前端项目中记录日志信息,帮助开发者更好地调试和排查问...

    6 年前
  • npm 包 unfunk-diff 使用教程

    在前端开发中,我们时常需要比较两个文本的差异,并将这些差异以某种方式呈现出来。这时候,一个非常有用的工具是 unfunk-diff。 unfunk-diff 是一个基于 Javascript 的 np...

    6 年前
  • npm 包 grunt-run-grunt 使用教程

    简介 grunt-run-grunt 是一个 Grunt 插件,它可以让你在 Grunt 任务中运行另一个 Grunt 任务。这个插件非常有用,因为它允许你将多个 Grunt 任务组合在一起,构建更加...

    6 年前
  • npm 包 eslint-config-palantir 使用教程

    什么是 eslint-config-palantir? eslint-config-palantir 是一个由 Palantir Technologies 开发的 ESLint 配置包,它基于他们在实...

    6 年前
  • npm 包 eslint-config-rowno 使用教程

    简介 eslint-config-rowno 是一个基于 ESLint 的前端代码风格规范配置包,可以帮助团队统一代码风格、提高代码质量和可维护性。本文将介绍如何安装和使用 eslint-config...

    6 年前
  • npm 包 grunt-mocha-cli 使用教程

    介绍 grunt-mocha-cli 是一个基于 Grunt 的 Mocha 测试运行器,它可以方便地在命令行中运行 Mocha 测试并生成测试报告。本文将详细介绍如何使用 grunt-mocha-c...

    6 年前
  • npm 包 grunt-mkdir 使用教程

    简介 grunt-mkdir 是一个 Node.js 的 npm 包,它可以在 Grunt 任务中创建目录。它的安装和使用非常简单,可以为我们的前端开发提供很大的便利。

    6 年前
  • npm包cover-child-process使用教程

    在Node.js开发过程中,经常需要与子进程进行交互。child_process模块提供了创建和控制子进程的功能,但是其API较为底层,使用起来相对复杂。在这种情况下,我们可以通过使用cover-ch...

    6 年前
  • npm 包 grunt-tslint 使用教程

    简介 grunt-tslint 是一个基于 Grunt 构建工具的 TypeScript 代码规范检查插件,它提供了一种简单易用的方式来集成 TSLint 工具到你的前端开发流程中,从而帮助你保持代码...

    6 年前
  • npm 包 tslint-path-formatter 使用教程

    什么是 tslint-path-formatter? tslint-path-formatter 是一个用于 TypeScript 项目的 TSLint 自定义报告器的 npm 包。

    6 年前
  • npm 包 grunt-wait 使用教程

    在前端开发中,自动化构建工具是必不可少的,而 Grunt 是一个非常流行和强大的前端自动化构建工具。其中,grunt-wait 是 Grunt 生态系统中的一个插件,它可以让你在任务执行期间等待一段时...

    6 年前

相关推荐

    暂无文章