‏هنوز به build tool نیاز داریم؟

نویسنده از CSS شروع می‌کنه. Autoprefixer همین هفته نزدیک ۵۰ میلیون بار از npm دانلود شده، در حالی که به گفتهٔ او اگه کدت stretch، user-select یا box-decoration-break نداره، دلیلی برای استفاده ازش نمونده. ویژگی‌هایی هم که هنوز پریفیکس می‌خوان — مثل -webkit-text-stroke، -webkit-line-clamp و ::-webkit-scrollbar — چون معادل استاندارد ندارن اصلاً دست ابزار نیستن و باید دستی نوشته بشن.

بحث بعدی syntax lowering ـه: تبدیل CSS مدرن به شکل سازگار با مرورگر قدیمی که PostCSS شروعش کرد و esbuild و Lightning CSS ادامه‌ش دادن. نویسنده می‌گه بیشتر چیزهایی که این ابزارها پایین می‌آرن — رنگ‌های oklch() و lab()، color-mix()، نستینگ و light-dark() — یا الان baseline‌ان یا امسال می‌شن. مهم‌تر اینکه هشدار می‌ده این ترجمه اغلب وفادار نیست: چیزی مثل light-dark() رو نمی‌شه با هیچ دقتی شبیه‌سازی کرد و فاصله‌افتادن بین کدی که نوشتی و کدی که تو devtools می‌بینی، دیباگ رو سخت‌تر می‌کنه.

سراغ Sass که می‌ره، تشخیصش روشنه: بهترین قابلیت‌هاش یکی‌یکی وارد خود CSS شده‌ن، اغلب در شکل بهتر. کاستوم پراپرتی‌ها، نستینگ (از ۲۰۲۳ در همهٔ مرورگرها)، توابع رنگ و رنگ نسبی. حتی خود Sass تابع if() خودش رو به نفع نسخهٔ رسمی CSS منسوخ کرده، و اسپک mixin هم داره تو کرومیوم پیاده‌سازی می‌شه.

یه استثنا هم هست: ترکیب فایل‌های @import. تو یه پروژهٔ no-build هر فایل CSS یه درخواست جداگانه‌ست. نویسنده به Hey.com اشاره می‌کنه که ۱۴۷ تگ لینک استایل تو هدش داره و با اینکه کند نیست و لایت‌هاوس ۹۴ می‌گیره، توجیه‌کردنش سخته. استدلال فنی هم از جیک آرچیبالد میاد: فشرده‌سازی gzip و brotli روی ارجاع‌های پس‌رو کار می‌کنه که فقط داخل یک فایل ممکنه، پس فشرده‌کردن کلی فایل کوچک از یک فایل ترکیب‌شده ناکاراتره.

سمت جاوااسکریپت، مزایای باندل‌کردن — فشرده‌سازی بهتر، حذف کد بی‌استفاده و صاف‌کردن زنجیرهٔ import — به گفتهٔ نویسنده بر ضررش (بی‌اعتبارشدن کل باندل با تغییر یک ماژول) می‌چربه. ولی حد و مرزی هم هست: وبلاگ V8 حتی در ۲۰۱۸ گفته بود برای اپ‌های زیر ۱۰۰ ماژول با عمق وابستگی کم می‌شه باندل نکرد، و ادی عثمانی هم می‌گه تا حدود ۵۰ تا ۱۰۰ اسکریپت کوچک می‌شه بدون ابزار پیش رفت.

بخشی از کاری که باندلرها می‌کردن هم به استاندارد رسیده: ایمپورت JSON با import attributes از اوایل ۲۰۲۵ در همهٔ مرورگرها هست، CSS module script تو کروم و فایرفاکس، و ایمپورت متن تازه در فایرفاکس ۱۵۳ اومده:

import json from "./data.json" with { type: "json" };
import styles from "./styles.css" with { type: "css" };
document.adoptedStyleSheets.push(styles);

جای واقعی درد، وابستگی‌های شخص ثالثه. سهم پکیج‌های صرفاً ESM در npm از ۶٪ در ۲۰۲۱ به ۱۶٪ رسیده و import mapها از اوایل ۲۰۲۳ پشتیبانی کامل دارن، ولی نویسنده نشون می‌ده استفاده از یه پکیج مثل Lit بدون باندلر یعنی نگاشت دستی تک‌تک وابستگی‌های واسط. CDNهای عمومی این رو ساده می‌کنن ولی ریسک آپ‌تایم و امنیت دارن — نمونه‌ش سرنوشت Skypack و ماجرای polyfill.io. جمع‌بندی خودش هم همینه: احتمالاً بهتره از یه باندلر مدرن مثل esbuild یا Rolldown استفاده کنی.

آخرین بخش دربارهٔ ترنسپایلرهاست. Babel تازه در نسخهٔ ۸ دیگه به‌طور پیش‌فرض به ES5 کامپایل نمی‌کنه — تغییری که به گفتهٔ او سال‌ها دیر شده. فیلیپ والتون نشون داده بود یه خط کد با ترنسپایل و پلی‌فیل از ۳۱ بایت به ۱۱٬۲۱۷ بایت می‌رسه، یعنی بار اضافه‌ای که همهٔ کاربران دانلود می‌کنن و هیچ‌کدوم ازش سود نمی‌برن. رضایت توسعه‌دهنده‌ها از ابزارهای بیلد هم از ۲۰۱۶ روی ۳.۶ از ۵ ثابت مونده. امید نویسنده اینه که با بهترشدن استانداردها، ابزارها لاغرتر و ساده‌تر بشن — نه اینکه کلاً کنار گذاشته بشن.

نکات کلیدی:

• سمت CSS: پریفیکس و پیش‌پردازنده تقریباً بی‌موضوع شده‌ن، ترکیب @import و مینیفای نه
• syntax lowering وفادار نیست و دیباگ رو سخت می‌کنه
• باندل‌کردن JS هنوز می‌ارزه، ولی زیر ۱۰۰ ماژول اجباری نیست
• import attributes و modulepreload بخشی از کار باندلر رو استاندارد کرده‌ن
• سخت‌ترین بخش no-build، مدیریت وابستگی‌های واسطهٔ npmـه