跳到主要内容

技术演进

目前 weapp-tailwindcss 使用:

  • babel 来处理 js/wxs
  • htmlparser2 来处理 wxml
  • postcss 来处理 wxss

wxml

使用 htmlparser2 已经是 v2 版本后期的事情了

一开始使用的是 @vivaxy/wxml 这是一个 wxmlast 工具

但是它已经很久没有更新了,在遇到内联的 wxs 的时候,会直接挂掉

后续使用正则来出来,但是 正则 同样是有问题的,比如这样一个 case:

<view class="{{2>1?'xxx':'yyy'}}"></view>

由于 2>1的存在,它会提前匹配并进行返回,所以还是要使用 ast 工具才能做到精确。

parse5 对 html5 是严格的匹配,不怎么适用于 wxml

所以最终选择 htmlparser2 来处理 wxml

babel

这里主要有1个演进原先是

@babel/parser->@babel/traverse->@babel/generator

但是这样,相当于重新生成了一遍用户的 js,同时 sourcemap 也会错乱

所以后续改成了 @babel/parser->@babel/traverse->magic-string#replace 的方式,做精确匹配

postcss

这里的演进比较多,也就是相当于加入了多个 postcss 插件进行转换。