借助工具优化开发流程，提升开发体验
背景
最近在做一个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
}
}这样流程一优化，效率 蹭蹭蹭地往上涨。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-05-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录