华为云开发者社区
2021 年 3 月 27 日演讲
Web 最初很简单
- HTTP
- HTML
- CSS
- JavaScript
Web 后来很强大
- BOM、DOM
- LESS、SASS、Stylus
- ECMAScript 6+、TypeScript
- WebAssembly
- Canvas、WebGL
- WebSocket
- IndexedDB
- Web Worker、PWA
- WebUSB、WebAuthn
- ……
Web 打包器变得很复杂
JavaScript 库打包器
| 名称及官网 | 简介 | 备注 |
|---|---|---|
| AMD-bundle.js | AMD、CJS 和 ES 通用模块打包器 | 本人开发 jQuery 仿制版时自研 |
| rollup.js | ES 模块打包器 | 全球首个知名的 ES 模块打包器 |
| MicroBundle | 基于 rollup 的 JS 打包器 | Preact 等知名库的打包器 |
| ESBuild | 用 Go 语言开发的 ES/TS 打包器 | 全球性能最强 |
Web 应用打包器
| 名称及官网 | 简介 | 备注 |
|---|---|---|
| DevCLI | HTML 5、CSS 3、ECMAScript 6+ 原生资源打包器 | 本人开发 WebCell 1.0 时自研 |
| webpack | 插件化 Web 资源打包器 | 全球最著名、最复杂的打包器 |
| Parcel | 零配置 Web 原生资源打包器 | 全球次著名、最易用的打包器 |
| Snowpack | 基于 ESBuild 的 Web 资源打包器 | 全球首个知名 ES 模块应用打包器 |
| Vite | 基于 rollup 和 ESBuild 的 Web 资源打包器 | 尤雨溪开发 Vue 3.0 时自研 |
痛点：配置复杂！！！
- 标准滞后
- 实现繁多
- 配置复杂
- 迁移困难
代码还没写，环境配一天……
我理想中的打包器
| 本人自研（已废弃） | 社区同款 | 社区现状 |
|---|---|---|
| AMD-bundle.js | ESBuild | CSS modules 官方尚未支持，但有社区插件 |
| DevCLI | Parcel | v1 bug 无人修复，v2 变复杂且难产 |
设计原则
- 资源文件引入机制只依赖 HTML、CSS、JavaScript 原生语法
- 资源文件扩展名支持：
- MarkDown、LESS、SASS、TypeScript 等高级编译语言
- JSON、YAML、CSV 等文本数据格式
- 图片、音视频等二进制文件的 URI
- 根据依赖树的需要，自动安装资源编译器
- 自动读取项目现有的各种编译器配置文件
- 打包配置按社区习惯设置最优默认值
- 配置文件支持 JSON schema、ES 模块和 TypeScript 类型定义
架构概略
- 编译器转换各类代码文件
- 编译器生成抽象语法树，并查找资源引用语句
- 构造依赖树
- 基于观察者模型增量更新依赖
我有一个梦想
Web standard first!
Make the Web bundler easy again!
