آموزش وب پک 4: فراتر از اصول
Webpack 4: Beyond the Basics
به دوره آموزشی ساخت برنامه‌های جاوا اسکریپت مدرن با استفاده از بارگذار ماژول Webpack و بسته‌کننده دارایی خوش آمدید.
من قصد دارم این دوره فراتر از اصول را برای همه سطوح مهارت در دسترس قرار دهم. این برای افرادی طراحی شده است که اصول اولیه را دیده اند و کمی به هم ریخته اند، اما هنوز احساس نمی کنند که Webpack را درک می کنند. هر قسمت از قبل نوشته شده و تمرین شده است. آنها به گونه ای ویرایش شده اند که از زمان شما به بهترین نحو استفاده شود. در هیچ یک از این درس ها لحظه ای تلف نمی شود.
با ایجاد محتوای پروژه محور برنامه های Webpack دنیای واقعی که شما و شرکتتان می توانید از همان خط اول کد استفاده کنید. ابتدا به تنظیمات بهینه توسعه Webpack نگاه می کنیم. در حین ساختن وبلاگ Markdown، مانند Ghost، با بارگذاری مجدد ماژول داغ، Babel و اشکال زدایی در Node، آن را دنبال و کدنویسی کنید. سپس به نحوه بهینه‌سازی بسته‌های تولید شما Webpack می‌پردازیم، همانطور که صفحه دیگ بخار را در یک وب‌سایت نمونه کارها محکم می‌کنیم.
پروژه نهایی بسیار بد است. ما سایت نمونه کارها را به یک گره چند دامنه ای بازنویسی وردپرس MU، Tumblr یا SquareSpace گسترش می دهیم. بنابراین می توانید چندین نام دامنه را از یک فرآیند سرور گره اجرا کنید. ما جدیدترین ویژگی‌های Webpack 4 را بررسی می‌کنیم، از جمله رندر سمت سرور، واردات پویا با "کامنت‌های جادویی" و با اجزای Universal React و قطعات CSS به صورت موازی به پایان می‌رسانیم. مطمئناً می خواهید به پایان این دوره برسید.
در طول راه، در مورد تمام چارچوب ها و کتابخانه هایی که Webpack با آنها ادغام می شود صحبت خواهم کرد. چه در حال کار بر روی یک پروژه قدیمی Rails یا سایر پروژه های باطن هستید یا فقط می خواهید با EJS، Pug، Handlebars، Sass، Less یا Stylus، CSS Modules، Angular یا Vue JS چیزی زیبا ایجاد کنید، روشی وجود دارد و من به شما این کار را می کنم. کلیدهایی برای ساختن سایت خود به روشی که می خواهید.
از اینکه این دوره را در نظر گرفتید متشکریم. من هر چیزی را که داشتم در آن قرار دادم.
- قانون
معرفی Introduction
-
چگونه از این دوره کمک بگیریم How to get help with this Course
-
مواد و کد دوره اضافی Additional Course Materials and Code
توسعه واکنشی (معروف به Optimal Dev Experience) Reactive Development (aka Optimal Dev Experience)
-
راه اندازی و اجرا با Webpack Dev Server Up and Running with Webpack Dev Server
-
اولین لودرهای ما برای CSS Our First Loaders for CSS
-
خطاها و لودرهای بهتر برای HTML و تصاویر Better Errors and Loaders for HTML & Images
-
مبانی بابل Babel Basics
-
Babel Polyfills، Transforms & Presets Babel Polyfills, Transforms & Presets
-
DIY Webpack Dev Server با Express Middleware DIY Webpack Dev Server with Express Middleware
-
Hot Reload هر دو کلاینت و سرور با Nodemon Hot Reloading Both Client and Server with Nodemon
-
اشکال زدایی گره با ابزارهای توسعه دهنده کروم Debugging Node with Chrome DevTools
ماجراجویی خود را انتخاب کنید Choose Your Own Adventure
-
Hooking Up React Hooking Up React
-
Hooking up React - Part 2: Stateful Reloading Hooking up React - Part 2: Stateful Reloading
-
اتصال پیش پردازنده های HTML مانند EJS/Pug/Handlebars Hooking up HTML Preprocessors like EJS/Pug/Handlebars
-
اتصال به پیش پردازنده های CSS مانند SASS/LESS و قلم Hooking up CSS Preprocessors like SASS/LESS & Stylus
-
اتصال Js در CSS با ماژول های Emotion و CSS Hooking up Js in CSS with Emotion and CSS Modules
-
اتصال تایپ اسکریپت Hooking up Typescript
-
اتصال Angular Hooking up Angular
-
اتصال VueJS Hooking up VueJS
بهینه سازی برای تولید Optimizing for Production
-
راه اندازی میزبانی تولید با Heroku Setup Production Hosting with Heroku
-
CSS آماده تولید Production Ready CSS
-
حذف جاوا اسکریپت فقط برای توسعه با DefinePlugin Stripping development-only Javascript with the DefinePlugin
-
Minification و Mangling جاوا اسکریپت با Babel و Uglify Javascript Minification and Mangling with Babel and Uglify
-
بهینه سازی تمام دارایی ها با فشرده سازی GZip و Brotili Optimizing All Assets with GZip and Brotili Compression
-
ساختن وبلاگ با React Building out the Blog with React
-
تجزیه علامت گذاری برای وبلاگ نویسی و داده های متا Parsing Markdown for Blogging and Meta Data
-
SplitChunks و Bundle Analyzer SplitChunks and the Bundle Analyzer
رندر سمت سرور و واردات پویا Server-side Rendering & Dynamic Importing
-
رندر JS سمت سرور با Express و React Server-side Render JS with Express and React
-
سمت سرور هر نوع فایلی را با Webpack رندر کنید Server-side Render any Filetype with Webpack
-
مجموعه یکپارچه - قسمت 1 Unified Compilation - Part 1
-
مجموعه یکپارچه - قسمت 2 Unified Compilation - Part 2
-
اضافه کردن چندین صفحه با React Router Adding Multiple Pages with React Router
-
نحو واردات پویا Dynamic Import Syntax
-
React Universal Components React Universal Components
-
Async JS/CSS Chank بارگیری موازی (معروف به جام مقدس) Async JS/CSS Chunk Loading in Parallel (aka the Holy Grail)
ساخت یک سایت چند دامنه با ادغام Redux Building a Multi-Domain Site with Redux integration
-
2 استراتژی برای چند دامنه در توسعه 2 Strategies for Multiple-Domains in Development
-
محدوده بندی داده های شما در هر دامنه Scoping Your Data per Domain
-
قالب CSS در هر دامنه Theming CSS per Domain
-
صفحات مقالات را برای 2 قهرمان ما بسازید Build out the Articles Pages for our 2 Heroes
-
اصول ردوکس: فروشگاه، کاهنده و عمل. Redux Basics: The store, the reducer and the action.
-
واکشی مقالات از یک API با Redux Thunk Fetching Articles from an API with Redux Thunk
-
Redux بر روی مشتری. در حال اتمام واکشی مقاله ما Redux on the client. Finishing our Article fetch
-
Redux در رندر سمت سرور ذخیره می کند Redux stores in the Server side render
ضمیمه Appendix
-
راهنمای ارتقا Webpack 4 Webpack 4 Upgrade Guide
-
بعدش چی میخوای ببینی؟ What do you want to see next?
https://donyad.com/d/b045a6
Lawrence Whiteside
مهندس نرم افزار لاورنس یک یادگیرنده مادام العمر است که عاشق تدریس ، کارآفرینی و کار از راه دور است. او برای گذران زندگی برنامه های وب و موبایل می سازد. او این کار را از اواسط دهه 90 که خودش و وب بسیار جوان بودند به صورت حرفه ای انجام می داد. چالش بعدی او این است که با آموزش ابزارها و تکنیک هایی که بسیار مفید و احتمالاً فاقد سند هستند ، به جامعه توسعه دهنده خود بازگردد. با این کار ، او امیدوار است که یک بار دیگر ، یادگیری خود را ادامه دهد.
نمایش نظرات