作为一个前端开发者，我们都希望能够快速地在不同的浏览器中预览我们的网站，并且能够自动刷新浏览器，以便我们及时查看到我们所做出的改变。而这就需要使用到一个非常棒的工具：browser-sync。
但是，在使用 browser-sync 的时候，有一点比较烦人的问题：如果我们是在 WSL（Windows Subsystem for Linux） 环境下工作，我们会发现 browser-sync 无法自动识别 WSL 中的文件更改，导致浏览器无法自动更新。
这个问题可以通过使用名为 browser-sync-wsl 的 npm 包来解决。接下来，本文将会详细介绍如何使用这个包来解决该问题，并且提供示例代码。
安装
首先，我们需要在我们的项目中安装 browser-sync-wsl。我们可以使用 npm 来进行安装，命令如下：
npm install browser-sync-wsl --save-dev
配置
安装完成后，我们还需要进行一些简单的配置，才能让 browser-sync-wsl 正常工作。我们在项目根目录下创建一个名为 bs-config.js 的文件，并将下面的配置信息粘贴到文件中：
-- -------------------- ---- -------
-------------- - -
------ -
-
------ -
-- -------------------
-- ---------- ----------- -----
------------
-----------
----------
-----------
-----------
------------
----------
--
-- --------------------------- ----------
--- -------- ------- ----- -
-- -- ------------------- -----
-- ---- --- - ------- ---------
-------------------- - ------------------ ------
-
-
--
-- ------------ -------------------- --- -----
------ -
-- - --- ----------------
------- -----------------
-- - ------------ -----------------
--------- ----
--
-- ------------------
---------- ------
-- ---------------
----- -----
-运行
配置完成后，我们就可以使用下面的命令启动 browser-sync-wsl 了：
browser-sync start --config bs-config.js
启动成功后，我们就可以通过访问 http://localhost:3000 这个地址来访问我们的网站了。在 WSL 中修改文件后，浏览器将会自动刷新并更新网站的内容。
示例代码
下面是一个简单的示例代码，可以通过这个代码来测试 browser-sync-wsl 的功能。我们首先在 WSL 环境下安装一个简单的 Node.js 服务器：
-- -------------------- ---- ------- -- --------- ----- ---- - --------------- ----- -------- - ----------- ----- ---- - ---- ----- ------ - ----------------------- ---- -- - -------------- - --- ----------------------------- ------------- -------------- -------- -- ------------------- --------- -- -- - ------------------- ------- -- ----------------------------- --
然后，我们在服务器同级目录下创建一个名为 index.html 的文件，并将下面的代码粘贴到文件中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ----------
--------
-------------- -- -
------------------------------------------------ - ------------ --------
-- -----
---------
-------
------
--------------- ------------
------------ --- --- ---------------- ---------------
-------
-------最后，我们在命令行中使用下面的命令启动服务器，并且在浏览器中访问 http://localhost:3000：
node server.js && browser-sync start --config bs-config.js
现在，我们就可以看到浏览器中实时显示当前时间，并且在修改 index.html 文件后自动刷新浏览器了。
结语
通过本文，我们学习了如何在 WSL 中使用 browser-sync-wsl 来自动更新浏览器，并且测试了其工作原理。希望这篇文章能够对你有所帮助，让你能够更加愉快地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66f8c