大家好，我是 uni-app 的核心开发 笨笨狗吞噬者，欢迎关注我的微信公众号 前端笨笨狗。

感想

不得不说，ai 发展的实在太快了，去年我入职 uni-app，一年中的大部分时间还是在手搓代码，就是网上说的 古法编程，一方面是对 ai 的能力仍有质疑，觉得对于框架维护，ai 不懂，另一方面是体验了一些模型，感觉能力不是很强。公司这边也是大力支持使用 ai，同事甚至一天提交了一百多个 commit。

上周我在家用 gpt-5.4 让 ai 写了 https://github.com/uni-toolkit/uni-toolkit/tree/main/packages/vite-plugin-component-insight 插件，我写好了 md 文件之后，就去打王者荣耀去了，大概个把小时之后，它已经写出来，并且按照我的要求先用原生微信小程序做测试和验证，然后再用 uni-app 项目做了测试和验证，这个活以往我可能要做大概一半天，现在再看看，我基本上什么编码工作都没有做（简单修改了一下 readme）。

现在我的工作，基本上百分之八九十都是交给 ai 编写或者作决策，比如我需要修复框架的问题，我会告诉 ai，现在的问题是什么，我的修复思路是什么，具体该修改什么文件，等它改完了之后，我再来 review，看下代码修改是否合理。

有时候真不明白要我干啥了，emmmmmm....

skill

前段时间，我创建了 https://github.com/uni-toolkit/skills 项目，用来存放针对 uni-app 主包瘦身的 skills。今天就想着来再试试 Opus 4.7 的能力，同时也验证下我的 skills 是否正确，能否给开发者提供足够合理的建议，下面分享下我的测试流程

前置工作

我一般使用 ai 做某个任务的习惯时，先写个 md 文件，比如我现在的需求是验证 uniapp-subpackage-node-modules 的正确性， md 文件如下：

# 需求

验证 `uniapp-subpackage-node-modules` skill 的正确性

## 步骤一

### 需求

主包中加一个页面，创建两个分包页面，主包可以分别跳转到分包页面。页面要有一个组件示例，每个组件或者页面都要添加 rattail 工具函数的示例

### 注意事项

- 页面不要太复杂
- 使用的 rattail 版本为 1.0.8 
- 工具函数可以选一部分简单的，一部分复杂的
- rattail 官网是 https://rattail.varletjs.org/zh/getting-started.html

## 步骤二

### 需求

`https://github.com/uni-toolkit/skills/tree/main/skills/uniapp-subpackage-node-modules` 这个是要验证的skill，你把skill应用到这个项目中，同时跑一下 skill，把你觉得项目应该修改的地方写成一个 md 文件到项目的根目录

### 注意事项

- 不要修改项目的原逻辑，仅安装skill，应用skill，输出分析信息

## 步骤三

参考上述分析得到的日志，如果这个项目可以优化，你可以根据 skill ，优化下这个项目产物生成

### 注意事项

- 不要添加无关依赖和逻辑
- 分包用到的 rattail 函数应该打包到分包中，注意验证这个

指挥 ai

md 文件的内容写的差不多之后，我会让 ai 按照步骤进行工作，分步骤的目的是防止 ai 一下修改出来太多东西看不过来（吐血经历，之前让 ai 写 https://github.com/uni-toolkit/uni-toolkit/tree/main/packages/vite-plugin-component-insight，review 累死人）

我这个项目是主包分包都用到了 rattail 工具库的函数，hx 5.04 版本开始，hx 项目或者 cli 项目支持分包引用的 node_modules 依赖打包到分包中，我想分包用到的函数打包到分包中，ai 应用了 uniapp-subpackage-node-modules 之后，

输出了一份详细的诊断报告（大概两百多字，本文仅展示部分内容）

# Skill 分析报告：`uniapp-subpackage-node-modules`

> 本文件由 `uniapp-subpackage-node-modules` skill 应用于当前项目后自动输出。
> 目的：验证 skill 的正确性，分析项目在「分包 node_modules 归属」上的现状与风险，**不直接改动项目原逻辑**。

- Skill 源：<https://github.com/uni-toolkit/skills/tree/main/skills/uniapp-subpackage-node-modules>
- 已安装到：`.cursor/skills/uniapp-subpackage-node-modules/`
  - `SKILL.md`
  - `references/node-modules-subpackage-rules.md`
  - `agents/openai.yaml`

---

## 一、诊断结论（TL;DR）

- **属于问题域**：是。项目确实存在「分包 js 未进入分包 `vendor.js`、仍全部留在主包 `common/vendor.js`」现象。
- **是否满足 uni-app 内置分包优化前提**：**否**。命中 3 条直接不符合项：
  1. `manifest.json` 的 `mp-weixin` **未开启** `optimization.subPackages`
  2. `packageA`、`packageB` 根目录 **没有独立的 `package.json`**
  3. 目标依赖 `rattail` **被主包 + 多个分包同时引用**，属于「共享依赖」，按规则不适合进入单分包 `vendor.js`
- **更像是哪类原因**：**配置未开启 + 依赖划分不合理**（双重原因）。即便开了配置，当前 `rattail` 的引用链也会把它拉回主包，这是符合官方优化规则的正常结果。

---

ai 很好地分析出了可优化点，并且我们还可以让它根据分析日志做保守修改

修改前，rattail 的函数都被打包到了 common/vendor.js 中

修改后，分包的内容都被打包到了分包中

背景

大家好，我是 uni-app 的核心开发 前端笨笨狗。本篇是 uni-app 源码分析的第三篇文章，欢迎关注！

前两天有开发者在群里面问我 uni-app 中如何配置 styleIsolation，我告诉了他正确的配置方案，也计划写篇文章揭秘 uni-app 是如何通过运行时将开发者的配置转化为原生微信小程序的配置。

指南

选项式

在 uni-app 中，开发者可以通过在页面组件中添加 options 配置项来设置 styleIsolation，示例如下：

<script>
export default {
  name: 'MyComp',
  options: {
    styleIsolation: 'isolated'
  },  
}
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyComp",
  options: {
    styleIsolation: "isolated",
  },
});
</script>

组合式

在使用组合式 API 的页面组件中，开发者同样可以通过 defineOptions 来设置 styleIsolation，示例如下：

<script setup>
defineOptions({
  name: 'MyComp',
  options: {
    styleIsolation: 'isolated'
  }
})
</script>

原理

createComponent 这个函数大家如果看过 vue 文件的 js 编译产物就一定不会陌生，比如

<script setup>
defineOptions({
  options: {
    styleIsolation: "shared",
  },
});
</script>

会被编译为

const _sfc_main = {
  __name: "comp",
  options: {
    styleIsolation: "shared"
  }
  setup(__props) {
    return (_ctx, _cache) => {
      return {};
    };
  }
};
wx.createComponent(_sfc_main);

也就是 script 中写的代码会被编译成一个对象，这个对象就是 vue 组件的配置项，而微信小程序又不认识 vue 组件的配置项，那么怎么把 vue 组件的配置项转化为微信小程序的配置项呢？这就要靠 uni-app 的运行时了，在 common/vendor.js 中，createComponent 函数会调用 parseComponent 函数来解析 vue 组件的配置项，parseComponent 的返回值就是微信小程序组件的配置项，也就是 Component 构造器 的参数，可以用来构造小程序原生组件。

function initCreateComponent() {
  return function createComponent(vueComponentOptions) {
    return Component(parseComponent(vueComponentOptions));
  };
}

const createComponent = initCreateComponent();
wx.createComponent = createComponent;

当 parseComponent 解析到页面组件时，会检查组件的 options 配置项，如果发现 styleIsolation，就会将其转化为微信小程序的配置项。

function parseComponent(vueOptions) {
  vueOptions = vueOptions.default || vueOptions;
  const options = {
    multipleSlots: true,
    // styleIsolation: 'apply-shared',
    addGlobalClass: true,
    pureDataPattern: /^uP$/
  };
  // 将开发者在 options 中设置的配置项转化为微信小程序的配置项
  if (vueOptions.options) {
    Object.assign(options, vueOptions.options);
  }
  const mpComponentOptions = {
    options,
    // 省略其他配置项
  };
  return mpComponentOptions;
}

这样一来，开发者在页面组件中设置的 styleIsolation 就会被正确地转化为微信小程序的配置项，从而自由控制样式隔离。