آشنایی با Vite و نحوه‌ی کار آن

JavaScript build tool ها درک ما از نحوه ساخت برنامه های جاوا اسکریپتی را به طور کل تغییر داده اند. آیا می دانید JavaScript build tool ها چه ابزارهایی هستند؟ ابزارهایی که کدهای شما را مدیریت می کنند و آن ها را از کد development (مرحله توسعه) به کد production (مرحله تولید) می رسانند و مسائلی مانند وابستگی های برنامه را مدیریت می کنند. از مشهورترین ابزارها در این زمینه می توان به webpack و grunt و Gulp و Browserify و امثال آن ها اشاره کرد. البته JavaScript build tool ها کارهای بسیار بیشتری از bundle کردن کدها می کنند اما چند مثالی که زدم کلیت مسئله را برایتان توضیح می دهد.

ما در این مقاله به بررسی یکی از این JavaScript build tool ها به نام Vite می پردازیم.

پیش نیازها

برای مطالعه این مقاله باید با مباحث زیر آشنایی داشته باشید:

• استفاده از نسخه دهم Node.js یا جدیدتر
• استفاده از نسخه پنجم NPM یا جدیدتر
• تجربه کلی از نحوه عملکرد فریم ورک های جاوا اسکریپتی (ترجیحا Vue)

Vite چیست؟

در آوریل سال ۲۰۲۰ آقای Evan You (توسعه دهنده فریم ورک Vue.js) به فکر راه اندازی سرور توسعه ای به نام Vite کرد. در ابتدا Vite تنها یک سرور توسعه برای کامپوننت های تک فایلی در Vue.js بود (single file component) اما بعد ها توسعه پیدا کرد تا جایی که در حال حاضر یک سرور توسعه برای تمام برنامه های جاوا اسکریپتی است.

ویژگی جالب Vite این است که پروژه های ما را bundle نمی کند (کدها را در یک فایل ادغام نمی کند) بلکه از ماژول های ES در جاوا اسکریپت استفاده می کند. این ویژگی تفاوت اصلی Vite و دیگر سرورهای توسعه است و باعث می شود سرعت Vite بسیار بالا باشد.

نکته: Vite یک تازه کار محسوب می شود و از زمان ساخت آن هنوز یک سال نیز نگذشته است بنابراین انتظار می رود باگ های خاصی داشته باشد. به همین دلیل پیشنهاد می شود فعلا از آن برای پروژه های بسیار حساس خود استفاده نکنید مگر اینکه با آن آشنایی کامل داشته باشید.

نحوه کار Vite چگونه است؟

یکی از دلایل اصلی محبوبیت module bundler ها در زمان حاضر این است که هنگام معرفی ES6 Modules در زبان جاوا اسکریپت در سال ۲۰۱۶، مرورگرها به طور صحیح از ES6 Modules پشتیبانی نمی کردند و این مسئله تا مدت زیادی ادامه داشت بنابراین module bundler ها که این کاستی را جبران می کردند به راحتی محبوب شدند. البته باید خاطر نشان کرد که امروزه بسیاری از مرورگرهای مدرن از این ماژول ها پشتیبانی می کنند. برای استفاده از آن ها باید در صفحات HTML خود و در تگ <script> از خصوصیت "type="module استفاده کنیم:

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

بر اساس توضیحات رسمی Vite نحوه کار آن بدین شکل است که این دستورات import را دریافت کرده و آن ها را مستقیما در مرورگر اجرا می کند. هر مرورگری که از این دستورات پشتیبانی کند به طور خودکار آن ها را parse می کند و سپس درخواست های HTTP را برای هر کدام از ماژول ها به سرور توسعه ما ارسال کرده و فایل های مورد نظرش را دریافت می کند. این مسئله باعث سرعت بسیار بالای Vite نسبت به رقیبان خود می شود. بر اساس آمارهای اعلام شده راه اندازی اولیه Vite در حدود ۱۴۰ میلی ثانیه طول می کشد اما Vue-Cli حدود ۱۹۰۰ میلی ثانیه طول خواهد کشید. خود آقای Evan You نیز در حساب توییتر خودشان چنین توییتی را پست کرده اند:

vue-next-webpack-preview cold server start: 1909ms / compiled for first view: 2732ms




vite cold server start: 129ms

یعنی راه اندازی اولیه پروژه vue-next با webpack حدود ۱۹۰۹ میلی ثانیه طول کشیده است و اولین view یا اولین چشم انداز از پروژه کامپایل شده بعد از ۲۷۳۲ میلی ثانیه انجام شده است در حالی که Vite این کار را در ۱۲۹ میلی ثانیه انجام می دهد.

قابلیت های خاص Vite

Vite قابلیت های کاربردی و خاصی را دارد که برای همه توسعه دهندگان جذاب خواهند بود. البته بعضی از این قابلیت ها کمتر در دیگر module bundler ها و build tool ها دیده شده یا اصلا دیده نمی شود.

قابلیت Bare module resolving: قابلیت bare import به import کردن یک بخش خاص از یک ماژول اشاره دارد. حتما شما با دستوراتی مانند 'import { createApp } from 'vue روبرو شده اید. در این دستور فقط createApp را از پکیج Vue وارد کرده ایم. مرورگرها هنوز از این قابلیت پشتیبانی نمی کنند اما Vite فایل های جاوا اسکریپتی شما را بررسی کرده و این دستورات را به درستی اجرا می کند.

قابلیت Hot module replacement: این قابلیت که به اختصار HMR نامیده می شود یکی از قابلیت های بسیار کاربردی در هنگام توسعه است. زمانی که یکی از فایل های جاوا اسکریپتی شما تغییر کند این قابلیت، تغییر را تشخیص داده و مرورگر را مستقیما به روز رسانی می کند بدون اینکه نیازی به refresh کردن آن باشد. Vite در documentation خود توضیح داده است که قابلیت HMR اهمیتی به تعداد ماژول های شما نمی دهد بنابراین هر چقدر هم که پروژه شما بزرگ باشد باز هم سرعت ایجاد تغییرات در مرورگر زیاد خواهد بود. اگر با build tool های مختلف (مخصوصا webpack) کار کرده باشید می دانید که زمان ساخت نهایی (سرعت HMR) یکی از رایج ترین شکایت های توسعه دهندگان در این زمینه است.

قابلیت On-demand compilation: از آنجایی که Vite از ES Modules استفاده می کند فقط فایل هایی را کامپایل می کند که در مرورگر درخواست شده اند. به عبارت دیگر فقط فایل هایی کامپایل می شوند که در نمایش صفحه فعلی دخیل هستند و فایل های دست نخورده نیز خطای ۳۰۴ (not modified) را در مرورگر برمی گردانند. این مسئله Vite را از دیگر bundler های موجود جدا می کند چرا که این bundler ها تمام فایل های پروژه شما را کامپایل می کنند و قبل از اینکه بتوانید آن ها را ویرایش کنید، کدها را bundle می کنند (در یک فایل قرار می دهند). این موضوع باعث می شود که قدرت Vite در پروژه های بزرگ چند برابر شود.

قابلیت Configuration option: احتمالا شما هم حدس می زنید که Vite مانند webpack قابلیت پیکربندی و اعمال تنظیمات خاص را دارد. این کار با استفاده از فایلی به نام vite.config.js انجام می شود که البته می توانید آن را به صورت تایپ اسکریپت نیز بنویسید (vite.config.ts). شما باید این فایل را در مسیر اصلی پروژه خود قرار بدهید اما می توانید از روش دیگری نیز استفاده کنید؛ شما می توانید با استفاده از دستور vite --config my-config.js به صورت خاص آدرس فایل پیکربندی خود را به Vite بدهید به طوری که به جای my-config.js نام فایل خود و آدرس آن را قرار دهید.

این قابلیت ها مهم ترین قابلیت های Vite هستند اما تنها قابلیت های موجود نیستند. به طور خلاصه می توانیم به این قابلیت ها نیز اشاره کنیم:

• پشتیبانی از فایل های tsx و jsx
• پشتیبانی کامل از تایپ اسکریپت
• مدیریت URL منابع پروژه
• پشتیبانی از پیش پردازنده های CSS مانند SASS و همچنین ماژول های CSS
• پشتیبانی از متغیر های محیطی (environment variables)

استفاده عملی و ساده از Vite

در قدیم بهترین و ساده ترین راه استفاده از Vite استفاده از پروژه create-vite-app بود که به صورت پیش فرض از Vue.js استفاده می کرد. این پروژه از قبل تنظیم شده بود و هیچ نیازی به پیکربندی توسط شما نداشت بنابراین سرعت کار را بالا می برد. البته این پروژه از React و Preact نیز پشتیبانی می کرد اما به همین سه گزینه محدود بود. قبلا اگر می خواستید از غیر Vue.js استفاده کنید باید با استفاده از template-- این موضوع را مشخص می کردید اما حالا دیگر نیازی به این کار نیست. در عین حال من هم روش قدیمی و هم روش جدید را برایتان توضیح می دهم.

در روش قدیمی اگر از کاربران npm بودید باید با دستور زیر این پروژه را نصب می کردید:

npx create-vite-app testing-vite

اما اگر از yarn استفاده می کردید، دستور زیر را اجرا می کردید:

yarn create vite-app testing-vite

testing-vite در دستورات بالا همان نام پروژه ما بود.

اگر به صفحه پروژه create-vite-app سری بزنید متوجه می شوید که پروژه در گیت هاب آرشیو شده است (دیگر توسعه داده نشده و رها شده است). به همین دلیل توصیه می کنم به هیچ عنوان از دستورات بالا استفاده نکنید. دلیل آرشیو شدن پروژه create-vite-app معرفی پروژه جدید create-app در vite است که همه چیز را به صورت یکجا در اختیار شما می گذارد. در واقع این پروژه از تمام تکنولوژی های زیر پشتیبانی می کند:

• جاوا اسکریپت خالص (vanilla)
• Vue و Vue-ts
• React و React-ts
• Preact و Preact-ts
• Lit-element و Lit-element-ts
• Svelte و Svelte-ts

پسوند ts مخفف تایپ اسکریپت است. من پیشنهاد می کنم همیشه از آخرین نسخه vite استفاده کنید. Vite نوپا بوده و دائما در حال توسعه است بنابراین بسته به اینکه چه زمانی این مقاله را مطالعه می کنید ممکن است برخی از ویژگی های آن تغییر کرده باشد. حتما قبل از اجرای این دستورات، وب سایت رسمی Vite را نیز بررسی کنید.

برای نصب این پروژه جدید باید دستور زیر را در ترمینال خود اجرا کنید:

npm init @vitejs/app

همچنین کاربران Yarn می توانند از این دستور استفاده کنند:

yarn create @vitejs/app

با اجرای این دستور چند سوال از شما پرسیده می شود. اولین سوال بدین شکل است:

Need to install the following packages:

  @vitejs/create-app

Ok to proceed? (y)

یعنی با اجرای این دستور پکیج vitejs/create-app برایتان نصب خواهد شد. در اینجا حرف y را تایپ کرده و enter بزنید. در مرحله بعدی Project Name یا نام پروژه از شما پرسیده خواهد شد. من نام پروژه خودم را Roxo می گذارم. در مرحله بعدی از شما خواسته می شود که تکنولوژی مورد نظرتان برای پروژه خود را انتخاب کنید. گزینه های ممکن همان گزینه هایی است که توضیح دادم:

Need to install the following packages:

  @vitejs/create-app

Ok to proceed? (y) y

✔ Project name: · Roxo




Scaffolding project in /media/amir/Development/Roxo Academy/Vite/Roxo...

? Select a template: …

▸ vanilla

  vue

  vue-ts

  react

  react-ts

  preact

  preact-ts

  lit-element

  lit-element-ts

  svelte

  svelte-ts

من فعلا Vanilla را انتخاب کرده و کلید Enter را فشار می دهم. با انجام این کار یک پوشه به نام Roxo برایتان ساخته می شود (نام پروژه) و سپس نتیجه زیر را در ترمینال مشاهده می کنید:

Done. Now run:




  cd Roxo

  npm install

  npm run dev

دستور cd Roxo باعث ورود شما به پوشه Roxo می شود. دستور npm install وابستگی های پروژه را نصب می کند. بسته به اینکه از چه تکنولوژی خاصی استفاده کرده باشید ممکن است npm install کمی زمان بر باشد اما از آنجایی که من Vanilla (جاوا اسکریپت خالی) را انتخاب کرده ام کار در چند ثانیه تمام می شود. سپس npm run dev نیز سرور توسعه را اجرا می کند و نتیجه زیر را در ترمینال به شما نمایش می دهد:

vite v2.1.2 dev server running at:




  > Local:    http://localhost:3000/

  > Network:  http://192.168.1.102:3000/




  ready in 360ms.

به عبارتی پروژه شما در پورت ۳۰۰۰ از localhost میزبانی می شود. ظاهر این پروژه بسیار ساده است و فقط عبارت Hello Vite را در مرورگر خود مشاهده می کنید. در صورتی که به پوشه Roxo نگاهی بیندازید متوجه حضور چند فایل ساده می شوید. یکی از این فایل ها package.json است که دستورات زیر را در خود دارد:

{

  "name": "Roxo",

  "version": "0.0.0",

  "scripts": {

    "dev": "vite",

    "build": "vite build",

    "serve": "vite preview"

  },

  "devDependencies": {

    "vite": "^2.1.0"

  }

}

همانطور که گفتم npm run dev باعث اجرای پروژه در مرورگر می شود اما نسخه development (در حال توسعه ی) برنامه شما را نشان می دهد در حالی که npm run serve نسخه production (نسخه نهایی و کامپایل شده) را در مرورگر نمایش خواهد داد. در نهایت دستور npm run build را نیز داریم که نسخه نهایی پروژه شما را ساخته و به شما تحویل می دهد. با اجرای دستور npm rnu build یک پوشه به نام dist برایتان ساخته می شود که حاوی پروژه نهایی شما است. به همین راحتی!

طبیعتا برای استفاده از یک build tool کاملا جدید نیاز به مطالعه documentation آن را خواهید داشت و این مقاله یک دوره کامل برای ارائه این توضیحات نیست بنابراین این کار را به خودتان می سپارم.

پشتیبانی مرورگرها

Vite به صورت پیش فرض کدها را برای مرورگرهایی کامپایل می کند که از ES6 Modules پشتیبانی کنند. این پشتیبانی حدودا از سال ۲۰۱۸ به اکثر مرورگرها مانند کروم، فایرفاکس، edge و امثال آن ها اضافه شده است. به عبارتی تمام مرورگرهای زیر پشتیبانی می شوند:

• نسخه ۶۱ گوگل کروم و نسخه های جدیدتر
• نسخه ۶۰ فایرفاکس و نسخه های جدیدتر
• نسخه ۱۱ سافاری و نسخه های جدیدتر
• نسخه ۱۶ اج (edge) و نسخه های جدیدتر

این پشتیبانی بسیار عالی است و حدود ۹۰ درصد کاربران شما به قطع این نسخه ها را دارند (کمتر کسی است که ۲ یا ۳ سال کامل مرورگر خود را به روز رسانی نکرده باشد) اما اگر به دلیلی مجبور به پشتیبانی از مرورگرهای قدیمی تر هستید باید خصوصیت build.target را در فایل پیکربندی (vite.config.js) روی ES5 قرار بدهید. مقدار پیش فرض این خصوصیت روی modules تنظیم شده است که به همان ES6 Modules اشاره می کند. البته اگر می خواهید از نسخه های بسیار قدیمی مرورگرها نیز پشتیبانی کنید (قدیمی تر از ES5 که بسیار بعید است) باید از پکیج vitejs/plugin-legacy@ استفاده کنید.

گزینه های CLI

همانطور که قبلا هم دیدید، Vite یک CLI یا Command Line Interface دارد. به طور مثال اگر نمی خواهید در هنگام ساخت پروژه به تک تک سوالات آن جواب بدهید، می توانید با استفاده از flag خاصی به نام template-- نوع پروژه خود را مشخص کنید. به مثال های زیر توجه کنید:

# npm 6.x

npm init @vitejs/app my-vue-app --template vue

# باید دو علامت خط فاصله اضافه را نیز قرار دهید npm در نسخه های هفت به بعد

npm init @vitejs/app my-vue-app -- --template vue




# yarn

yarn create @vitejs/app my-vue-app --template vue

در این دستورات my-vue-app همان نام پروژه است و template-- نیز نوع پروژه را مشخص می کند (آیا از جاوا اسکریپت خالی استفاده می کنید یا از Vue یا از React و الی آخر). این CLI قابلیت های خاص زیادی دارد. برای نمایش لیستی از این قابلیت ها باید دستور npx vite --help را در ترمینال خود اجرا کنید. با انجام این کار چنین نتیجه ای را می گیرید:

vite/2.1.2




Usage:

  $ vite [root]




Commands:

  [root]          

  build [root]    

  optimize [root] 

  preview [root]  




For more info, run any command with the `--help` flag:

  $ vite --help

  $ vite build --help

  $ vite optimize --help

  $ vite preview --help




Options:

  --host <host>           [string] specify hostname

  --port <port>           [number] specify port

  --https                 [boolean] use TLS + HTTP/2

  --open [path]           [boolean | string] open browser on startup

  --cors                  [boolean] enable CORS

  --strictPort            [boolean] exit if specified port is already in use

  -m, --mode <mode>       [string] set env mode

  --force                 [boolean] force the optimizer to ignore the cache and re-bundle

  -c, --config <file>     [string] use specified config file

  -r, --root <path>       [string] use specified root directory

  --base <path>           [string] public base path (default: /)

  -l, --logLevel <level>  [string] silent | error | warn | all

  --clearScreen           [boolean] allow/disable clear screen when logging

  -d, --debug [feat]      [string | boolean] show debug logs

  -f, --filter <filter>   [string] filter debug logs

  -h, --help              Display this message

  -v, --version           Display version number

همانطور که می بینید انواع و اقسام قابلیت های مختلف را برای شما تدارک دیده شده است بنابراین می توانید به مطالعه آن ها به هر چیزی دسترسی داشته باشید. به طور مثال اگر بخواهیم سایت ما در HTTPS در مرورگر اجرا شود می توانیم از flag ای به نام https-- کمک بگیریم (در راهنمای بالا مشخص است):

 npx vite --https

با انجام این کار برنامه شما در آدرس https://localhost:3000 میزبانی خواهد شد که https است. flag دیگری که داریم port-- است که به ما اجازه تنظیم پورت در آدرس سرور توسعه را می دهد. به طور مثال:

npx vite --port 9999

با اجرای این کد برنامه شما در آدرس http://localhost:9999 میزبانی می شود.

قابلیت های Vite بسیار زیاد هستند و اگر بخواهیم همه آن ها را بررسی کنیم، نیاز به یک دوره جداگانه خواهد بود. امیدوارم این مقاله به شما کمک کرده باشد که با Vite آشنا شوید.

منبع: وب سایت های vitejs و logrocket