基于浏览器的实时构建探索之路

1.

2. 基于浏览器器的实时构建探索之路路 RichLab 花呗借呗前端团队 - 姜维（⽞玄寂）

3. ⾃自我介绍 dora spm ant-tool amb IDE umi babel Gravity webpack pigcan 猪罐头

4. 基于浏览器器实时构建的案例例

5. ⽬目录 • 背景 • 机遇与挑战 • 架构⼤大图 • 专题深⼊入 • 未来

6. 背景

7. 背景 - 前端构建史模块化: 模块定义源⽣生态 bundler 2011 复⽤用性: 粒⼦子化合并、压缩 2019 2013 Don’t Build That App! Luke Jackson / April 4, 2019 A Future Without Webpack Fred K. Schott / March 12, 2019

8. 背景 - 声⾳音的背后 - 学习曲线 • • • • • • • 前端构建的概念如何在琳琅满⽬目的打包⼯工具中做选择如何安装环境，如何执⾏行行构建，如何执⾏行行调试如何配置 - webpack、webpack loaders and plugins etc. 如何写插件 - babel APIs、webpack APIs etc. 如何调试插件如何解决依赖升级 - babel 5 -> 6 -> 7, webpack 1 -> 2 -> 3 -> 4 -> 5

9. 背景 - 声⾳音的背后 - 包管理理

10. 背景 - 声⾳音的背后 - 包管理理太阳中⼦子星⿊黑洞洞 node_modules

11. 背景 - 趋势 2019 云化可视化编程？包管理理 Bundler ？资源分发资源加载

12. 机遇与挑战

13. 机遇 - 2019 年年在发⽣生哪些变化 Pro / Low Code

14. 机遇 - 变化背后的构建专业 Codesandbox、Stackbiltz、Gitlab Web IDE、Ali Cloud IDE 辅助 Outsystems、Mendix、云凤蝶 - 编辑器器 / 画板三种态度 - 编辑器器 / 画板 + 限制性的研发环境 - 编辑器器 / 画板 + 开放性的研发环境两种⽅方案 - 容器器 - 基于浏览器器的加载策略略

15. 机遇 - 变化背后的构建两种⽅方案两种类型 - 容器器 - 基于浏览器器的加载策略略 - 服务端能⼒力力的输出 - 客户端能⼒力力的释放优势: 服务端拥有和本地研发环境⼀一致化的环境缺点: 即时性较差、效率较差、⽆无法离线、成本⾼高昂优势: ⽆无服务端依赖、即时性、⾼高效率、可离线运⾏行行缺点: ⽆无法输出系统级能⼒力力，所有能⼒力力建设都围绕着浏览器器技术

16. 机遇 - ⾯面向未来

17. 机遇 - 声⾳音 Don’t Build That App! Luke Jackson / April 4, 2019 A Future Without Webpack Fred K. Schott / March 12, 2019

18. 机遇 - 声⾳音背后 Bundless

19. 机遇 - 声⾳音背后 - Bundless 的实现 — 模块加载器器：获取依赖 -》编译依赖 systemjs 0.21.x & JSPM 1.x @stackblitz @codesandbox — Native-Module 加载⽅方案 systemjs >= 3.x & JSPM 2.x @pika/web

20. 机遇 - 未来云 + Browser Based Bundless + Web NPM Gravity

21. Gravity 的挑战 — 如何基于浏览器器实现： - nodejs ⽂文件系统 - nodejs ⽂文件 resolve 算法 - nodejs 内置模块 - 任意模块格式的加载 - 多媒体⽂文件 - 单⼀一⽂文件多种编译⽅方式 - 缓存策略略 - 包管理理 - …… 总结为： - 如何设计资源⽂文件的加载器器 - 如何设计资源⽂文件的编译体系 - 如何设计浏览器器端的⽂文件系统 - 如何设计浏览器器端的包管理理

22. Gravity 架构⼤大图

23. 我们现在⾛走的路路 Gravity 核⼼心插件系统编译器器 preset babel code style 编译链⼯工具类 validator rule set runtime config error json cache loader factory entry svg …… …… helper …… gravityfs / with multiple backends offgravityjs/ systemjs/ runtime module loader gravity CDN/ NPM web solution …… tapable oﬀgravityjs browser-resolve gravityfs browserfs systemjs less ……. babel-standalone BASE

24. 核⼼心在解决的问题编译体系⽂文件系统插件系统编译器器 preset babel code style 编译链加载器器包管理理⼯工具 validator rule set runtime config error json cache loader factory entry svg …… …… helper …… …… gravityfs / with multiple backends offgravityjs/ systemjs/ runtime module loader gravity CDN/ NPM web solution

25. 名词解释 index.axml 对应的 Ruleset Transpiler 代码 A 转换为代码 B 转换器器 JSONTranspiler Preset 是⼀一份构建描述集合，该集合包含了了模块加载器器⽂文件加载的描述，转换器器的描述，插件的描述等。 Ruleset 具体⼀一个⽂文件应该被怎么样的 transpilers 来转换。 demoPreset

26. Gravity 的消费链⼩小程序 Web IDE 云凤蝶载体 …… Preset ⼩小程序 React Vue appx CRA Vue-cli …… …… …… Gravity 核⼼心更更多的垂直业务资源⽂文件加载策略略描述

27. Gravity 到底是什什么 Gravity 是实现浏览器器实时构建的事件流集合，它不不指代某种通⽤用业务。

28. 专题深⼊入

29. 专题 1：插件机制

30. Gravity 是如何运作的 emit Plugin done 1 code preset 3 bfs 2 validate 2 Gravity - Core 7 transpile 4 fetch-data 5 generate -entry 1 loader 6

31. Gravity 是如何运作的 Gravity 本质上是事件流机制，它的核⼼心流程就是将插件连接起来。 • • • 如何进⾏行行事件编排如何保证事件执⾏行行的有序性如何进⾏行行事件的订阅和消息的分发

32. 似曾相识 Webpack <- Tapable

33. Tapable sync Tapable async SyncHook 串串⾏行行 SyncBailHook 串串⾏行行，有返回则中断 SyncWaterfallHook 串串⾏行行，上个订阅返回传递给下个 SyncLoopHook 循环，订阅⾄至返回 undefined AsyncParallelHook 并发 AsyncParallelBailHook 并发，有返回则中断，执⾏行行最后回调 AsyncSeriesHook 串串⾏行行，不不关注回调 AsyncSeriesBailHook 串串⾏行行，回参不不为null，执⾏行行最后回调 AsyncSeriesWaterfallHook 串串⾏行行，回参可以作为下⼀一回调参数

34. 举个例例⼦子 2 ⾃自定义插件订阅事件 Core - Plugin Core 1 申明⼀一个可以被订阅的事件 3 绑定订阅事件 4 分发事件

35. Gravity 的抽象 Core Plugin Custom Plugins 编排事件并分发声明事件订阅事件

36. 专题 2：如何实现编译链

37. 回看⽂文件编译规则 Ruleset ⽂文件编译规则集合 Ruleset-A Ruleset-B … Ruleset-C Ruleset-D lessPlugins base64 less png plugins 语义配置 presets transformConfig …… 转换器器 babel appx …

38. Ruleset 的含义 index.axml 对应的 Ruleset index.axml Babel-Transpiler Ruleset-A Appx-Transpiler

39. 编译链的含义 index.axml result Appx-Transpiler result Babel-Transpiler 下级消费链路路

40. 编译链的本质解决事件有序性的问题

41. 似曾相识 Tapable

42. AsyncSeriesWaterfallHook sync Tapable async SyncHook 串串⾏行行 SyncBailHook 串串⾏行行，有返回则中断 SyncWaterfallHook 串串⾏行行，上个订阅返回传递给下个 SyncLoopHook 循环，订阅⾄至返回 undefined AsyncParallelHook 并发 AsyncParallelBailHook 并发，有返回则中断，执⾏行行最后回调 AsyncSeriesHook 串串⾏行行，不不关注回调 AsyncSeriesBailHook 串串⾏行行，回参不不为null，执⾏行行最后回调 AsyncSeriesWaterfallHook 串串⾏行行，回参可以作为下⼀一回调参数

43. 问题被简化为如何动态创建 AsyncSeriesWaterfallHook 事件，以及如何分发

44. 专题 3：⽂文件系统和包管理理

45. ⽂文件系统站在巨⼈人的肩膀上

46. ⽂文件系统 backends FileSystem API

47. ⽂文件系统如何介⼊入包管理理 1 思路路：浏览器器内实现 NPM NPM • • • 包信息拉取包依赖处理理包安装 …… • • 依赖拓拓扑结构⽂文件编译 browserfs • 存储

48. ⽂文件系统如何介⼊入包管理理 1 思路路：浏览器器内实现 NPM 的缺点： • • • 慢存储量量⼤大依赖 NPM Scripts 的包如何解决完整的移植 NPM 在⾯面向浏览器器时这种包管理理的形式是否合理理？

49. Turbo CDN 引起的思考 https://medium.com/stackblitz-blog/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403

50. Turbo CDN 引起的思考服务化数据结构 NPM • • • 包信息拉取包依赖处理理包安装 …… • • 依赖拓拓扑结构⽂文件编译 browserfs • 存储

51. 基于⽹网络的⽂文件系统 - unpkg / jsdelivr 结构获取 package 服务端 meta 依赖结构 bfs tree tree bfs dynamic-load file ⽂文件获取 package/file

52. 基于⽹网络的⽂文件系统 - 本质 • 下发策略略 • 桥接浏览器器⽂文件系统 - 依赖的下发策略略 - 基于项⽬目维度 - 基于⼊入⼝口⽂文件分析的⾸首次下发逻辑 - 默认策略略不不满⾜足时，动态下发 - 数据结构记录依赖关系 - 缓存依赖信息 - 数据结构和浏览器器⽂文件系统建⽴立桥接 - ⽂文件 resolve，读取

53. 未来

54. PVC • Pipelined 流⽔水线化垂直业务场景所对应的 Preset 的产出，可以按着某个流程，⽤用极少的成本⾃自由组合⼀一下就可以使⽤用。 • Visualized 可视化所有搭建 Preset 、以及 Preset 内配置都为可视化⽅方式露露出 • Clouds 云化能⼒力力服务化

55. 总结

56. 总结浏览器器的实时构建 - 如何设计资源⽂文件的加载器器 - 如何设计资源⽂文件的编译体系 - 如何设计浏览器器端的⽂文件系统 - 如何设计浏览器器端的包管理理

57. 感谢聆听

58. 演讲调查问卷个⼈人微信号