在前端开发中，我们通常使用自动刷新技术提高开发效率。而 Browsersync 是一款非常受欢迎的自动刷新工具，它能够自动监听文件变化，并在浏览器中实时展示更新后的效果。
但是，在某些情况下，我们可能需要手动控制文件是否需要刷新，这时候就需要使用 inject-lr-script 这个 npm 包了。
简介
inject-lr-script 是一个简单易用的 npm 包，它可以将 Browsersync 默认注入的自动刷新脚本删除掉，并提供了一个 API，让开发者手动控制何时需要刷新页面。
安装
使用 npm 安装 inject-lr-script：
npm install --save-dev inject-lr-script
使用
配置 Browsersync
首先，需要配置 Browsersync，让它能够与 inject-lr-script 协作。在 Browsersync 的配置文件 bs-config.js 中，添加以下代码：
-- -------------------- ---- -------
----- -------------- - ---------------------------
-------------- - -
-- ---
--------------- -
----- -
------ ------------
--- --------- ------ -- -
------ --------------------------- - ------- - ------
-
-
-
--这段代码的作用是将 Browsersync 默认注入的自动刷新脚本删除掉，并插入一个与 inject-lr-script 协作的脚本。
使用 inject-lr-script
接下来，就可以使用 inject-lr-script 提供的 API 来手动控制页面是否需要刷新了。首先，在 HTML 文件中添加以下代码：
<script src="/__inject-lr-script.js"></script>
然后，在 JavaScript 中调用 location.reload() 函数即可刷新页面，例如：
document.querySelector('#refresh-button').addEventListener('click', () => {
InjectLRScript.reload();
});在这个例子中，当用户点击按钮时，页面会重新加载。
结论
通过使用 inject-lr-script，开发者可以手动控制页面是否需要刷新，从而提高开发效率。这个 npm 包非常简单易用，只需要几行代码就可以完成配置和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43597