构建流程与产物
站点构建(SSR + 静态多页)、库打包(--library)与小程序产物。
build(options) 按 target 分发:站点构建(web)与库打包(--library)两条管线;返回BuildResult(root / outDir / assetsBuilt)。
站点构建(web)
- 解析配置:resolveConfig 合并默认值 / transone.config.ts / CLI 参数(含 --base)。
- 打包入口:对每个页面路由用 Bun.build 打包入口为客户端 bundle(main.js)。
- SSR 渲染:为每个页面注入部署 URL(http://127.0.0.1<base><route>),调用入口的 app.renderHtmlDocument 输出 HTML 文档壳(内联样式 + 脚本引用)。
- 输出静态产物:按 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 关键字段
| 名称 | 类型 | 说明 |
|---|---|---|
appId | string | 小程序 appid,默认 touristappid(微信开发者工具测试号)。 |
outDir | string | 小程序产物目录,默认 dist/build/mp-<target>。 |
pages | Record<string, string> | 小程序专用页面路由,默认复用 config.pages。 |
window / tabBar / appExtra | Record | app.json 的 window / tabBar / 其他顶层字段合并。 |
lengthUnit | 'px' | 'rpx' | 样式长度单位,rpx 时数值按 1px=2rpx 换算输出。 |
publicDir / globalData | string / Record | 静态资源复制目录;App 全局数据。 |
配套能力
| 能力 | 模块 | 说明 |
|---|---|---|
| 文件监听 | src/watch.ts · createFileWatcher | dev / watch 模式的增量重建。 |
| 开发代理 | src/proxy.ts · createProxyHandler | dev 服务器把接口请求代理到后端。 |
| 路径安全 | src/safe-path.ts | 产物路径防目录穿越校验。 |
| 构建输出 | src/build-output.ts | 产物分类(JS 入口 / 样式表)与落盘。 |