Svelte 开发环境更换端口

2021-07-07

今天在公司的主要任务是完善 VOC 的后台,然后制作一个前端版本的聊天室。后者先前已经有了静态 Demo,由于采用了 Svelte 框架,默认就是走了打包工具 Rollup 的,所以处理起来非常方便。

结合之前在 Vite 的实践,在 Svelte 这里接入腾讯 IMSDK 还是蛮简单的,大多数逻辑都可以复用,就是数据处理和交互需要根据 Svelte 的模板语句重写。

主要遇到的问题就是后端限制了调试环境的端口号,否则会因跨域问题无法访问。看了好久的 Svelte 文档没出现我想要的答案,最后结合 StackOverFlow 的 某个问题 瞎 JB 试了下,修改 package.json 的启动命令解决了问题。

"scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w", // 默认指令
  "dev": "PORT=3000 rollup -c -w", // 改为 3000 端口
  "dev2": "sirv public --single --dev --port 3000", // 错误的,端口虽然正确,但这种方式部署出来等效于 Build,没有热更新,改代码刷新也没用
  "start": "sirv public --no-clear"
}

另外之前这个项目有个问题,就是聊天消息列表「滚动到最底处」的执行有点频繁,Input 输入的时候也会执行滚动,没有找到合理的方式。Svelte 的 beforeUpdate 钩子只知道父组件有东西改变,但是并不知道到底是谁发生了变化,没有 React 的 useEffects 那样可控,有大佬知道这个的解决方法嘛?可以给我留个言,万分感谢 🙏

阵雨 开心
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君