Picasso Hamburger

Picasso Hamburger 专门用于辅助美团美食同学开发 Picasso，支持如下功能：

• Live Load
• 快速打包当前 TS 文件（支持对以 -vc.ts 或 -view.ts 为后缀的文件）

其中 Live Load 是重点打造的功能。安装本插件并成功激活后，对 -vc.ts 或 -view.ts 结尾的文件进行保存，会触发该文件打包的文件同步到注册的客户端上，进而同步渲染。

插件提供了两个命令（可在 Shift + Cmd + P 中键入 Hamburger 查看）：

• Pack Current File(hamburger.pack.current): 对当前文件进行打包
• Live Load Current File(hamburger.liveload.current): 开启Live Load

插件提供了三个配置项（Cmd + ,打开「设置」，键入Hamburger关键字可以过滤看到相关的设置项）：

• hamburger.enable: 用于激活或者关闭 Hamburger
• hamburger.tsConfigPath: 为 tsc 工具提供配置
• hamburger.packCommandGeneratorPath: 该路径的 js 文件应该 export 一个函数，函数能根据入参（path）返回打包命令（shell 命令）

如果想激活 Picasso Hamburger，这三个配置项均需要设置正确。

在 Picasso 工程中，典型的 hamburger 配置如下：

Live Load

所谓 Live Load 功能，基本原理是让 VSCode 充当 WebSocket 服务器，监听目标 ts 文件的变化，自动打包生成打包文件，然后广播同步到连接中的客户端中，后者根据 js 文件进行渲染；从而实现「实时渲染」。

如何使用Live Load，两个步骤：

• 激活Hamburger
  • hamburger.enable 配置为true
  • hamburger.tsConfigPath 提供有效的 tsconfig.json 路径
  • hamburger.packCommandGeneratorPath 提供有效的打包命令生成函数的路径
• 将编辑 tab 切换到目标文件，执行 Hamburger: Live Load Current File

Pack Current TypeScript File

和Live Load功能的限制一样，打包功能只能对 -vc.ts（Picasso v2）和 -view.ts（Picasso v1）有效。

其他

除了上述的命令，Picasso Hamburger 还提供了两个状态信息，如下（enable状态下可见）：

左侧描述的是当前的client连接情况，点击可以弹出详情信息；右侧描述的是当前Live Load任务的目标module名。

一些可能的问题

Q: 能同时对多个Picasso Module进行LiveLoad吗？

A: 不能，但是可以切换，譬如将Live Load任务的目标module从Foo-vc.ts切换到Bar-vc.ts，只需要将编辑tab切换到Bar-vc.ts，然后执行Live Load Current File命令即可。

Q: 如何触发Live Load呢？

A: 保存（Cmd + S）目标module的-vc.ts文件，或者后者所依赖的ts文件，即可。

Q: 手机使用 LiveLoad 功能，为啥不灵光？

A: 电脑与手机使用的网段不能在同一个，比如电脑使用 MTDP 网，手机使用 MTDP-Tech 网。