Snowpack را بیاموزید: یک ابزار ساخت Frontend با عملکرد بالا

در این مقاله ، ابتدا نگاهی خواهیم انداخت کیسه برفی – به طور خاص Snowpack 3 ، که در زمان نوشتن مقاله به تازگی منتشر شده است. Snowpack ابزاری ساخت جلویی است که به دلیل ارائه رویکردی متفاوت از ابزاری مانند webpack ، در جامعه مورد توجه بسیاری قرار گرفته است و من مدتی مشتاق بررسی آن بوده ام. بیایید غواصی کنیم!

تاریخچه ابزارهای ساخت

قبل از بررسی Snowpack ، باید لحظه ای سریع وقت بگذاریم تا بفهمیم بسته های بسته مانند webpack چگونه و چرا بوجود آمده اند. فقدان سیستم ماژول جاوا اسکریپت قبل از ماژول های ES2015 به این معنی بود که ، در مرورگر ، نزدیکترین چیزی که می توانیم به ماژول ها داشته باشیم این بود که کد خود را به پرونده هایی تقسیم کنیم که کد را در دامنه جهانی قرار دهند ، زیرا نحوه اشتراک آن بین پرونده ها بود. مشاهده کد به این شکل معمول بود:

window.APP = {}

window.APP.Authentication = {...}
window.APP.ApiLoader = {...}

وقتی Node.js وارد شد و محبوبیت پیدا کرد ، یک سیستم ماژول به صورت CommonJS داشت:

const Authentication = require('./Authentication.js')
const APILoader = require('./APILoader.js')

هنگامی که این مورد به عنوان بخشی از Node محبوب شد ، افراد دوست داشتند بتوانند از آن در مرورگر استفاده کنند. آن زمان بود که ابزارهایی شروع به ظهور کردند که این کار را انجام دادند. آنها می توانند برنامه ای را استفاده کنند که از ماژول های CommonJS استفاده می کند و آن را در یک فایل بزرگ JavaScript با همه موارد بسته بندی می کند. requireحذف شده است ، که می تواند در مرورگر اجرا شود. مرور مرور کنید اولین ابزاری بود که به خاطر می آورم برای انجام این کار استفاده کردم و ، صادقانه بگویم ، احساس جادویی داشت! این تقریباً در همان زمان ایجاد وب پک بود و سایر ابزارها نیز با استفاده از CommonJS پشتیبانی می کردند.

هنگامی که ماژول های ES برای اولین بار معرفی شدند (برای تازه کردن به “درک ماژول های ES6” مراجعه کنید) ، مردم مشتاق استفاده از آنها بودند ، اما دو مشکل وجود داشت:

1. در حالی که مشخصات کامل شد ، مرورگرها از ES Modules پشتیبانی نمی کنند.
2. حتی اگر یک مرورگر از ES Modules پشتیبانی می کند ، شما هنوز هم می خواهید در تولید بسته نرم افزاری باشید ، زیرا بارگیری در همه ماژول ها به عنوان پرونده های جداگانه زمان بر است.

Webpack (و سایر موارد) برای پشتیبانی از ES Modules به روز شده اند ، اما آنها همیشه کد شما را در یک فایل قرار می دهند ، هم برای توسعه و هم برای تولید. این بدان معنی است که یک گردش کار معمول عبارت است از:

1. پرونده ای را در برنامه خود ویرایش کنید.
2. Webpack بررسی می کند چه پرونده ای تغییر کرده و برنامه شما را مجدداً ویرایش می کند.
3. می توانید مرورگر را تازه کنید و تغییر خود را مشاهده کنید. غالباً ، این کار توسط یک افزونه webpack مانند بارگیری مجدد ماژول گرم برای شما انجام می شود.

مسئله در اینجا در مرحله دو وجود دارد زیرا برنامه شما بزرگتر می شود. کار برای بسته بندی وب برای شناسایی یک تغییر پرونده و سپس کشف اینکه کدام قسمت از برنامه شما برای جمع آوری مجدد بسته اصلی می تواند زمان ببرد و همچنین در برنامه های بزرگی که می توانند سرعت جدی را ایجاد کنند. این همان جایی است که Snowpack وارد می شود …

رویکرد Snowpack

نکته مهم فروش Snowpack برای من این است که از مستندات آنها:

Snowpack در حین توسعه به برنامه شما بصورت جداگانه عمل می کند. هر پرونده فقط باید یک بار ساخته شود و سپس برای همیشه ذخیره می شود. هنگامی که یک پرونده تغییر می کند ، Snowpack آن پرونده را دوباره از نو می سازد.

Snowpack از پشتیبانی ماژول های ES در تمام مرورگرهای اصلی کاملاً استفاده می کند و برنامه شما را در مرحله توسعه به صورت بسته نرم افزاری قرار نمی دهد ، اما در عوض هر ماژول را به عنوان یک فایل واحد ارائه می دهد و به مرورگر اجازه می دهد تا برنامه شما را از طریق ES Modules وارد کند. برای جزئیات بیشتر در مورد مرورگرها و پشتیبانی آنها از ماژول های جداشده ES ، به “استفاده از ماژول های ES در مرورگر امروز” مراجعه کنید.

توجه به این نکته مهم است که برای استفاده از Snowpack باید از ES Modules استفاده کنید. شما نمی توانید از CommonJS در برنامه خود استفاده کنید.

با این وجود این س aال مطرح می شود: اگر وابستگی را از npm نصب کنید که از CommonJS استفاده می کند ، چه می کنید؟ اگرچه امیدوارم روزی که اکثر بسته های npm به صورت ES Modules حمل شوند ، ما هنوز راهی عادلانه برای این کار داریم و واقعیت این است که حتی اگر یک برنامه کاربردی را به طور انحصاری در ES Modules بسازید ، در بعضی از زمان ها به احتمال زیاد من به وابستگی نیاز دارم که در CommonJS تألیف شده باشد.

خوشبختانه Snowpack می تواند از پس آن برآید! وقتی این وابستگی را در شما می بیند (بگذارید بگوییم React) node_modules پوشه ، می تواند بسته نرم افزاری باشد فقط این وابستگی را به مینی بسته نرم افزاری اختصاصی خود وارد کنید ، سپس می توانید با استفاده از ES Modules وارد کنید.

امیدوارم که شما می توانید ببینید که Snowpack چرا توجه من را جلب کرد. بیایید آن را فعال کنیم و ببینیم استفاده از یک برنامه چه حسی دارد.

شروع شدن

برای شروع ، من یک پوشه جدید پروژه خالی ایجاد می کنم و اجرا می کنم npm init -y تا مرا بلند کند و بدود. این یک اساسی ایجاد می کند package.json که اگر بخواهم می توانم بعداً وارد آن شوم و ویرایش کنم. همچنین می توانید بدوید npm init بدون -y، باعث می شود npm شما را وادار به پاسخ دادن به س questionsالات برای پر کردن جزئیات در خود کنید package.json. من دوست دارم استفاده کنم -y سریع بلند شدن و دویدن ؛ می توانم ویرایش کنم package.json بعد.

سپس Snowpack را به عنوان یک وابسته به توسعه دهنده نصب می کنم:

npm install --save-dev snowpack

و اکنون دو اسکریپت به متن خود اضافه می کنم package.json:

"scripts": {
  "start": "snowpack dev",
  "build": "snowpack build"
},

این دو نفر را برای ما تنظیم می کند npm run دستورات:

• npm run start Snowpack را در حالت توسعه اجرا خواهد کرد.
• npm run build ساخت تولید Snowpack را اجرا خواهد کرد ، که بعداً در مورد آن بیشتر صحبت خواهیم کرد.

هنگامی که برنامه خود را اجرا می کنیم ، Snowpack کمی سرور توسعه را خاموش می کند که برنامه ما را به صورت محلی اجرا می کند. این به دنبال یک index.html پرونده ، بنابراین بیایید یکی از آن ها را ایجاد کنیم و همچنین ایجاد کنیم app.js، که در حال حاضر فقط وارد سیستم خواهد شد hello world به کنسول:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snowpack testing</title>
</head>
<body>

  <script src="./app.js"></script>
</body>
</html>

console.log('hello world')

حالا می توانیم بدویم npm run start (یا npm start به طور خلاصه – start یکی از npm روشهای چرخه زندگی که در آن نیازی به پیشوند زدن نیست run)

باید ببینید خروجی ترمینال شما به این شکل است:

snowpack

  http://localhost:8080 • http://172.18.33.234:8080
  Server started in 80ms.

▼ Console

[snowpack] Hint: run "snowpack init" to create a project config file. Using defaults...
[snowpack] Nothing to install.

قسمت اول خروجی به ما می گوید Snowpack در حال اجرا است localhost:8080. خط بعدی از ما می خواهد یک فایل پیکربندی Snowpack ایجاد کنیم که به زودی انجام خواهیم داد ، اما این آخرین خطی است که می خواهم برجسته کنم:

[snowpack] Nothing to install.

این Snowpack است که به ما می گوید برای هر ماژول npm که نیاز به سر و کار دارند بررسی شده است و هیچ موردی پیدا نکرده است. در یک لحظه ، ما یک بسته npm اضافه خواهیم کرد و نگاهی خواهیم داشت به نحوه برخورد Snowpack با آن.

ایجاد یک فایل پیکربندی

می توانید بدوید npx snowpack init همانطور که خروجی خط فرمان نشان می دهد ، فایل پیکربندی را ایجاد کنید. تا زمانی که به تولید بسته نرم افزاری نپردازیم ، نیازی به تغییر رفتار Snowpack نخواهیم داشت ، اما اگر این کار را انجام دهید می توانید این پرونده را ایجاد کنید و طیف گسترده ای از گزینه ها را پیکربندی کنید Snowpack را درست همانطور که می خواهید اجرا کند.

نوشتن در ماژول های ES

بیایید یک فایل جاوا اسکریپت دیگر ایجاد کنیم تا ببینیم Snowpack چگونه با چندین پرونده برخورد می کند. من خلق کردم api.js، که تابعی را صادر می کند که نام کاربری را می گیرد و برخی از مخازن عمومی آنها را از GitHub واکشی می کند:

export function fetchRepositories(user) {
  return fetch(`https://api.github.com/users/${user}/repos`)
    .then(response=> response.json());
}

سپس ، در app.js، ما می توانیم این عملکرد را وارد کنیم و از آن استفاده کنیم. در صورت تمایل نام کاربری GitHub من را با نام خود جایگزین کنید!

import {fetchRepositories} from './api.js';
fetchRepositories('jackfranklin').then(data => console.log(data));

این فایل را ذخیره کنید و اگر قبلاً Snowpack را رها نکردید ، دوباره آن را اجرا کنید. در کنسول مرورگر خطایی مشاهده خواهید کرد:

Uncaught SyntaxError: Cannot use import statement outside a module

این به خاطر ماست <script> در فایل HTML ما برچسب گذاری کنید:

<script src="./app.js"></script>

از آنجا که رفتار ES Modules کمی متفاوت از کدی است که از ES Modules استفاده نمی کند ، برای مرورگرها امکان شروع پشتیبانی از ES Modules در همه اسکریپت ها وجود ندارد. انجام این کار تقریباً به طور قطع برخی از وب سایت های موجود را خراب می کند و یکی از اهداف اصلی JavaScript این است که هر ویژگی جدیدی به عقب سازگار است. در غیر این صورت ، هر ویژگی جدید JS ممکن است هزاران وب سایت موجود را خراب کند!

برای استفاده از ES Modules ، تنها کاری که باید انجام دهیم این است که با دادن آن به مرورگر بگوییم script روز یک type از module:

<script type="module" src="./app.js"></script>

و هنگامی که آن را ذخیره می کنید ، مرورگر شما باید به طور خودکار تازه شود (کار خوب دیگری که Snowpack انجام می دهد) و لیستی از مخازن GitHub را که به کنسول وارد شده اند مشاهده خواهید کرد.

ادامه مطالعه Snowpack را بیاموزید: یک ابزار ساخت Frontend با عملکرد بالا در SitePoint.