构建流程与产物

站点构建(SSR + 静态多页)、库打包(--library)与小程序产物。

build(options) 按 target 分发:站点构建(web)与库打包(--library)两条管线;返回BuildResult(root / outDir / assetsBuilt)。

站点构建(web)

  1. 解析配置:resolveConfig 合并默认值 / transone.config.ts / CLI 参数(含 --base)。
  2. 打包入口:对每个页面路由用 Bun.build 打包入口为客户端 bundle(main.js)。
  3. SSR 渲染:为每个页面注入部署 URL(http://127.0.0.1<base><route>),调用入口的 app.renderHtmlDocument 输出 HTML 文档壳(内联样式 + 脚本引用)。
  4. 输出静态产物:按 directoryPages 输出为 /{route}/index.html 或扁平 {route}.html,样式内联、资源相对路径引用,可直接静态托管。

base 子路径:GitHub Pages 等把站点挂在子路径下(如/transone/),--base /transone/ 让 SSR 注入的 URL 与客户端路由都感知子路径,产物中链接自动带 base 前缀。

库打包(--library)

构建可发布的 ESM 库:Bun.build 产出 bundle,按external 保留外部依赖;随后对tsconfigs 列表逐个运行tsc --project 生成 .d.ts(可关闭 dts);支持代码分割(splitting)与 linked sourcemap;压缩由 TRANSONE_MINIFY 环境变量控制(未设置为 0 时压缩)。

小程序产物(mp-*)

小程序目标把同一入口编译为原生工程:app.json / app.js / 页面 json + js + wxml + wxss(各端方言后缀不同),并用MiniProgramConfig 控制细节。mp 字段支持两种写法:单一配置对所有小程序目标生效;按平台分组时只对当前 target 生效,--target mp-alipay 即取mp['mp-alipay']

ts
// 按平台分组:一套配置管三端,各端独立 appId / outDir / 标题
export default defineConfig({
  mp: {
    'mp-weixin': { appId: 'wx123456', navigationBarTitleText: '微信端' },
    'mp-alipay': { appId: '2024000000000000', navigationBarTitleText: '支付宝端' },
    'mp-bytedance': { appId: 'tt123456', navigationBarTitleText: '抖音端' },
  },
});
MiniProgramConfig 关键字段
名称类型说明
appIdstring小程序 appid,默认 touristappid(微信开发者工具测试号)。
outDirstring小程序产物目录,默认 dist/build/mp-<target>。
pagesRecord<string, string>小程序专用页面路由,默认复用 config.pages。
window / tabBar / appExtraRecordapp.json 的 window / tabBar / 其他顶层字段合并。
lengthUnit'px' | 'rpx'样式长度单位,rpx 时数值按 1px=2rpx 换算输出。
publicDir / globalDatastring / Record静态资源复制目录;App 全局数据。

配套能力

能力模块说明
文件监听src/watch.ts · createFileWatcherdev / watch 模式的增量重建。
开发代理src/proxy.ts · createProxyHandlerdev 服务器把接口请求代理到后端。
路径安全src/safe-path.ts产物路径防目录穿越校验。
构建输出src/build-output.ts产物分类(JS 入口 / 样式表)与落盘。