从 WXML 到 manifest，
完整拆解编译流程

1. 01
   解析项目根目录

   读取 compatibility.files.projectConfig 指向的项目配置及其 miniprogramRoot；没有该文件时把 sourceDir 当作小程序根目录。

   resolveRoot()
2. 02
   扫描源文件

   按 compatibility.extensions 递归收集脚本、模板、样式、模板脚本和配置文件，跳过 .git、.cache 和 node_modules。

   collectFiles(root, extensions)
3. 03
   读取小程序配置

   读取 compatibility.files.appConfig 指向的配置，解析 pages 和 subPackages/subpackages。至少要有一个页面，否则记一条 APP_PAGES_REQUIRED 诊断。

   readAppConfig() · resolvePagePaths()
4. 04
   解析兼容输入

   读取 sourceDir/tiny.config.json 的 compatibility；CompileOptions.compatibility 显式覆盖。缺省字段回退到微信规则。

   readProjectCompatibility() · resolveCompatibility()
5. 05
   解析入口

   每个路径同时尝试 foo.* 和 foo/index.*，按兼容配置中的扩展名查找 script、template、style 和 config。

   resolveEntry(root, byRelative, path)
6. 06
   查找组件

   从 app 配置和每个页面、组件的 usingComponents 递归查找，记录全局/局部来源，并检查缺失。

   resolveComponentEntries()
7. 07
   编译脚本

   从入口沿 import/require 收集可达脚本，转译 TypeScript，补全无扩展名的模块路径，并输出 source map。

   compileScripts()
8. 08
   编译模板

   把所有模板文件放进同一个 TmplGroup，处理 import/include/template、模板脚本、作用域标记和 animation。

   compileTemplates()
9. 09
   编译样式

   app 样式保持全局；页面和组件样式加固定 Tiny class/tag scope；rpx 转成 vw；内联 @import。

   compileStyles()
10. 10
    复制资源

    图片和字体按原相对路径复制；小图还会在模板编译阶段内联成 data URI。

    copyAssets()
11. 11
    生成 manifest 和入口

    汇总产物、runtimeCompatibility 和诊断，写出 manifest.json；生成 service.js、render.js，并用 esbuild 打包 service。

    createManifest() · writeEntryArtifacts()

const groupList = (() => {
  const G = {}
  // ... 每个 path 对应一个 ProcGen group
  return G
})()

export default {
  groupList,
  content(path, name = "") {
    const group = groupList[path]
    if (!group) throw new Error(`template not found: ${path}`)
    return group(name)
  },
}复制

<!-- 源 WXML（默认微信兼容输入） -->
<button class="primary" bindtap="submit">保存</button>

<!-- 编译器注入 tag marker，scope 为 tiny-pages-form-form -->
<button class="primary tiny-tag-button" bindtap="submit">保存</button>

<!-- 同目录 WXSS：button { color: red } -->
<!-- 产物 CSS：.tiny-pages-form-form--tiny-tag-button { color: red } -->

<!-- marker 与输入侧 wx/tiny 配置无关，始终是 tiny-tag-button -->复制

1. 01
   收集可达脚本

   从 app、页面和组件入口出发，解析 import/export 和 require 的静态字面量，按 .js/.ts/.tsx 以及 index.* 的规则查找。

   collectReachableScripts() · queueLocalScript()
2. 02
   转译 TypeScript

   ts.transpileModule 输出 ESNext + ESNext modules + source map，诊断带行列号。这里只做转译，不做类型检查。

   target: ESNext · module: ESNext
3. 03
   修正相对模块路径

   浏览器 ESM 需要显式扩展名。把 ./foo 改成 ./foo.js，目录入口改成 ./foo/index.js；裸模块名不变。

   rewriteRelativeModuleSpecifiers()
4. 04
   生成 service.js 入口

   入口会 import app、所有页面和所有组件的脚本。App/Page/Component 在导入时执行，注册到 service 的 registry。

   import './scripts/app.js' ...
5. 05
   用 esbuild 打包 service

   format 为 esm，platform 为 browser，target 为 es2019，同时开启 bundle 和 sourcemap。ECharts 这类 CJS/UMD 依赖会在这里被吸收。

   bundle() · SCRIPT_BUNDLE_ERROR = warning
6. 06
   生成 render.js

   render 入口只重新导出 templates，组件逻辑不会进入 render。

   render.js

generated/
|-- manifest.json            # 唯一索引
|-- service.js               # esbuild 打包后的服务线程入口
|-- service.js.map
|-- render.js                # 只导出 templates
|-- templates.js             # groupList + content(path, name)
|-- scripts/
|   |-- app.js
|   |-- components/add-button/add-button.js
|   +-- pages/todos/todos.js
|-- styles/
|   |-- app.wxss.css         # 全局
|   |-- pages/todos/todos.wxss.css
|   |-- pages/todos/todos.wxss.low.css   # 目前为空
|   +-- **.map
|-- logo.svg                 # 资源按原路径复制
+-- assets/**复制