介绍
lws-live-reload 是一个可以在本地进行开发时启用实时刷新的 npm 包。使用该包能够很好的提高前端开发效率，经常被用于 React，Vue，Angular 应用的开发中。
安装
使用 npm 安装 lws-live-reload，打开命令行工具并输入以下命令即可。
--- ------- ---------------
配置
在项目根目录下创建文件 lws.config.js，并将以下代码复制到其中。
----- ---------- - ---------------------------
----- ----------- - ------------------------
----- ------------ - ------------------------
-- --- ---------- ---
----- ---------- - ------------
---------- ---------- --------
---
-- ------
----- ----- - ----------------------
-------------- - -
----- -----
------ -
-- -------
-----------
-- -------
----- ---- -- -
---------- ---- ----------------- ------
-
-
--可以看到，我们在配置中使用了 serve-static 中间件来提供一个静态文件服务，并使用了 finalhandler 中间件来处理找不到文件的情况。中间件的处理顺序从项目根目录的下往上执行。
运行
在命令行中输入以下代码来运行项目，使用默认的配置文件即可。
---
注意，使用该命令需要在全局安装 lws，可以使用以下命令进行安装。
--- ------- -- ---
如果你想自己指定配置文件，以文件夹 my-lws 为例。可以在命令行中输入以下代码。
--- -- ------
示例
以下示例演示了如何使用很简单，首先在项目根目录新建文件 index.html，然后在其中添加以下代码。
--------- ----- ------ ------ ----- ---------------- ------------------------------ ------- ------ ---------- ----------- ------- -------
接着执行 lws 命令即可。在浏览器中输入 http://localhost:3000/index.html 即可看到上面的页面。
接着在项目根目录下的 public 目录中新建文件 style.css，添加以下代码。
-- - ------ ----- -
保存之后，你会发现你的浏览器页面自动刷新了一遍，同时 h1 变为了蓝色。
结论
lws-live-reload 让实时刷新变得很简单，使用该包可以让我们更加高效的进行前端开发，特别是在 React，Vue，Angular 应用的开发中。当然，lws-live-reload 也支持更多扩展，如添加自定义中间件等，可以根据需要进行更加全面的配置。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055cb181e8991b448da16b