1.0.1 • Published 7 months ago
@zxscls/app-builder v1.0.1
max-builder
IDE 上的各类型工程构建
设计原则
- 使用一个构建基座,
配置+插件
的形式来满足不同类型工程的构建 - 构建基座本身的更新发布,通过流水线自动化
- 构建需要分层,过程需要步骤化
- 减少构建时依赖,依赖最大限度放在项目运行时,降低基座更新频率
目录说明
|- src
|- assets // 静态资源目录
|- config // webpack配置目录
|- loaders // loader目录
|- plugins // plugin目录
|- templates // 工程构建模板
|- utils // 工具函数
|
|- babel.config.ts
|- constants.ts
|- webpackge.config.ts
|- scripts // 开发时的脚本,构建基座不包含这部分
开发
# 安装依赖
yarn
# 开发
yarn dev
# 构建基座本身的打包
yarn build:self
# 创建本地配置 builder.local.js,仅用于本地开发
yarn create-local-config
# 拉取指定环境指定项目数据,依赖 builder.local.js配置
yarn fetch-build-data
# 打包大程序工程
yarn build
# 本地打包apk,依赖于yarn build执行完js构建
yarn build-apk
开发本地配置
builder.local.js
/**
* 构建本地调试配置,用于本地开发调试,可获取指定工程的某次构建任务的数据
*/
module.exports = {
/**
* 支持三种格式数据
* 1. 原始schema对象{}
* 2. 本地schema的json文件路径
* 3.【推荐】远端构建日志http地址路径
*/
rawSchema: 'https://xxx/log.txt',
// api环境:dev|test|uat|prod
sunmiEnv: 'dev',
// 工程信息,和sunmiEnv配套使用
project: {
// 租户id
tenantCode: 'TNTxxx',
// 工程id
projectCode: 'PRJxxxx',
// 工程子类型:web|app|h5
projectSubType: 'xx',
// 迭代id
iterationCode: 'ITExxxx',
// 构建任务id
taskCode: 'VCTxxx',
//【仅针对应用工程】是否全量构建,true则忽略pages
fullBuild: true,
//【仅针对应用工程】批量构建的页面route
pages: [],
},
//【仅针对应用工程】资源代理,包括src/assets/dependecy.*.json及project.json中的assets,可代理至本地脚本(仅支持绝对路径或http地址)
assetsProxy: {
android: {
// key为src/assets/dependecy.*.json里的url,或者project.json中的assets的bundlePath
'https://xxx.com/react.js': '/local/path/react.js',
},
web: {},
h5: {},
},
};
本地打包 apk
- 仅针对 app 应用工程有效,指令集合为
yarn fetch-build-data && yarn build && yarn build-apk
- 依赖 apk 打包工程 Elephant
- 打包环境需要自行安装 Android Studio(安装过程可以配套解决 jdk、android sdk、虚拟机等的安装,就不用手动单独挨个安装和配置环境)
基座产物结构
|- build-data // 同构建容器约定,用于注入各类schema数据
|- project.json // 工程数据
|- page.xxxx.json // 页面数据
|- component.xxxx.json // 组件数据
|- i18n.json // 语言包数据
|
|- dist // 构建基座
|- assets // 静态资源目录
|- config // webpack配置
|- loaders // schema的解析与消费
|- plugins // 文件处理及构建产物的落地
|- templates // 应用框架,初始化代码等
|- android
|- framework.js
|- web
|- framework.js
|- document.ejs
|- utils // 工具函数
|- babel.config.js // babel配置
|- constants.js
|- webpack.config.js // 依赖webpack配置
|
|- package.json
环境变量
构建容器可以通过环境变量,控制构建基座的构建行为。环境变量名称使用统一前缀 MAX_BUILDER_
# 构建工程类型【必须】:application|component
MAX_BUILDER_TYPE
# 构建工程子类型【必须】:app|web|h5
MAX_BUILDER_SUBTYPE
# 调试模式,开启不压缩代码
MAX_BUILDER_DEBUG
# 其他待扩展
构建脚本集合
# 构建android工程
MAX_BUILDER_TYPE=application MAX_BUILDER_SUBTYPE=app npm run build
# or
export MAX_BUILDER_TYPE=application
export MAX_BUILDER_SUBTYPE=app
npm run build
# 构建web工程
MAX_BUILDER_TYPE=application MAX_BUILDER_SUBTYPE=web npm run build
# or
export MAX_BUILDER_TYPE=application
export MAX_BUILDER_SUBTYPE=web
npm run build
# 构建h5工程
MAX_BUILDER_TYPE=application MAX_BUILDER_SUBTYPE=h5 npm run build
# or
export MAX_BUILDER_TYPE=application
export MAX_BUILDER_SUBTYPE=h5
npm run build
构建数据协议(build-data/*)
FAQ
1. 构建基座需不需要 ts 编译?
分两块看:
- 构建基座的开发本身,使用 ts 开发,构建基座自身的构建产物保持 js 形态
- 工程构建,一律基于 js 形态的构建基座,编译 js,产出 js,这个过程无 ts 参与
历史上,IDE 里使用的编辑器为 ts 环境,产出的 source 字符串又要求是 js 语法,否则预览 eval 执行时报错,而由于原有构建基座里使用 ts 编译,构建产物又不报错,十分不统一
2. 构建流程对 webpack 的依赖如何
- 设计上:构建对 webpack 的依赖尽量做轻,甚至可根据不同构建类型,来使用不同构建器(纯 esbuild、纯 babel...),webpack 是选项,不是唯一。
- 实现上:放弃对 webpack 的 loader 及 plugin 的重度定制,构建流程前置的数据转换操作尽量从 webpack 配置里抽出。
- 原则就是两步走:通过本地脚本处理好工程需要的所有文件转换;然后将完整的入口文件及其依赖文件交给构建器,执行标准的工程构建,得到所需的产物。 被放弃的和 webpack 耦合较深的一版实现ref
1.0.1
7 months ago