[MUSIC]
في الدورة السابقة على Bootstrap 4،
تعلمنا كيفية الاستفادة من البرامج النصية للآلية الوقائية الوطنية أو Grunt أو
Gulp لإنشاء مجلد التوزيع لتطبيق الويب الخاص بنا.
لذلك رأينا كيف يتم بناء مجلد التوزيع عن طريق أخذ جميع
ملفات HTML و CSS و JavaScript.
ومن ثم القيام بالتعديل، والقبح، والتسلسل،
والتحولات الأخرى المختلفة على هذه لبناء ملفات التوزيع التي يمكن
ببساطة نسخها إلى الخادم ومن ثم جعل موقع الويب الخاص بك متاحًا للمستخدمين.
الآن، ماذا عن تطبيق Angular الخاص بك؟
كيف نقوم بحزم تطبيق Angular الخاص بنا لنشره على موقع ويب؟
الآن كما تدرك أن التطبيق الزاوي الخاص بك سيتم
نشره في نهاية المطاف على موقع ويب من حيث الناس سوف الوصول إلى التطبيق الزاوي الخاص بك،
تحميل التطبيق الزاوي إلى المتصفح ومن
ثم التطبيق الزاوي سوف يأتي إلى الحياة في متصفحاتهم.
سننظر أيضًا في الطريقة الزاوي لاستهداف
الأجهزة المحمولة في الدورتين المقبلتين، في هذا التخصص.
لذلك أنا لا أتحدث تحديدا عن ذلك، في هذه اللحظة.
ولكن هنا نحن نتحدث عن كيفية استهداف نافذة متصفح الويب.
باستخدام رمز التطبيق الزاوي الخاص بك.
إذا وصلنا إلى السؤال عن كيف نقوم بحزم
تطبيق Angular الخاص بنا للنشر؟
الآن يمكننا استخدام مخطوطات Gulp و NPM الكبرى للقيام بذلك، إذا اخترت ذلك.
ولكن هناك طفل جديد على كتلة تسمى webpack.
Webpack كما يمكننا أن نفهم قريبا جدا هو بوندلر وحدة.
الآن، سننظر في بعض التفاصيل في الشريحتين المقبلتين.
لذلك، ما يسمح لك webpack بالقيام به هو حزم تطبيق Angular الخاص بك
بطريقة يسهل نشرها على موقع ويب
وجعل تطبيق Angular الخاص بك متاحًا للمستخدمين.
الآن بما أننا نستخدم Angular CLI لبناء تطبيقنا الزاوي، فإن
Angular CLI يرفع بالفعل من webpack
للقيام ببنائه لمجلد التوزيع لتطبيق Angular الخاص بك.
لذلك لا نحتاج إلى القيام بأي عمل إضافي بشكل صريح للاستفادة من webpack.
مرة واحدة ونحن نستخدم كلي الزاوي.
لأن CLI الزاوي يعتني بجميع الرفع الثقيل نيابة عنا.
لذلك ولكن قبل أن نرى ما هي طريقة CLI Angular لبناء
التوزيع الخاص بك مزيد من السهولة.
نحن بحاجة إلى فهم بعض المفاهيم حول webpack
وكيف يعمل webpack قليلاً من التفاصيل
بحيث عندما ينتج Angular CLI مجلد التوزيع، يمكنك البحث فيه
ورؤية ما يتم بناؤه بالضبط بواسطة Angular CLI.
لذا هدفي من هذه
المحاضرة بالذات هو مجرد إعطائك لمحة موجزة عن webpack.
هذه المحاضرة ليست مقدمة عن كيفية الاستفادة من webpack.
هذا خارج نطاق هذه الدورة، ولكن
إذا كنت مهتمًا، فإن موقع الويب
يحتوي على الكثير من المعلومات حول كيفية استخدام webpack للتطبيقات الأخرى.
يمكنك، من حيث المبدأ، استخدام webpack لحزم
تطبيق Bootstrap الخاص بك الذي قمت بتطويره في الدورة السابقة أيضًا.
ولكن في هذه اللحظة سوف ننظر في كيفية الاستفادة من webpack
كجزء من طريقة CLI الزاوي لبناء تفسيرنا الزاوي.
لذا من الواضح أن السؤال الأول الذي يطرح نفسه في عقلك هو،
ما هو webpack بالضبط؟
ما الذي نتحدث عنه؟
Webpack، هذا هو التعريف من وثائق webpack نفسها.
وتقول webpack هو وحدة تجميع لتطبيقات جافا سكريبت الحديثة.
تطبيق Angular الخاص بك الذي كنت تعمل عليه حتى
الآن هو تطبيق جافا سكريبت حديث سهل.
الآن أنت تعمل جميعًا مع أحدث التقنيات في تقنية Angular.
وهكذا، من الواضح أنه يؤهل كتطبيق جافا سكريبت حديث
، وبالتالي، فإن استخدام webpack منطقي تمامًا.
الآن ما هو أفضل webpack هو،
فإنه ينظر إلى بنية كاملة من تطبيق Angular الخاص بك.
لذلك فإنه يعبر بشكل متكرر من خلال التعليمات البرمجية الخاصة بك من
تطبيق Angular الخاص بك تبحث لمعرفة أفضل طريقة لتجميع
المعلومات إلى ما يسمى حزم.
عندما ينظر webpack إلى شفرتك، فإنه يعامل كل ملف
لديك داخل تطبيق Angular الخاص بك، سواء كان جافا سكريبت من ملف Typescript،
سواء كان ملف CSS، سواء كان ملف SAS، سواء كان ملف صورة.
أيا كان, فإنه يعامل كل واحد منهم كوحدات من منظوره
, ومن ثم يقرر, ما هي أفضل طريقة لتغليف هذه
الوحدات في ما يسمى حزم التي يمكن تحميلها من.
الخادم إلى متصفح الويب الخاص بك بطريقة مريحة ومريحة.
لذلك عندما نتحدث عن webpack، من الواضح أننا بحاجة إلى توضيح ما تعنيه الحزمة.
كما ذكرت بإيجاز في الشريحة السابقة، فإن الحزمة ليست سوى
ملف جافا سكريبت يتضمن الأصول.
الآن، عليك أن تضع هذا في الاعتبار أن webpack يعامل كل شيء على أنه JavaScript.
سواء كان CSS أو أي من أنواع الملفات الأخرى،
سيتم التعامل معها أيضًا على أنها JavaScript من منظور webpack.
الآن لا تشعر بالقلق الشديد، يعرف webpack كيفية حزمها
ومعاملتها كحزم JavaScript حيث تقوم بإعداد تلك الحزم.
أو وحدات جافا سكريبت حيث تقوم بإعداد تلك الحزم.
لذا فإن الحزمة هي شيء يجمع معا الوحدات التي تنتمي إلى بعضها البعض.
عندما أتحدث عن الوحدة النمطية، فأنا لا أشير إلى وحدة Angular،
فأنا لا أشير إلى وحدة JavaScript.
كما قلت و Webpack، يتم إنشاء كل ملف كوحدة نمطية.
وهكذا فإنه يجمع هذه الوحدات معا،
التي ينبغي أن تقدم إلى العميل في استجابة واحدة لطلب.
لذا فإن webpack نفسه يتخذ قرارًا بشأن قول
الأجزاء التي يجب ضمها معًا في حزمة.
وينبغي أن يتم تسليمها معا بحيث
يتم تقديم تطبيق الويب الخاص بك بطريقة أكثر فعالية.
الآن، لقد بنيت Angular CLI بالفعل تكوينه لأفضل طريقة لحزم
الأصول الزاوي، بحيث يتم تسليمها بشكل ملائم إلى المتصفح.
لذلك لا داعي للقلق حول كيفية القيام بذلك بأنفسنا،
سنتركها لمنطق CLI الزاوي لرعاية كل هذا التكوين
لكيفية بناء هذه الحزمة حزم نيابة عنا.
لذا ما يفعله Webpack هو أنه يبدأ في أعلى مستوى.
في التطبيق الزاوي الخاص بك، المستوى الأعلى هو ملفات index.html و main.js،
كما تعلمنا في الدرس الأول من هذه الدورة.
لذلك يبدأ هناك، وبعد ذلك يتبع كل المدخلات
التي تستخدمها في تلك أسفل المسار
ويظهر تنظيم هرمي لجميع الأجزاء المختلفة.
لذلك يتم بناء ما يسمى الرسم البياني التبعية بواسطة webpack.
الآن باستخدام هذا الرسم البياني التبعية، يقرر Webpack كيفية
حزم حزمها وأن الصور حزمة واحدة أو أكثر لأنها
منطقية للتطبيق الخاص بك أن webpack هو حزمة.
وفي عملية القيام بذلك، عندما يتم التعامل مع ملفات غير جافا سكريبت،
مثل CSS، HTML و SAS أو الصور وهلم جرا.
ثم يستخدم المكونات الإضافية التي تمكنك من المعالجة المسبقة
وتعديل تلك الملفات، تلك الملفات غير جافا سكريبت،
إلى طريقة يمكن تجميعها في حزم webpack الخاصة بك.
إذا كنت تستخدم webpack من الصفر،
فستصف بعض التكوين الخاص بك لـ webpack للعمل.
على هذه الملفات في ملف باسم
webpack.config.js الذي قمنا بتضمينه في المجلد الجذر للتطبيق الخاص بك.
في حالتنا نظرًا لأننا نعتمد على Angular CLI للقيام بذلك نيابة عنا،
ينقر Angular CLI تلقائيًا هنا في بناء التكوين الخاص
بـ webpack للعمل معه.
الآن عندما نتحدث عن webpack، هناك أربعة مفاهيم مهمة بالنسبة
لنا لفهم كيفية عمل webpack على بلدان جزر المحيط الهادئ.
أول واحد هو الدخول.
الإدخال هو النقطة التي يجب أن يبدأ فيها webpack
ويتابعه لإنشاء الرسم البياني التبعية.
لذلك، ملف.ts الرئيسي على سبيل المثال، هو نقطة دخول.
حتى webpack يمكن أن تبدأ انها مطاردة في بناء الرسم البياني التبعية.
الحق في main.ts ثم انتقل مطاردة بعد كل بيانات الاستيراد من هناك
إلى ملفاتهم الأخرى ومن ثم من هناك يستوردون تلك الملفات
وهلم جرا على طول الطريق حتى يبني الرسم البياني التبعية.
الآن، الجزء الثاني هو ما يمكن أن نسميه كما الإخراج.
في webpack، يكون الإخراج عبارة عن مجموعة الحزم التي تعدها webpack
نيابة عنك.
والثالث هو لوادر.
الآن webpack كما قلت يفهم جافا سكريبت فقط
ويعرف فقط كيفية العمل مع جافا سكريبت.
ولكن كما ذكرت أيضا، يعامل webpack كل ملف كوحدة نمطية.
لذلك تلك الملفات التي ليست جافا سكريبت يجب أن يتم
تحويلها ثم وضعها في حزم الخاصة بك باستخدام
التحويلات المناسبة ومن ثم سيتم إضافتها إلى الرسم البياني التبعية الخاص بك.
هذا هو المكان الذي يأتي فيه استخدام المكونات الإضافية المختلفة.
ماذا تساعدك المكونات الإضافية على القيام به؟
تساعدك المكونات الإضافية على تنفيذ الإجراءات المختلفة والوظائف المخصصة
أو التجميعات التي تحتاج إلى القيام بها لبناء الحزم الخاصة بك.
لذلك سوف تساعدك على تحويل CSS الخاص بك إلى طريقة يمكنني
حزمها في حزم جافا سكريبت الخاصة بك، وهلم جرا.
لذلك هذا هو مقدمة سريعة لكيفية عمل webpack بالفعل.
الآن مع هذه المقدمة السريعة، في التمرين التالي
سترى أننا سنستفيد بشكل ملائم من أمر يسمى ng
build لبناء مجلد التوزيع الخاص بنا لتطبيق Angular الخاص بنا.
يسمح لك بناء Ng ببناء إصدار تطوير أو
إصدار إنتاج من تطبيق Angular الخاص بك.
عندما استخدمنا تصفح ng،
كان CLI Angular يستخدم بالفعل webpack لحزم الأشياء.
لذلك إذا عدت
ونظرت إلى جميع الأشياء التي تم طباعتها في نافذة المحطة الطرفية الخاصة بك،
فستبدأ في رؤية webpack تعمل خلف الكواليس للقيام بالحزم.
الآن في التمرين التالي، ستقوم بإنشاء مجلد التوزيع الخاص بهم،
والذي يمكن بعد ذلك نسخه إلى موقع الويب الخاص بك ثم نشر تطبيق Angular الخاص بك.
الآن لقد قمت بالفعل ببناء واحد
من تطبيق Angular الذي قمنا ببنائه حتى الآن.
لذلك، دعونا نذهب ونلقي نظرة سريعة على مجلد التوزيع لمعرفة ما هو
هناك قبل أن تفعل فعلا التمرين.
لذلك بمجرد إكمال التمرين، أنصحك بشدة بالذهاب
والنظر إلى مجلد القرص الذي تم إنشاؤه في مجلد مشروع تطبيقات Angular الخاص بك.
ثم انظر وانظر بالضبط الملفات التي سأريك إياها الآن
الحق في مجلد التوزيع.
الذهاب إلى تطبيق الزاوي لدينا في فيسوال ستوديو هنا،
ترى أنني الآن فتح مجلد التوزيع.
وداخل مجلد التوزيع سترى مجموعة كاملة من الملفات هنا.
سترى ملفًا باسم سلسلة طويلة حيث
.bundle.js من معرفتك بـ Gulp و Grunt من الدورة السابقة،
ستبدأ في معرفة ما تعنيه هذه السلسلة الطويلة المتوسطة.
هذه هي الطريقة التي تضيف بها هذا الإصدار إلى التطبيق الخاص بك.
وبالمثل، ترى ملفًا آخر يسمى styles.something.css.
ثم ترى بائع.bundle.js.
ثم polyfills.js.
ثم لديك ملف index.html،
وكنت أتساءل ما حدث لجميع التعليمات البرمجية هتمل الخاص بك؟
انها في واحدة من تلك الحزم هناك، حسنا.
لذا فإن جميع القوالب التي كتبتها موجودة في واحدة من تلك الحزم،
باستثناء صفحة index.html.
تحتاج إلى صفحة index.html بشكل صريح لأنه
عندما يقوم مستخدم بكتابة عنوان URL
لموقع الويب الخاص بك في شريط عناوين المتصفح.
ثم تهبط في موقع الويب الخاص بك
وصفحات HTML نقطة الفهرس حيث تبدأ كل شيء
وتحتاج إلى ذلك لتمهيد تطبيق Angular الخاص بك وهذا هو السبب في وجود ذلك.
ثم ترى أيضا ملفات فونتاويسوم هناك التي هي ضرورية
وأنه داخل الأصول ترى بعض الصور هناك، في مجلد الأصول.
حتى إلقاء نظرة سريعة على الملف الرئيسي، سترى أن هذا هو
كما ترون هو العديد من الملفات مضغوطة سلسلة مجموعة من الملفات.
الآن، إذا حاولت قراءة ذلك، لن يكون الأمر سهلاً،
إنه ملف ضخم يحتوي على الكثير من الأشياء.
ويشمل هذا أيضًا جميع كود الأطر الزاوي،
وهو يد شفرتك التي كتبتها.
والرمز الذي يأتي من مادة الزاوي، فليكس-لايوت
وكل شيء آخر قمت بتضمينه مع التطبيق الزاوي الخاص بك.
وبالمثل، لديك polyfills ثم الأنماط
وتبدأ في رؤية أن جميع الأشياء التي تستخدمها داخل
تطبيق Angular الخاص بك قد تم تجميعها معًا في هذه الملفات هناك.
لذلك مع هذا آمل أن تحصل على نظرة عامة سريعة على webpack.
الآن حان الوقت بالنسبة لنا للذهاب إلى التمرين، حيث سنقوم ببساطة باستخدام
أمر بناء Angular CLI ng لبناء مجلد التوزيع هذا.
وسترى كيف يمكنك نشر تطبيق Angular الخاص بك على موقع ويب.
مباشرة بعد إكمال البناء.
[ موسيقى]