آموزش ویو.جی‌اس باندلر (Bundler): ساخت وب اپلیکیشن‌های مدرن و سریع (۲۰۲۳) - آخرین آپدیت

دانلود Vite js bundler : Build fast modern Webapp ( 2023 )

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره:

ساخت اپلیکیشن‌های مدرن و سریع با Vite

با Vite، ابزار مدرن ساخت وب‌اپلیکیشن‌های سریع، آشنا شوید. مفاهیم پیشرفته مانند Tree-shaking، Visualize کردن باندل، پلاگین‌ها و موارد دیگر را بیاموزید.

آموزش ساخت اپلیکیشن‌های مدرن با Vite

تنظیمات پیکربندی برای اپلیکیشن‌های React و VueJS
دیپلوی کردن اپلیکیشن‌های ساخته شده با Vite
پیکربندی Vite برای ایجاد کتابخانه UI

پیش‌نیازها:

با دنبال کردن دستورالعمل‌های موجود در ویدیوها، همراه با من در کامپیوتر خود پیش بروید.

ساخت وب‌اپلیکیشن‌های مدرن با Bundler Vite JS، از ابتدا تا رسیدن به مرحله Production.

با پیچیده‌تر شدن اپلیکیشن‌های وب در طول زمان، ما نیز باید ابزارهایی را که برای باندل کردن و دیپلوی کردن این اپلیکیشن‌ها استفاده می‌کنیم، مرور و بهینه‌سازی کنیم. Vite، توسعه یافته توسط توسعه‌دهندگان VueJS، یک باندلر برای اپلیکیشن‌های مدرن است.

در این دوره، نه تنها مفاهیم تئوری را پوشش می‌دهیم، بلکه تجربه عملی گسترده‌ای در چگونگی ادغام Vite در پایپ‌لاین توسعه نرم‌افزار خود خواهیم داشت. ما درست از مبانی مانند ES Modules و CommonJS Modules شروع کرده و به تدریج به سمت مفاهیم پیشرفته‌تر مانند Treeshaking پیش خواهیم رفت تا اپلیکیشن خود را برای استفاده در مرحله Production بهینه کنیم.

همچنین خواهیم دید که چگونه یک اپلیکیشن React که با رویکرد سنتی Create React App ساخته شده است را به یک رویکرد مدرن با استفاده از Vite مهاجرت دهیم. این کار باعث صرفه‌جویی در زمان برای تمام توسعه‌دهندگان می‌شود، زیرا زمان بیلد را به طور نمایی افزایش داده و پیچیدگی را کاهش می‌دهد.

من تمام تلاشم را کرده‌ام تا این دوره را به ساده‌ترین شکل ممکن ساختاربندی کنم و تمام منابع برای دانلود در GitHub و پیوست این دوره در دسترس خواهند بود.

در صورتی که با مشکلاتی مواجه شدید، همیشه می‌توانید در بخش پرسش و پاسخ سوالات خود را مطرح کنید، خوشحال خواهم شد به آنها پاسخ دهم.

این دوره نیازی به دانش قبلی در زمینه Bundler ها ندارد و برای تمام توسعه‌دهندگانی که هر نوع وب‌سایتی را می‌سازند، چه با استفاده از HTML و CSS پایه و چه با فریم‌ورک‌ها و کتابخانه‌هایی مانند React و Vue، مفید خواهد بود.

موفق باشید و یادگیری لذت‌بخشی داشته باشید!

سرفصل ها و درس ها

مقدمه Introduction

مقدمه Introduction
نحوه دنبال کردن دوره How to follow the course
نصب نرم‌افزار و دانلود سورس کد - مهم Installing software and download source code IMPORTANT
ساخت اولین اپلیکیشن Vite ما Building our first Vite application
ماژول‌های ESM و CommonJS ESM and CommonJS modules
ماژول‌های ESM در مرورگر ESM modules in Browser
بررسی بیلد Vite Explore the Vite build
چگونه Vite سریع است و با دیگران تفاوت دارد؟ How is Vite fast and different from others ?
2 سوالات مروری سریع؟ 2 Quick Refresher Questions ?

مبانی Vite با HTML CSS JS Vite Basics with HTML CSS JS

معرفی بخش (ساخت با Vite) Section Introduction ( Building with Vite )
مخزن برای دانلود - مهم Repo to download IMPORTANT
پروژه پایه نتفلیکس Netflix base project
افزودن Vite به پروژه نتفلیکس Adding Vite to Netflix project
رفع صفحه داشبورد ما Fixing our dashboard page
رفع مشکل بارگذاری تصویر Fixing image loading issue
وارد کردن اسکریپت‌ها و CSS Importing scripts and CSS
ماژول‌های CSS CSS modules
SASS با Vite SASS with Vite
افزودن منابع عمومی (public assets) Adding public assets
2 سوالات آتشین سریع!! 2 Rapid fire questions !!

بیلد Vite برای اپلیکیشن تک صفحه‌ای و بیلد UI Library Vite build for Single page app and Build UI Library

معرفی بخش (SPA و UI Library) Section introduction ( SPA and UI Library )
شروع اپلیکیشن React با قالب Vite Starting React app with Vite template
راه‌اندازی اپلیکیشن React از ابتدا Setting up React app from scratch
افزودن بیلد Vite Adding Vite builder
استفاده از SVG به عنوان کامپوننت React Using SVG as React component
معرفی و راه‌اندازی UI library UI library introduction setup
وارد کردن UI library به اپلیکیشن React Importing UI library into React app
تزریق CSS در بیلد JS Inject CSS into JS build
تصاویر درون بیلد JS Images inside JS build
نمایشگر باندل Vite، Treeshaking Vite bundle visualizer , Treeshaking
ساخت کتابخانه قابل Treeshake Creating Treeshakable library
تنظیمات Tailwind CSS برای Vite Tailwind CSS config for Vite
Eslint با Vite و React Eslint with Vite and React
مسیر alias در Vite Vite alias path

بهینه‌سازی‌های تولید و استقرار Production Optimizations and Deployment

معرفی بخش تولید و استقرار Production & Deployment Section Introduction
PostCSS Autoprefixer PostCSS Autoprefixer
تنظیمات مسیر پایه Vite Vite base path config
کنترل کش در Vite Cache control in Vite
بخش‌بندی دستی (Manual Chunks) Manual Chunks
مهاجرت Create React App به Vite Migrating Create React App to Vite
استقرار در Netlify Deploying to Netlify

برای ارسال نظر ثبت نام کنید.

آموزش ویو.جی‌اس باندلر (Bundler): ساخت وب اپلیکیشن‌های مدرن و سریع (۲۰۲۳) - آخرین آپدیت

دانلود Vite js bundler : Build fast modern Webapp ( 2023 )

ساخت اپلیکیشن‌های مدرن و سریع با Vite

آموزش ساخت اپلیکیشن‌های مدرن با Vite

پیش‌نیازها:

مقدمه Introduction

مقدمه Introduction

نحوه دنبال کردن دوره How to follow the course

نصب نرم‌افزار و دانلود سورس کد - مهم Installing software and download source code IMPORTANT

ساخت اولین اپلیکیشن Vite ما Building our first Vite application

ماژول‌های ESM و CommonJS ESM and CommonJS modules

ماژول‌های ESM در مرورگر ESM modules in Browser

بررسی بیلد Vite Explore the Vite build

چگونه Vite سریع است و با دیگران تفاوت دارد؟ How is Vite fast and different from others ?

2 سوالات مروری سریع؟ 2 Quick Refresher Questions ?

مبانی Vite با HTML CSS JS Vite Basics with HTML CSS JS

معرفی بخش (ساخت با Vite) Section Introduction ( Building with Vite )

مخزن برای دانلود - مهم Repo to download IMPORTANT

پروژه پایه نتفلیکس Netflix base project

افزودن Vite به پروژه نتفلیکس Adding Vite to Netflix project

رفع صفحه داشبورد ما Fixing our dashboard page

رفع مشکل بارگذاری تصویر Fixing image loading issue

وارد کردن اسکریپت‌ها و CSS Importing scripts and CSS

ماژول‌های CSS CSS modules

SASS با Vite SASS with Vite

افزودن منابع عمومی (public assets) Adding public assets

2 سوالات آتشین سریع!! 2 Rapid fire questions !!

بیلد Vite برای اپلیکیشن تک صفحه‌ای و بیلد UI Library Vite build for Single page app and Build UI Library

معرفی بخش (SPA و UI Library) Section introduction ( SPA and UI Library )

شروع اپلیکیشن React با قالب Vite Starting React app with Vite template

راه‌اندازی اپلیکیشن React از ابتدا Setting up React app from scratch

افزودن بیلد Vite Adding Vite builder

استفاده از SVG به عنوان کامپوننت React Using SVG as React component

معرفی و راه‌اندازی UI library UI library introduction setup

وارد کردن UI library به اپلیکیشن React Importing UI library into React app

تزریق CSS در بیلد JS Inject CSS into JS build

تصاویر درون بیلد JS Images inside JS build

نمایشگر باندل Vite، Treeshaking Vite bundle visualizer , Treeshaking

ساخت کتابخانه قابل Treeshake Creating Treeshakable library

تنظیمات Tailwind CSS برای Vite Tailwind CSS config for Vite

Eslint با Vite و React Eslint with Vite and React

مسیر alias در Vite Vite alias path

بهینه‌سازی‌های تولید و استقرار Production Optimizations and Deployment

معرفی بخش تولید و استقرار Production & Deployment Section Introduction

PostCSS Autoprefixer PostCSS Autoprefixer

تنظیمات مسیر پایه Vite Vite base path config

کنترل کش در Vite Cache control in Vite

بخش‌بندی دستی (Manual Chunks) Manual Chunks

مهاجرت Create React App به Vite Migrating Create React App to Vite

استقرار در Netlify Deploying to Netlify

نمایش نظرات

https://donyad.com/d/ca3a87