halo，大家好，我是 132，在 2020 年最后一天，写一篇总结……那个，据说在掘金写文章，必须得要标题不要脸，才有人看，我信了
搞架构之前
今年七月份，我拿着一张学位证，一张毕业证，正式离开学校，开启了真正的职业生涯
我妈泪奔：别人家的妈妈都抱孙子三世同堂了，而我却成留守老人了……
就这样，我先是入职了一家音频公司，决心为爱发电，没想到遭到了毒打，歧视应届生工资低都没啥，主要是人家直接告诉我：没爱
我大概也就伤心了一二三四秒吧，就……请看第二段
提出想法
我终于入职了新公司，感谢 leader 的信任，让我一个“年轻人”做架构方面的内容
真的入职了架构组，我才意识到现实和脑补之间的差距……公司中的架构，往往不是你写个啥框架，更多的是业务架构，是各种轮子的组合与封装
我分析了我们公司原有的小程序架构，发现真的很复杂，整个工程的开发链路实在太长了
我和 leader 说，我想写一个打包器，移除掉所有 webpack 和 rollup 的打包过程，一次性解决链路问题
其实大家都发现了类似的事情，RN 团队也单独写了一套打包工具叫 metro，我认为我的想法是足够理智和靠谱的
设计
真的很感谢 leader 的信任，我可以正式开工了
这一张图中，包含了太多的东西，每一个环节都可以详细说
总体思路差不多是这样的：
1. 将 wxml/wxss/wxs 转译为 jsx/css/js
2. 使用 fre 作为渲染框架，打包出 umd
3. 使用 berial 跑起来多个 umd
可以看到，整个链路非常流畅，一句命令就可以将微信小程序源文件，打包成能跑在 h5 端的项目
你可以理解为，我写了个 metro，但具体的细节有所不同，继续看
Compiler
对应第一步，也就是需要将 wxml/wxs/css 编译成可以被识别的 jsx/css/js
其实最主要的是 wxml 转 jsx，这块我单独写了一个 wxml-parser
这一步背后涉及到一些编译原理的知识
其中，parser 部分，我用了一次大遍历，直接从字符串生成 AST，没有经过 token 的步骤，这么做也是为了缩减维护量
generator 的部分，我借鉴了 jsx-lite 的思路，将其编译为 jsx 而不是 h 函数
这么做的目的是为了能够走到第二步的 babel 中
Builder
经过第一步编译，我们有了 jsx/css/js 文件，接下来就是很重要的打包了
打包这块其实套路也是固定的，如果你看过 webpack，rollup 等打包工具的代码，你会发现它们其实只做了一件事：构建依赖图
在构建这张图的过程中，还要做一件事，那就是对文件的转译，为此，需要使用 babel/postcss/posthtml 进行转译
是的你没看错，上一步的编译器只是对 wxml 进行编译，而 css 和 js 是经过 babel 和 postcss 做修改的
与此同时，我花了一周时间研究 parcel 源码，因为它很巧妙地使用了树这个结构，而不是图
这一步是整个项目最核心的部分，这也是同类框架比如 taro 所没有的部分
我们经过 babel、postcss 不是未来直接改 js、css，而是“分析”内容，然后将有用的信息放到树上
之后我们操作的是树，而不是直接操作 ast
runtime
经过打包，我们得到了可以运行的文件了，然后整个 runtime 其实包括了两个框架：fre 和 berial
这俩框架都说我写的，如果我没写它们，可能就要使用 react 和 single-spa 了
现在想来，我还是很适合做架构的，需要的东西很多，而我恰好，全都有
fre 是我写的前端框架，前天我发布了 fre2，它在算法，尺寸等方面都比 react 好得多
berial 是我写的微前端框架，它不需要封装 single-spa，所以更加可控
这部分其实只是 runtime 的封装，就没啥好说的啦
问答时刻
问答时刻，我脑补几个问题：
- 和 taro 等同类轮子有啥不同？
-
业务层面的不同，taro 是 react 转小程序，我是小程序转 fre，是相反的，意思是无论如何你都可以保证微信小程序一个端，在保住微信的前提下，再去转其他端
-
从源码层面，上面说到的 taro 是直接修改 ast，没有构建依赖树的过程，完全的 case by case，而我写轮子一般更注重数据结构，因为无论什么轮子，都有一个特点，那就是将实际问题转化为数据结构，然后用算法思维去思考和解决
- fre 和 berial 敢在生产阶段使用吗？
请注意，微信转 h5，无论如何，你都可以保住微信这一端，而 h5 端是你一句命令得到的，是白捡的一个端……它只要能跑，你就赚了
其实你用 react 和 qiankun 啥的也阔以，这部分 runtime 不是很重要，只是 fre 和 berial 对我来说更可控
- fre2？
fre2 发布，确实是我今年最开始的事情，我一般是上班时间搞公司的轮子，下班时间就继续优化 fre，两不耽误
总结
以上，这就是我在架构组做的事情，这整个思路说实话需要的东西蛮多的，上面列举的轮子我都研究了一番，说实话一个人搞压力山大
集大家所长，看得多，想得多，写得多，才能临危不乱
