آموزش Webpack: جاوا اسکریپت Transpiling و Bundling

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

Webpack چیست؟ What Is Webpack?

• خوش آمدی Welcome

• کدگذاری تعاملی با تعویض ماژول داغ Interactive Coding with Hot Module Replacement

• تلفیق یکپارچه Seamless Compilation

• ابزار دقیق سازگار Consistent Tooling

• مدولار بودن Modularity

• مزیت - بسته بندی برای عملکرد Benefit - Bundling for Performance

• بسته نرم افزاری پیچیده Sophisticated Bundling

• npm نصب ، وارد کردن ، رفتن! npm Install, Import, Go!

• به Caching کمک کنید Help with Caching

• نقشه های منبع را از طریق هر تعداد تغییر شکل Source Maps Through Any Number of Transformations

• بستر کامپایلر A Compiler Platform

• مجموعه دوره ها و به روز رسانی ها Course Series and Updates

کد بسته بندی Bundling Code

• شبیه سازی و شروع برنامه یک نفره Cloning and Starting the Solitaire App

• ساختار برنامه Legacy Solitaire The Legacy Solitaire App Structure

• مشکلات عملکرد در برنامه یک نفره Performance Problems in the Solitaire App

• برنامه Bundling.js Bundling app.js

• بازرسی و استفاده از بسته نرم افزاری برنامه Inspecting and Using the App Bundle

• IIFE ها دیگر لازم نیستند IIFEs Are No Longer Necessary

• مهاجرت ماژول دوم به بسته نرم افزاری Migrating a Second Module to the Bundle

• Webpack Polyfills Module در حال بارگیری است Webpack Polyfills Module Loading

• Webpack Polyfills از سختگیرانه برای ماژول های هارمونی استفاده می کند Webpack Polyfills Use Strict for Harmony Modules

• یادگیری از کد منبع Webpack Learning from Webpack Source Code

• تولید نمودار تعاملی ماژول ها Generating an Interactive Graph of Modules

• چالش Challenge

تسریع در توسعه Accelerating Development

• مزایای Watch و WDS Benefits of Watch and WDS

• حالت تماشا Watch Mode

• نصب webpack-dev-server Installing webpack-dev-server

• npm اسکریپت های مستند سازی دستورات Webpack را اجرا کنید npm run-scripts for Documenting Webpack Commands

• نوشتن اسکریپت های npm Composing npm Scripts

• افزودن یک پرونده webpack.config.js Adding a webpack.config.js File

• devServer.contentBase - مکان محتوای استاتیک را بر روی دیسک تنظیم کنید devServer.contentBase - Set Location of Static Content on Disk

• devServer.publicPath - Base URL را برای سرویس دهی به Webpack Output تنظیم کنید devServer.publicPath - Set Base URL to Serve Webpack Output

• devServer.watchContentBase - بارگذاری مجدد در فایلهای ثابت devServer.watchContentBase - Reload on Static File Changes

• مستندات پیکربندی Webpack Webpack Configuration Documentation

• زیر هود DevServer نگاه می کنید Looking Under the Hood of the DevServer

• نمای کلی تعویض ماژول داغ Hot Module Replacement Overview

• devServer.hot و HotModuleReplacementPlugin devServer.hot and the HotModuleReplacementPlugin

• دوباره بارگیری کنید Reload Fallback

• راه اندازی مجدد خودکار پس از تغییر webpack.config.js Automatic Restart After Changing webpack.config.js

• Reload Fallback را غیرفعال کنید Disable Reload Fallback

• output.publicPath output.publicPath

• شناسایی ماژول ها با نام با NamedModulesPlugin Identifying Modules by Name with the NamedModulesPlugin

• روشهای تعویض داغ در یک برنامه زنده Hot Swapping Methods in a Live Application

• تعویض داغ می تواند وضعیت را حفظ کند Hot Swapping Can Maintain State

• بازرسی به روزرسانی های داغ Inspecting Hot Updates

• خلاصه کردن Recap

Dev تولید نیست Dev Isn't Prod

• معرفی Intro

• پلاگین HMR تولیدات را بلغزد HMR Plugin Bloats Production Builds

• افزودن مشروط افزونه ها با NODE_ENV Environment Variable Conditionally Adding Plugins with NODE_ENV Environment Variable

• cross-env و dotenv به Cross-platform Env Vars کمک کنید cross-env and dotenv Help with Cross-platform Env Vars

• استفاده از آرگومان CLI برای تنظیم محیط Using a CLI Argument to Set the Environment

• گزینه محیطی از yargs استفاده می کند Environment Option Uses yargs

• پیکربندی های متعدد و نامگذاری شده Multiple and Named Configurations

• مدولار کردن پرونده های پیکربندی Modularizing Config Files

• webpack-ادغام در ادغام پیکربندی اشیا webpack-merge to Merge Configuration Objects

• بازبینی پیش فرضهای پیکربندی و پیکربندی ادغام شده Inspecting the Merged Configuration and Config Defaults

• کد مشروط با DefinePlugin Conditional Code with the DefinePlugin

• با دقت به نقل از ثابتهای رشته Careful to Quote String Constants

• عبور گزینه های Env یا متغیرها از طریق کد ثابت Passing Env Options or Variables Through to Code Constants

• لمس کردن و خلاصه کردن Touch-ups and Recap

انتقال: استفاده از آینده در حال حاضر Transpiling: Using the Future Now

• معرفی Intro

• نصب بسته های مرتبط بابل Installing Relevant Babel Packages

• چرا @ babel/preset-env Why @babel/preset-env

• با استفاده از نحو کلاس ES6 Using ES6 Class Syntax

• افزودن قاعده لودر بابل Adding a babel-loader Rule

• webpack-dev-server ماژول ها را به بسته اضافه می کند webpack-dev-server Adds Modules to the Bundle

• به استثنای node_modules از babel-loader Excluding node_modules from babel-loader

• افزودن @ babel/preset-env به Transform Classs Adding @babel/preset-env to Transform Classes

• واردات و صادرات هماهنگی را تغییر ندهید Do Not Transform Harmony Imports and Exports

• devServer.overlay - نمایش خطاهای تلفیقی در مرورگر devServer.overlay - Showing Compilation Errors in the Browser

• درک سeriesالات لیست مرورگرها Understanding Browserslist Queries

• استخراج .babelrc.js Extracting .babelrc.js

• babel-loader با .babelrc.js نیز کار می کند babel-loader Works with .babelrc.js Too

• غیرفعال کردن babel-loader در Develop Builds Disabling babel-loader in Development Builds

• چگونه به babel-loader بگویید .babelrc را نادیده بگیرید How to Tell babel-loader to Ignore .babelrc

• پرکن Polyfills

• Webpack در زمان اجرا از وعده هایی استفاده می کند که ممکن است نیاز به تکمیل داشته باشد Webpack Runtime Uses Promises That Might Need to Be Polyfilled

• devServer.host - پیکربندی دسترسی خارجی به WDS devServer.host - Configuring External Access to WDS

• در صورت لزوم ، ترجمه را در توسعه فعال کنید Enable Transpilation in Development as Needed

• با تولید مجدد مشکل ، مشکلات Polyfill را برطرف کنید Fix Polyfill Issues by Reproducing the Problem

• Webpack با استفاده از بسته های npm امکان پذیر است Webpack Makes Using npm Packages Facile

• مطالعه تأثیر @ babel/polyfill Studying the Impact of @babel/polyfill

• در حال آزمایش Promise Polyfill Testing the Promise Polyfill

• کاهش Polyfills با core-js Reducing Polyfills with core-js

• کاهش Polyfills به Just Promise Reducing Polyfills to Just Promise

• نیازی نیست که بصورت دستی پلی فیل را مثلث بندی کنید You Don't Need to Manually Triangulate Polyfills

• useBuiltIns: 'entry' - Polyfill بر اساس مرورگرهای هدف useBuiltIns: 'entry' - Polyfill Based on Target Browsers

• تغییر پرس و جو در مرورگر ، پلی پر شدن را تغییر می دهد Changing Browser Query Changes Polyfills

• useBuiltIns: 'use' - Polyfill بر اساس مرورگرها و کاربردهای هدف useBuiltIns: 'usage' - Polyfill Based on Target Browsers and Usage

• با استفاده از Promise Built-in Polyfill دیگری برای IE 11 اضافه می شود Using the Promise Built-in Adds Another Polyfill for IE 11

• روزی: @ babel/plugintransform-runtime + @ babel/preset-env Someday: @babel/plugintransform-runtime + @babel/preset-env

• غذاهای آماده Takeaways

درک لودرها Understanding Loaders

• لودر چیست؟ What Is a Loader?

• طراحی سه لودر Designing a tee-loader

• ایجاد یک لودر Creating a tee-loader

• برای حل یک Loader سفارشی ، حلLoader.alias resolveLoader.alias to Resolve a Custom Loader

• درخواست ورود و منبع در هر ماژول Logging Request and Source per Module

• درحال جمع شدن خروجی کنسول گروه بسته وب با Chrome DevTools Collapsing Grouped Webpack Console Output with Chrome DevTools

• اشکال زدایی بسته وب با Chrome DevTools Debugging Webpack with Chrome DevTools

• اضافه کردن همان لودر دو بار Adding the Same Loader Twice

• گزینه های عبور و تجزیه در راه انداز Passing and Parsing Options in the tee-loader

• گزینه Legacy عبور از طریق یک رشته کوئری Legacy Option Passing via a Query String

• لودرهای درون خطی گاهی مفید هستند Inline Loaders Are Occasionally Useful

• با ساخت لودرها بیشتر بیاموزید - یک Pitching Cache Loader را امتحان کنید Learn More by Building Loaders - Try a Pitching Cache Loader

در حال اجرا ساختن وظایف Running Build Tasks

• درباره ساخت وظایف چطور؟ What About Build Tasks?

• پاک کردن پوشه خروجی قبل از بسته بندی Cleaning the Output Folder Before Bundling

• نه فقط ساختن وظایف: npm-install-webpack-plugin Not Just Build Tasks: npm-install-webpack-plugin

• یافتن پلاگین برای کارهای ساخت مشترک Finding Plugins for Common Build Tasks

عیب یابی با Source Maps Troubleshooting with Source Maps

• بسته بندی و انتقال اطلاعات عیب یابی را دشوار می کند Bundling and Transpiling Make Troubleshooting Difficult

• خطاهای زمان اجرا به اندازه خطاهای تلفیقی شفاف نیستند Runtime Errors Aren't as Transparent as Compilation Errors

• فعال کردن نقشه های مبدا با devtool: "source-map" Enabling Source Maps with devtool: "source-map"

• How devtool: "source-map" کار می کند How devtool: "source-map" Works

• نقشه های منبع سریع ، درون خطی و جزئی - devtool: "eval" Fast, Inline, Partial Source Maps - devtool: "eval"

• نقشه های با کیفیت بالا با بازسازی سریع افزایشی - devtool: "eval-source-map" High Quality Maps with Fast Incremental Rebuild - devtool: "eval-source-map"

• devtool: "hidden-source-map" devtool: "hidden-source-map"

• فقط مکان نقشه و نام فایل ، کد منبع نیست - devtool: "nosources-source-map" Only Map Location and Filename, Not Source Code - devtool: "nosources-source-map"

• منابع Resources

• devtool فقط یک سریال پردازی مبتنی بر رشته از گزینه های پلاگین است devtool Is Just an Idiosyncratic, String Based Serialization of Plugin Options

• به جای استفاده از devtool ، برای انعطاف پذیری مستقیماً SourceMapDevToolPlugin را اضافه کنید Add the SourceMapDevToolPlugin Directly for Flexibility Instead of Using devtool

تولید کد Generating Code

• چالش: ساخت بارگذار کننده کدژن برای گرفتن اطلاعات ساخت Challenge: Building a codegen-loader to Capture Build Information

• توضیح نقطه شروع برای راه حل من Explanation of the Starting Point to My Solution

• راه حل من My Solution

• پایان The End