借助工具优化开发流程，提升开发体验

背景

最近在做一个demo，只有一个html页面，需要开启一个https web server，以此来实现在浏览器中访问。

改造前

改造前，每次修改文件保存后都要刷新一下浏览器。如果只是短时间，每次修改后手动刷新浏览器也还行。主要是这个demo要做好几天，甚至几个星期。每次修改保存后都要手动刷新，难免会让人有点烦躁。

改造后

之前启动web server使用的一个叫 anywhere 的nodejs库，可以将当前目录当作web服务的根目录启动。

改造后，使用了browser-sync 这个库，记住socket支持多端热更新，并且也支持将当前目录或当前目录的特定文件放到web server中启动。
支持https访问。
而且还提供了一个 web配置页面。可以说使用体验非常友好。

启动命令

browser-sync start --server --files "*.html,*.css,*.js" --https

改造刷新后还需要选择串口

由于我的html demo需要与串口进行通信，所有使用程序前都需要选择串口，如下图
在这里插入图片描述

一次两次还行，再多了我就要想办法偷懒了。将第一次选择的串口信息保存到本地，下次进入程序，自动链接不就得了嘛。

稍微改造一下。

// 将第一次链接的串口信息保存到本地port = await navigator.serial.requestPort();const portInfo = { name: port.getInfo().usbVendorId }; // 使用getInfo()来获取信息localStorage.setItem('lastUsedPort', JSON.stringify(portInfo));// 再次进入程序后，获取上一次保存的串口信息，从可用串口中筛选出需要链接的。
const savedPortInfo = JSON.parse(localStorage.getItem('lastUsedPort'));
if (savedPortInfo) {const ports = await navigator.serial.getPorts();const previouslyUsedPort = ports.find(port => port.getInfo().usbVendorId === savedPortInfo.name);if (previouslyUsedPort) {// 提示用户是否想要连接到此端口console.log("发现之前使用的端口，尝试连接...");port = previouslyUsedPort}
}