我可能是全我国最了解 tailwindcss 的开发者

我可能是全我国最了解 tailwindcss 的开发者

前语

首要,我要对起这样的标题感到抱愧,原本想起一个 "我的2年开源之旅" 这样的标题,但是我知道,这种标题太普通,必定就没啥人感爱好看,就像我写的大部分文章一样。

所以干脆做了一回标题党(坏笑~)。不过这个标题也不是空穴来风,我也的确比较了解 tailwindcss,围绕着它的生态,我陆连续续开发了:

预设

tailwindcss-miniprogram-preset (小程序预设,已废弃)

tailwindcss-rem2px-preset (rem转px/rpx预设)

小工具

inline-tailwindcss (内联tailwindcss)

tailwind-css-variables-theme-generator (css 变量生成器)

转化器

weapp-tailwindcss (小程序运用 tailwindcss 全方面处理方案 官网链接 )

tailwindcss-mangle (tailwindcss 混淆器)

UI 组件库

icestack (CSS UI 库生成器,能够生成相似 daisyui 这样的库 官网链接)

开源开端

开发了这么多库,自诩现已对 tailwindcss 运作原理以及源码滚瓜烂熟了,不过我的开源最初并不是从 tailwindcss 开端的。

早前工作的时分,我常常运用 serverless 相关的技能来布置 nodejs 项目,特别常用 serverless framework 来进行布置。

其时也主要是爱好使然,也挺想要参加某一个开源生态的,所以就选中了它,并围绕着它开发了许多的废物 npm 包(笑~)。

后来你也知道的 serverless 在国内一直是不温不火的。而我从之前那家公司离任之后也找不到下一家有这个场景的了,遂作罢。

后边也连续发布了一些 vue 相关的包和UI组件,不过这种前端圈太卷了,vue团队里就有几个卷王(你知道我要点想说的是谁),常常看他们代码总是觉得望尘莫及,一起也很仰慕他们。

后来在大抵 2021 年的时分,我接触到了 tailwindcss, 那时分 windicss 还没死,托尼小哥的 unocss 还没发布出来。

其时就觉得这东西很好啊,原子化的款式生成器,所写即所得,可读性好,还能 shake 掉用不到的款式,一起也能够通过插件和预设提炼项目公共的款式部分。

所以在许多自己的项目里开端测验运用它,但是我自己的项目许多都是小程序,所以就衍生出了一个主意,想做一个 tailwindcss 小程序兼容版别,所以我的 tailwindcss 开源之旅正式启程了!

上下求索

为了到达tailwindcss在小程序里运用的目标,一开端我测验运用 tailwindcss preset 的方法去处理问题,所以就开发了 tailwindcss-miniprogram-preset

但是,它并没有给我带来很好的开发体会。核心原因在于 preset 的功用太弱了,它无法去转化用户写的代码,只能让用户手动去转义,部分写法与原始的 tailwindcss 不同,这造成了比较大的心智负担,更不用说它还阉割了许多 tailwindcss 本身的功用。

在阅览许多的文档之后,所以我打算写一个 webpack plugin 在编译时,来一起转义用户的一切代码,这便是 weapp-tailwindcss-webpack-plugin 的雏形了。

开发之始

可是,其时的我就只会写一些 vue/react/nodejs 的业务代码,webpack plugin,vite plugin,babel plugin,postcss plugin 个个都不会写。而且我还非要打肿脸充胖子,要用 typescript 来写,还要用 rollup 去打包。

所以果不其然,受限于自身的水平,写的非常痛苦。那时分常常下班回到家就开端在 Github 上直接去查找相似的代码,看看是怎样写的。然后便是不断的调试,理解。抽空我还去学习了一下 jest 并设计了一些单元测验用例用来回归测验。

总算通过不断的调试和测验,我在 2022/2/3 号总算发布了 weapp-tailwindcss-webpack-plugin 的第一个版别!当然那时分还只支持 uni-app cli vue2 项目,因为我自己的项目便是这个搭建的。

更多的渠道

后来我兴致勃勃的去知乎等等渠道去发文章,介绍我这个项目。招引来了一些用户来运用,随即,多结构的问题接二连三。

那时分小程序开发结构 uni-app,taro,rax,kbone,mpx,remax 等等各立山头,都有必定的用户基数,它们各自之间的编译方法,产品都不同,如何去兼容它们呢?

为此我创建了大量各个结构的示例进行测验,测验过程中也做了很大的尽力去兼容一切的结构。比如 uni-apptaro 的产品就有很大的不同,要去找到一个通用的方法,在 webpack 恰当的时机去进行转化。各个结构之间也还有 webpack4/5postcss7/8 版别的不同,为此也要去兼容等等。

处理了这些问题之后,我为此还创建了 e2e 测验,来确保每个结构的示例都是可运行,且产品在预期内的。

就这样缝缝补补的过了1年左右,后来也比较懒,用户没提 issue 就懒得去更新了。

持续突破

不过其时 1.x 版别有个大问题没有处理,那便是 postcss 插件应该如何和 webpack plugin 进行通讯的问题。因为其时,插件只能转化产品中 wxmlwxss 和部分 js 动态的部分,少部分相似于:

const className = 'bg-[#123456]'
<>
  <div className={className}>无法被检测</div>
  <div className="bg-[#654321]">能够被检测</div>
<>

这种在 jsx 代码外的声明的是无法被插件检测到的,除非插件能从 postcss 里直接拿到上下文。所以我研究了一下 tailwindcss 的源码,用了不太优雅的方法处理了这个问题。

随即 2.x 版别发布,而用 tailwindcss 开发小程序的人也渐渐变多了,后边逐渐呈现了 vite,glup 插件和露出原始的 Nodejs API 做二次封装的需求。

把这些功用完成之后,我感觉项目名称 weapp-tailwindcss-webpack-plugin 现已有点不当了,干脆改名叫 weapp-tailwindcss,一起也发布了对应的 npm

趁便看了一些文章和其他开源项目,把 GithubCI/CD 给加上了,一起还顺手搭建了个粗糙的 官网 。现在做的也不过是根据需求把用户想要的功用填入 weapp-tailwindcss 肚子里。

爱好仍是生计?

当然一开端开发必定是出自于爱好,作为生计是我想要到达的目标,不过我知道,现在自己还远远达不到。开发这些东西可能能帮到一些人,也有一些用户会给我些资助,这些总共加起来应该还不到我一天的工资。

当然我也凭借它认识了国内许许多多的开源朋友,我们都是为爱发电,所以心理上早有预备。而我也很高兴我能够和开发朋友们吹嘘说: 看!这是我开发的,凶猛吧!

当然我也是一个俗人,也需求激励。你的 star 和资助对我来说都是莫大的鼓励,假设你有 Github 账号,给我点个免费的 star 可好?

收成和结语

实际上现在回过头想想,自己不过只是做了一件很小的事情,我的那些开源项目又不是那种有开创性的全新项目,而是寄宿于某一个生态,跟着生态潮涨潮落,早晚有一天会被遗弃。

不过这段旅程中,我各个方面仍是收成了许多,起码我再去面试的时分,人家问我懂不懂 ast,写不写 plugin,我能罗列展现一堆东西。

在本年8月份的时分,因为公司欠薪长达3月,我和一些搭档离任了,想想也是挺遗憾的,当然不是为公司感到遗憾,而是我在那里遇到了非常好的 Boss,顶住上面的压力为我们考虑,不像我以前遇到的大部分都是张狂压榨的类型。可惜因为资金流问题,团队散了。而现在也现已12月了,在我休息了将近4个月之后,我也要持续去找工作来养活自己了。

以上便是一条开源小杂鱼近2年一些感悟,假如你能把这篇流水账一样的文章看到这,我也对你表示感谢。

最终,希望我国开源事业越来越好!

附录

我的Github

weapp-tailwindcss

icestack

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。