我可能是全中國最了解 tailwindcss 的開發(fā)者
前言
首先，我要對起這樣的標題感到抱歉，本來想起一個 "我的2年開源之旅" 這樣的標題，但是我知道，這種標題太普通，肯定就沒啥人感興趣看，就像我寫的大部分文章一樣。
于是索性做了一回標題黨(壞笑～)。不過這個標題也不是空穴來風，我也確實比較了解 tailwindcss，圍繞著它的生態(tài)，我陸陸續(xù)續(xù)開發(fā)了:
預設
tailwindcss-miniprogram-preset (小程序預設，已廢棄)
tailwindcss-rem2px-preset (rem轉(zhuǎn)px/rpx預設)
小工具
inline-tailwindcss (內(nèi)聯(lián)tailwindcss)
tailwind-css-variables-theme-generator (css 變量生成器)
轉(zhuǎn)化器
weapp-tailwindcss (小程序使用 tailwindcss 全方面解決方案 官網(wǎng)鏈接 )
tailwindcss-mangle (tailwindcss 混淆器)
UI 組件庫
icestack (CSS UI 庫生成器，可以生成類似 daisyui 這樣的庫 官網(wǎng)鏈接)
開源起始
開發(fā)了這么多庫，自詡已經(jīng)對 tailwindcss 運作原理以及源碼滾瓜爛熟了，不過我的開源最初并不是從 tailwindcss 開始的。
早前工作的時候，我經(jīng)常使用 serverless 相關的技術來部署 nodejs 項目，尤其常用 serverless framework 來進行部署。
當時也主要是興趣使然，也挺想要加入某一個開源生態(tài)的，于是就選中了它，并圍繞著它開發(fā)了很多的垃圾 npm 包(笑～)。
后來你也知道的 serverless 在國內(nèi)一直是不溫不火的。而我從之前那家公司離職之后也找不到下一家有這個場景的了，遂作罷。
后面也陸續(xù)發(fā)布了一些 vue 相關的包和UI組件，不過這種前端圈太卷了，vue團隊里就有幾個卷王(你知道我重點想說的是誰)，每每看他們代碼總是覺得望塵莫及，同時也很羨慕他們。
后來在大抵 2021 年的時候，我接觸到了 tailwindcss, 那時候 windicss 還沒死，托尼小哥的 unocss 還沒發(fā)布出來。
當時就覺得這東西很好啊，原子化的樣式生成器，所寫即所得，可讀性好，還能 shake 掉用不到的樣式，同時也可以通過插件和預設提煉項目公共的樣式部分。
于是在很多自己的項目里開始嘗試使用它，但是我自己的項目很多都是小程序，于是就衍生出了一個想法，想做一個 tailwindcss 小程序兼容版本，于是我的 tailwindcss 開源之旅正式啟程了！
上下求索
為了達到tailwindcss在小程序里使用的目標，一開始我嘗試使用 tailwindcss preset 的方式去解決問題，于是就開發(fā)了 tailwindcss-miniprogram-preset。
然而，它并沒有給我?guī)砗芎玫拈_發(fā)體驗。核心原因在于 preset 的功能太弱了，它無法去轉(zhuǎn)化用戶寫的代碼，只能讓用戶手動去轉(zhuǎn)義，部分寫法與原始的 tailwindcss 不同，這造成了比較大的心智負擔，更不用說它還閹割了許多 tailwindcss 本身的功能。
在閱讀許多的文檔之后，于是我打算寫一個 webpack plugin 在編譯時，來同時轉(zhuǎn)義用戶的所有代碼，這就是 weapp-tailwindcss-webpack-plugin 的雛形了。
開發(fā)之始
可是，當時的我就只會寫一些 vue/react/nodejs 的業(yè)務代碼，webpack plugin,vite plugin,babel plugin,postcss plugin 個個都不會寫。而且我還非要打腫臉充胖子，要用 typescript 來寫，還要用 rollup 去打包。
所以果不其然，受限于自身的水平，寫的非常痛苦。那時候經(jīng)常下班回到家就開始在 Github 上直接去搜索類似的代碼，看看是怎么寫的。然后就是不斷的調(diào)試，理解。抽空我還去學習了一下 jest 并設計了一些單元測試用例用來回歸測試。
終于經(jīng)過不斷的調(diào)試和測試，我在 2022/2/3 號終于發(fā)布了 weapp-tailwindcss-webpack-plugin 的第一個版本！當然那時候還只支持 uni-app cli vue2 項目，因為我自己的項目就是這個搭建的。
更多的平臺
后來我興致勃勃的去知乎等等平臺去發(fā)文章，介紹我這個項目。吸引來了一些用戶來使用，隨即，多框架的問題接踵而至。
那時候小程序開發(fā)框架 uni-app,taro,rax,kbone,mpx,remax 等等各立山頭，都有一定的用戶基數(shù)，它們各自之間的編譯方式，產(chǎn)物都不同，如何去兼容它們呢？
為此我創(chuàng)建了大量各個框架的示例進行測試，測試過程中也做了很大的努力去兼容所有的框架。比如 uni-app 和 taro 的產(chǎn)物就有很大的不同，要去找到一個通用的方式，在 webpack 恰當?shù)臅r機去進行轉(zhuǎn)化。各個框架之間也還有 webpack4/5，postcss7/8 版本的不同，為此也要去兼容等等。
解決了這些問題之后，我為此還創(chuàng)建了 e2e 測試，來保證每個框架的示例都是可運行，且產(chǎn)物在預期內(nèi)的。
就這樣縫縫補補的過了1年左右，后來也比較懶，用戶沒提 issue 就懶得去更新了。
繼續(xù)突破
不過當時 1.x 版本有個大問題沒有解決，那就是 postcss 插件應該如何和 webpack plugin 進行通信的問題。因為當時，插件只能轉(zhuǎn)化產(chǎn)物中 wxml，wxss 和部分 js 動態(tài)的部分，少部分類似于:
const className = 'bg-[#123456]'
<>
<div className={className}>無法被檢測</div>
<div className="bg-[#654321]">可以被檢測</div>
<>
這種在 jsx 代碼外的聲明的是無法被插件檢測到的，除非插件能從 postcss 里直接拿到上下文。于是我研究了一下 tailwindcss 的源碼，用了不太優(yōu)雅的方式解決了這個問題。
隨即 2.x 版本發(fā)布，而用 tailwindcss 開發(fā)小程序的人也漸漸變多了，后面逐漸出現(xiàn)了 vite,glup 插件和暴露原始的 Nodejs API 做二次封裝的需求。
把這些功能實現(xiàn)之后，我感覺項目名稱 weapp-tailwindcss-webpack-plugin 已經(jīng)有點不妥了，索性改名叫 weapp-tailwindcss，同時也發(fā)布了對應的 npm 包
順便看了一些文章和其他開源項目，把 Github 的 CI/CD 給加上了，同時還順手搭建了個粗糙的 官網(wǎng) ?，F(xiàn)在做的也不過是根據(jù)需求把用戶想要的功能填入 weapp-tailwindcss 肚子里。
興趣還是生計？
當然一開始開發(fā)肯定是出自于興趣，作為生計是我想要達到的目標，不過我知道，現(xiàn)在自己還遠遠達不到。開發(fā)這些東西可能能幫到一些人，也有一些用戶會給我些贊助，這些總共加起來應該還不到我一天的工資。
當然我也借助它認識了國內(nèi)許許多多的開源朋友，大家都是為愛發(fā)電，所以心理上早有準備。而我也很高興我可以和開發(fā)朋友們吹牛說: 看！這是我開發(fā)的，厲害吧！
當然我也是一個俗人，也需要激勵。你的 star 和贊助對我來說都是莫大的鼓勵，假如你有 Github 賬號，給我點個免費的 star 可好？
收獲和結(jié)語
實際上現(xiàn)在回過頭想想，自己不過只是做了一件很小的事情，我的那些開源項目又不是那種有開創(chuàng)性的全新項目，而是寄宿于某一個生態(tài)，跟著生態(tài)潮漲潮落，早晚有一天會被遺棄。
不過這段旅程中，我各個方面還是收獲了很多，起碼我再去面試的時候，人家問我懂不懂 ast，寫不寫 plugin，我能羅列展示一堆東西。
在今年8月份的時候，由于公司欠薪長達3月，我和一些同事離職了，想想也是挺遺憾的，當然不是為公司感到遺憾，而是我在那里遇到了非常好的 Boss，頂住上面的壓力為我們著想，不像我以前遇到的大部分都是瘋狂壓榨的類型?？上в捎谫Y金流問題，團隊散了。而現(xiàn)在也已經(jīng)12月了，在我休息了將近4個月之后，我也要繼續(xù)去找工作來養(yǎng)活自己了。
以上就是一條開源小雜魚近2年一些感悟，如果你能把這篇流水賬一樣的文章看到這，我也對你表示感謝。
最后，希望中國開源事業(yè)越來越好！
