某平台又在对比 React 和 Vue 了，我不太理解这种对比甚至踩一捧一有什么意义。

在 Halo 这几年的开发中，我也写了不少前端代码，但从未一股脑只用单一框架。每个框架在不同使用场景下都有各自的优势和劣势。

• Vue：从 Halo 1.0 开始就在控制台使用，简单易上手，生态够用。但早期 VSCode 插件问题太多，严重影响开发体验。不过最近的 3.x 版本已经非常不错了。

• React / Preact：Halo 官网的应用市场部分在用，不排斥 JSX，相比于 Vue 的 SFC，JSX 对我来说最大的优势就是一个文件可以写多个 React 组件。

• Lit：用来为 Halo 插件编写 Web 组件。因为 Halo 的前台是纯后端渲染，针对部分需要交互的界面，Web 组件几乎是最好的选择，而 Lit 正是专门的 Web Component 框架。

• Svelte：最近才开始接触，也用来写 Web 组件。相比 Lit，Svelte 对 CSS 和 CSS 框架支持更好，模板语法也更友好，后续写 Web 组件可能会优先选择 Svelte。

还有构建工具：

• Vite：从 Halo 2 开始就在用，相比于原来的 Webpack / Vue CLI 更容易配置，很多东西都已经开箱即用，不过早期的生产/开发不一致的问题也踩了不少坑，最近 Rolldown Vite 一发布 Beta 就用上了，非常不错。

• Rsbuild：最近才用上，用于构建 Halo 插件的 UI 部分。之前插件 UI 采用 IIFE 格式加载，导致大型插件的 Bundle 体积过大，影响页面加载速度。而 Vite 不支持 IIFE 格式的代码分割，所以切换到 Rsbuild / Rspack。具体可查阅：《使用 Rspack 构建 Halo 插件的前端部分》

所以总结下来就是，不同框架有不同的优劣，针对场景选择合适的即可，不存在用了一个框架就要完全排斥另一个框架，甚至用出优越感的情况。

开发日常

好眼馋 OPPO 的 AI 功能！

杂记

M5 芯片的 Macbook Pro 发了，仍然还没有更换磨具，仍然还有刘海这个大 bug。自从 Apple 发布带刘海的 Mac 之后，我就一直认为这是一个非常严重的硬件 bug，已经不关乎好不好看的问题了，当顶部菜单栏的图标和菜单项比较多的时候，刘海就是会把多余的图标和菜单项挡住，Apple 甚至没有任何软件上的动作来解决这个问题。真的很难想象这是 Apple 能做出来的东西，就是完全面向 PPT 发布新品，不管有没有问题，只要外观变了，就会有人买单。

这时候可能就有“果粉”要说了：“那你可以安装一个隐藏/折叠菜单栏图标的 App 啊。” 😅

吐槽

前端大一统时刻要来了？

开发日常

不止一次在路上看到家长把小孩放在共享单车的篮子里骑车，还是在车流量那么大的路上，这些家长心也是真够大的。

杂记

这就是 aPpLE 现在的水准。

吐槽

Wow

杂记

1. 《苹果早在去年六月份就推出了苹果智能 AI 功能，然后国行版本从预计 iOS 18 正式版推出，到预计 iOS 18.1 正式版推出。》

2. 《苹果正式发布 iOS 18.5 系统，国行 AI 要来了！》

3. 《苹果 AI 要来了！苹果预计今晚发布 iOS 18.6 系统》

4. 《苹果 iOS 26.1 系统 Siri 有大更新 国行 AI 或上线》

🤷‍♂️ 吐槽

新的代码高亮插件，基于 https://shiki.style/。

import UnocssVitePlugin from "unocss/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [
// [!code hl:4]
    UnocssVitePlugin({
      configFile: "./uno.config.ts",
      mode: "shadow-dom",
    }),
  ],
});

import { defineConfig, presetIcons, presetWind3, presetWind4 } from "unocss";

export default defineConfig({
// [!code --]
  presets: [presetWind3(), presetIcons()],
// [!code ++]
  presets: [presetWind4(), presetIcons()],
});

import { defineConfig } from "vite";
export default defineConfig({
  build: {
// [!code focus:6]
    lib: {
      entry: "./src/index.ts",
      name: "shiki-code",
      fileName: `shiki-code`,
      formats: ["es"],
    },
  },
});

开发日常

如何更快速地知道 Halo 应用市场中的版本发布情况。

• RSS 订阅

• 应用发布记录

杂记