swc 替代 babel 最佳实践
共 4509字，需浏览 10分钟
· 2021-09-08
原文作者：fre 作者 - 伊撒尔 原文链接：https://zhuanlan.zhihu.com/p/395608876
最近在工作中使用 swc 替代 babel，总结了一些代码的最佳实践，写一篇文章记录一下
最佳实践一，在 rust 端操作 AST
如果需要操作 AST，一般来说有两种可能，一是在 rust 端解析出 AST，然后序列化并传递到 node 端，node 端再反序列化修改 AST，再序列化传回去……
这样性能会超级差，因为需要频繁序列化反序列化一个复杂的结构
所以最佳实践一，在 rust 端操作 AST，生成一个“最小简单结构”，然后传到 node 端，避开序列化
最佳实践二，使用模式展开
swc 的结构实在太大了……主要是枚举太多，如果使用 match 一层层匹配，会嵌套太深，这种时候，有人会使用 if let 来简化代码，但这不是不够的
pub struct Resolver {
imported: THashSet,
}
impl Visit for Resolver {
fn visit_jsx_opening_element(&mut self, node: &JSXOpeningElement, _parent: &dyn Node) {
if let JSXElementName::Ident(id) = node.name {
let name = id.sym.to_string();
if name == String::from("import") {
for attr in &node.attrs {
if let JSXAttrOrSpread::JSXAttr(v) = attr {
if let Some(JSXAttrValue::Lit(Lit::Str(v))) = &v.value {
self.imported.insert(v.value.to_string());
}
}
}
}
}
}
}
这是一个收集<import/>依赖的 代码示例，可以看到，为了兼顾类型，代码写的并不优雅这里面用到了一个模式展开的技巧来简化代码
if let Some(JSXAttrValue::Lit(Lit::Str(v))) = &v.value
可以说在遍历 swc 的 AST 的时候，这种技巧得多用，不然代码会很臃肿
这是 swc 的类型，枚举，树太深导致的，比如我们需要删除一个节点的时候，一般来讲，我们会把节点类型设置为 Option，删除就是赋值为 None
struct Tree {
node: Option<Box<Tree>>,
}
impl Tree {
fn delete(&mut self){
self.node = None;
}
}
可是 swc 没有！它没给 Option 类型，这就导致删除个节点难于上青天……
最佳实践三，生成新树，而不是修改原先的树
因为你改不了呀，啊哈哈哈
rust 的类型是很严格的，没有 any，没有联合类型，也就是说，原先的树是什么类型，你就得改个完全相同的类型
这可咋整，babal 做的东西一般都是扭曲语义的呢
// input:
<For each={list}/>
// output:
{list.map()} // this is a Stmt, not Expr.
我研究了许久，换了很多不同的方案，看了 swc 官方的源码
总结就是，我们尽可能不要修改原先的树，而是尝试递归生成新的树，当然不一定是一整颗树，可以是子树，借助 swc 的 visit_mut 或者 fold
最佳实践三，swc 只做标记
这是一个大坑，因为 swc 的结构和类型无法改变，所以我们不得不在原有类型上做标记，然后最后一次性做字符串级别的转换
举例子：
<view wx:key=\"111\"></view>
我们需要将 wx:key 替换为 key，但是前者的类型是 NamespacedName 后者是 AttrName，没有办法直接替换
于是我们不改变原有类型，只改变字符串，将 wx:key改为 $removemeandcolon:key
然后我们在打包阶段就可以做字符串级别的替换了
code.replace(/removemeandcolon:/,'')
这也是没有办法的事情，我也很绝望
最佳实践四，忽略 span 类型
module.visit_with(&ast::Invalid { span: DUMMY_SP } as _, &mut c);
这样会避免一些 panic 错误
最佳实践五，两阶段遍历
比如我现在想要下面的 case
// input
<a-component>
<view slot=header>header</view>
</a-component>
// output
<AComponent $slot$header={<view>header</view>}>
</AComponent>
这是一个 slot 转换为 render props 的 case，在 babel 里，我遍历到 slot 的时候，直接往 parent 引用上塞一个 props 就可以了
但 swc 就做不到这个，因为它没有 parent 指针，就算有，也不可变
所以我重新设计了整体的遍历，分两个阶段，第一阶段遍历收集 slot，第二阶段通过 mut_visitor 修改 parent
总结
我们看到，如果是修改语义的 AST 转换，实际上在 swc 中改起来是很困难的，因为结构是完全不同的，rust 不像 typescript，还有 any，有联合类型，有函数重载
rust 的类型是很死板的，所有权也很严格，不允许写编译器不认的代码
所以不得已，只能适应它，然后换用其他方式去设计遍历，比如上面提到的，遍历旧树，生成新树，两阶段遍历等等
当然，大多数的转译器不涉及到语义的修改，比如 JSX => h 这种，就不会这么绝望了
其实押 swc 我有点激进了，但实在没有更好的方案，我还在继续写