Webpack قدرتمندترین و انعطاف پذیرترین ابزارکامپایل است که امروزه در دسترس است. با این وجود ، سطح پیچیدگی خاصی به وجود می آید.در اینجاست که Laravel Mix قدم می گذارد. با ادغام webpack میتوانید تسک های مناسبی را فعال کنید.
در این بخش ، من به شما آنچه را که باید بدانید از اصول اولیه ، تا پیکربندی پیشرفته به عنوان نگهدارنده Laravel Mix ، آموزش می دهم.
بیایید با نصب وابستگی های ضروری شروع کنیم و در سریعترین زمان ممکن JavaScript و Sass را با استفاده از Mix کامپایل کنیم.
متوجه خواهید شد که Laravel تعدادی اسکریپت مفید NPM را برای ایجاد صفحه وب در اختیار شما قرار می دهد. برای شروع ، مهمترین موارد مربوط به dev، watch و prod است. در این درس ، ما این دستورات را رمزگشایی می کنیم تا اطمینان حاصل کنید که دقیقاً چه چیزی را ایجاد می کنید.
دستور ()mix.js روش go-to به هر نوع نیاز JavaScript bundling است و به ES2017 compilation ، tree shaking, minificationو موارد دیگر می پردازد. بیایید همه موارد مورد نیاز در این قسمت را بدانید.
حالا که درک کردید چگونه JavaScript خود را کامپایل کنید ، به سراغ ابزار CSS برویم. شما Sass ، Less ، Stylus یا PostCSS را ترجیح می دهید.
PostCSS ممکن است به صورت مستقل یا حتی به عنوان یک مرحله ثانویه پس از کامپایل اصلی Sass / Less شما استفاده شود. در هر صورت ، نتیجه نهایی یکسان خواهد بود. افزونه های PostCSS را به عنوان لایه های پیاز تصورکنید. هر لایه این شانس را دارد که روی صفحه stylesheet شما کار کند ، و آن را به نوعی اصلاح کند. پس از اتمام کامل ، این style ها به لایه بعدی پیاز منتقل می شوند. بیایید این فرآیند را هنگام استفاده از Laravel Mix ببینیم.
Mix پشتیبانی از Browsersync را فراهم می کند، که به ما امکان می دهد هر زمان که asset مربوطه تغییر می کند، مرورگر را شناسایی و رفرش کنیم. دیگر لازم نیست مرورگر را بارها و بارها رفرش کنید تا اصلاحات کوچک را بررسی کنید.
با فراخوانی `mix.version ()" یک یونیک hash برای هر فایل با تولید فایل "mix-manifest.json" اضافه می شود. این می تواند برای کمک به سرور شما هنگام استفاده از "حافظه پنهان" و دریافت نسخه جدیدی از asset استفاده شود.
در پشت صحنه ، Laravel Mix هنگام تغییر کد شما از پیش تنظیمات Babel's env استفاده می کند. با این وجود ، هر از گاهی ممکن است نیاز به ثبت پلاگین های اضافی داشته باشید. بیایید دقیقاً چگونگی انجام این کار را در این قسمت مرور کنیم.
Laravel Mix 1.7 و بالاتر با async/await پشتیبانی می شوند. این دو کلمه کلیدی روند کار را به روشی همزمان تر ساده می کنند.
Laravel Mix 2.1 و بالاتر شامل پشتیبانی از پcustom user extensions است. در حقیقت ، بسیاری از مؤلفه هایی که Mix در پشت صحنه از آن استفاده می کند ، دقیقاً به همان شیوه ساخته شده اند. در این قسمت ، اصول اولیه API را می آموزیم. خواهید دید که بر اساس پیچیدگی مؤلفه جدید ، دو روش برای گسترش Mix وجود دارد.
اکنون که API اصلی برای ساختن برنامه های Mix extensions را درک کرده اید ، بیایید یک real-life extension را از طریق npm با هم بسازیم و مستقر کنیم ... در پانزده دقیقه!
Jeffrey Way
Jeffrey Way
Jeffrey Way
Jeffrey Way
Jeffrey Way
Jeffrey Way
