[MUSIC]
الآن بعد أن لديك Node.js على جهاز الكمبيوتر الخاص بك،
من الواضح أنك تريد البدء في استخدامه على الفور.
لذلك، في هذا التمرين، سنبدأ في استخدام العقدة.
سنقوم بإعداد ملف معبأ، أو مجاور،
لمجلد اختبار Git الذي كنا نعمل معه حتى الآن.
ثم، سنقوم بإعداد وحدة عقدة تسمى خادم لايت من
شأنها أن تخدم محتويات لدينا الحصول على مجلد اختبار.
ومن ثم يمكننا تصفح هذا الملف index.html
والملفات الأخرى في المتصفح.
وسوف نرى أيضا كيف الخادم لايت سوف تمكننا من
رؤية التحديثات تلقائيا إلى نافذة المتصفح لدينا ونحن إجراء تغييرات على
ملف index.html لدينا، أو أي ملفات أخرى في لدينا الحصول على مجلد اختبار.
الخادم لايت هو شيء أننا في طريقنا إلى استخدام على نطاق واسع في هذه
الدورات والمستقبلية، لتكون قادرة على رؤية التغييرات في الوقت الحقيقي
في نافذة المتصفح كما يمكنك تحرير ملفات المشروع الخاص بك.
كما ذكرت، نريد إعداد ملف package.json.
فما هو بالضبط هذا الملف package.json الذي سنقوم بإعداده؟
حتى هنا، لدي بعض المعلومات من
موقع npmjs.org
الذي يحدد بالضبط ما هو دور ملف package.json.
لذا، يعمل ملف package.json كوثائق حول جميع
الحزم الأخرى التي يعتمد عليها مشروعك.
لذلك، على سبيل المثال، عند إعداد خادم لايت من المشروع الخاص بك،
والتي سيتم تسجيلها في ملف package.json.
وهكذا، في وقت لاحق، يمكنك أيضا الاستفادة من تلك الحزمة في المستقبل.
كما يسمح لك بتحديد الإصدار المحدد من الحزمة
التي يعتمد عليها مشروعك.
لذلك حتى إذا كانت الحزمة التي تعتمد على التغييرات في المستقبل،
قد تصر على أنك تريد أن يقوم المستخدم بتثبيت
إصدار معين فقط من الحزمة للاستخدام داخل تطبيق العقدة الخاص بك.
وأيضا، فإنه يجعل يبني الخاص بك استنساخ،
مما يعني أنه عند مشاركة التعليمات البرمجية الخاصة بك مع الآخرين،
ثم أنها يمكن أيضا القيام بتثبيت جميع وحدات العقدة،
كما سنرى في وقت لاحق في هذا التمرين، على جهاز الكمبيوتر الخاص بهم.
لذا من الواضح أن سؤالك التالي سيكون، كيف يمكننا إنشاء ملف package.json هذا؟
إذا كنت تبدأ مشروعًا جديدًا حيث تريد تهيئة
ملف package.json، فببساطة اكتب npm init في المطالبة في مجلد المشروع.
وبعد ذلك سوف يأخذك من خلال مجموعة من الخطوات التي سوف تمكنك من
تكوين ملف package.json الخاص بك.
لذلك دعونا المضي قدما في ذلك لمشروع اختبار جيت لدينا.
لذلك أنا هنا في مجلد git-test في نافذة المحطة الطرفية الخاصة بي.
تأكد من فتح نافذة طرفية أو إطار أوامر
ثم انتقل إلى مجلد git-test.
وفي موجه، اكتب npm init.
ثم اتبع على طول الأسئلة التي يتم طرحها.
لذلك بالنسبة لاسم المشروع، سنتركه فقط كاختبار افتراضي، اختبار git-test.
بالنسبة للإصدار، سنتركه فقط كـ 1.0.0.
يمكننا تعديل ذلك لاحقاً
للوصف،
هذا دليل اختبار
لتعلم Git و Node.
لا يهم، اكتب بعض الوصف هناك.
ثم نقطة الدخول، وأود أن أقول فقط index.html.
عادة إذا كانت حزمة عقدة، ستكون نقطة الدخول index.js.
الآن هذا المجلد الذي لدينا الإعداد
هو مجلد يستند إلى index.html، لذلك لهذا السبب أنا فقط كتبت في index.html.
أمر اختبار، لا شيء
مستودع Git، إذا كنا قد قمنا بالفعل بإعداد مستودع git في
التمرين السابق، فسوف يطالبك تلقائيًا بذلك، إن لم يكن،
فسيكون هذا فارغًا ويعطيك خيارًا لكتابة عنوان URL لمستودع git،
في حال كنت تستخدم مستودع git عبر الإنترنت.
بعض الكلمات الرئيسية لمشروعك، والتي سأتركها فارغة.
الكاتب، اكتب اسمك.
لنكن نرجسية
والرخصة
وبعد ذلك، سيظهر لك تكوين ملف package.json بتنسيق JSON.
حتى إذا كان لديك عائلتك جسون، هل تبدو مألوفة جدا، جدا بالنسبة لك.
حتى إذا كان هذا يبدو كل شيء جيد، دعونا نقول فقط موافق
وبعد ذلك يؤدي إلى إنشاء ملف package.json.
حتى الآن إذا قمت بإدراج محتويات المجلد،
سترى ملف package.json في محتويات المجلد.
افتح مجلد اختبار Git هذا في المحرر المفضل لديك،
ثم ألق نظرة على محتويات ملف package.json في المحرر الخاص بك.
كخطوة تالية، سوف نتعلم كيف يمكننا تثبيت وحدة عقدة
باستخدام الآلية الوقائية الوطنية، مدير حزمة العقدة.
لذلك، سنقوم بتثبيت وحدة العقدة هذه تسمى خادم الضوء.
سيخدم الخادم الخفيف محتويات هذا المجلد git-test في
خادم يبدأ تشغيله بحيث يمكنك عرض المحتويات في المستعرض.
وبالنظر إلى أن لدينا ملف index.html،
إذا كنا تخدم هذا المجلد، ثم سيكون موقع على شبكة الإنترنت.
ويمكنك عرض index.html في متصفح.
لذلك، دعونا إعداد خادم الضوء وبعد ذلك سوف نرى كيف يمكننا
الاستفادة من خادم الضوء لخدمة محتويات هذا المجلد.
هذا مفيد للغاية لأنه إذا كنت تعمل على
مشروع تطوير الويب، فأنت تريد أن ترى أين الإصدار المباشر لمشروع تطوير الويب الخاص بك.
بحيث، عند إجراء تغييرات على مشروعك،
يمكنك رؤية التغييرات التي تنعكس على الفور في المتصفح.
لذلك هذا هو حزمة عقدة جيدة جدا التي هي مفيدة جدا لهذا الغرض.
لذلك دعونا إعداد هذا الخادم ضوء.
للقيام بذلك، أضف المطالبة.
اكتب تثبيت الآلية الوقائية الوطنية.
لذا لاحظ، إذا كنت تريد أن تقوم الآلية الوقائية الوطنية بتثبيت حزمة عقدة،
فهذه هي الطريقة التي ستستدعيها ثم تقول خادم lite-server.
وبعد ذلك، نريد أيضا حفظ حقيقة أن مشروعنا يستخدم الخادم لايت.
لذلك سنقوم بحفظ هذه المعلومات في ملف package.json.
لذلك للقيام بذلك، سوف تكتب في - حفظ ديف.
الآن يحدد خيار حفظ ديف أن هذا الخادم لايت يستخدم
لتبعية التنمية لمشروعنا.
إذا كنت تقوم بتثبيت وحدة نمطية للعقدة
يعتمد عليها مشروعك بشكل مباشر، فيمكنك تثبيته ببساطة عن طريق قول خيار - save.
لذلك، دعونا المضي قدما وتثبيته.
وأنت تنتظر بصبر حتى يتم التثبيت.
سيستغرق ذلك بضع دقائق لإكمال تركيبه.
بمجرد تثبيت ذلك،
ستلاحظ على الفور عند النظر إلى محتويات المجلد الخاص
بك، ستلاحظ على الفور أن هناك مجلد هناك تم إنشاؤه اسمه node_modules.
الآن، إذا ذهبت إلى node_module، سترى مجموعة كاملة
من المجلدات الفرعية الأخرى هناك، والتي تحتوي على وحدات العقدة،
والتي هي ضرورية لأمثال وحدة العقدة الخاصة بنا وهلم جرا.
لذلك دعونا نلقي جولة سريعة من مجلد وحدات العقدة لمعرفة
ما هي محتويات هذه.
الذهاب إلى مجلد git-test الخاص بي، إذا كنت تسير على مجلد وحدات العقدة
، سترى، كما قلت، مجموعة كاملة من المجلدات الفرعية هناك.
عادة لا تحتاج إلى المغامرة في مجلد وحدات العقدة.
أنها موجودة فقط هناك لأنها مطلوبة ل [غير مسموع].
لذلك أثناء تصفح، يجب أن تلاحظ مجلد باسم lite-server هنا.
عندما تذهب إلى مجلد خادم lite-server،
لاحظ على وجه الخصوص وجود ملف index.js
ثم ملف package.json الخاص بك والعديد من الأشياء الأخرى.
لذلك تضم محتويات المجلد وحدة عقدة خادم lite-server.
ولكن وحدة عقدة lite-server هذه تعتمد على وحدات العقدة الأخرى
لتزويدها ببعض الوظائف الإضافية.
لذلك هذا هو السبب عند تثبيت وحدة عقدة الخادم الخفيفة، فإنه سيقوم بدوره
بتثبيت العديد من وحدات العقدة الأخرى، والتي يعتمد عليها الخادم الخفيف نفسه.
لذلك هذا هو السبب في أنك ترى هذا الانفجار من
هذه المجلدات داخل وحدات العقدة.
لا تكون قلقا جدا حيال ذلك، فإن مجموع المجلدات لن يكون
أكثر من بضع عشرات من ميغا بايت.
لذلك لن تملأ الدليل الخاص بك مع غير المرغوب فيه.
كل هذا ضروري للعقدة لتكون قادرة على مساعدتك.
في حال كنت تشعر بالفضول حول خادم lite-وكيف يعمل وما إلى ذلك،
يمكنك دائمًا الانتقال إلى موقع GitHub هذا حيث يتم استضافة خادم lite-server.
ثم ابحث عن وثائق لخادم lite-server.
وسوف أعرض لكم كل ما تحتاج إلى معرفته عن LITE الخادم ونحن نذهب من خلال
هذه الدورة والدورات المتبقية.
لذلك لا داعي للقلق كثيرًا حول هذا الموضوع، ولكن فقط في حال كنت فضوليًا،
يمكنك دائمًا الذهاب إلى الموقع لمعرفة المزيد من التفاصيل حول خادم lite-server.
يتم توفير الرابط في تعليمات التمرين الخاصة بك
والموارد الإضافية هي جزء من هذا الدرس.
بمجرد الانتهاء من ذلك، ثم توجه إلى.
محرر حيث لديك المجلد، مجلد Git-Test، فتح
ثم عرض محتويات ملف package.json.
لذلك سترى أن ملف package.json يحتوي بالضبط على المعلومات التي
قمت بتكوينها مع الآلية الوقائية الوطنية.
لذلك سترى إصدار الاسم ومؤلف المستودع
وعلى وجه الخصوص، لاحظ هذه المعلومات هنا.
وتقول DevDependencies، لذلك فإنه يحدد ليتس سيفر،
وأيضا لاحظ أنه يقول قبعة 2.2.2.
وهذا يعني أن هذا المشروع بالذات
يعتمد على خادم lite-الذي هو على الأقل الإصدار 2.2.2 أو أعلى.
لذلك هذا مفيد جدا بالنسبة لنا.
الآن لماذا نحتاج هذه المعلومات هنا؟
في وقت لاحق، عندما تذهب إلى التدريبات الأخرى،
ستلاحظ أنه عند تخزين هذا على مستودع عبر الإنترنت،
لا تريد تخزين كل شيء في مجلد وحدات العقدة الخاصة بك.
سوف تقوم فقط بتخزين المعلومات من جميع الملفات التي أنشأناها.
يمكن دائمًا إعادة إنشاء مجلد وحدات العقدة
بكتابة تثبيت NPM في موجه الأوامر الخاص بنا.
ثم استنادًا إلى تبعيات dev
والتبعيات المسردة في ملف packager،
سيتم تثبيت جميع وحدات العقدة التي يعتمد عليها مشروعك تلقائيًا.
سنرى أنه في وقت لاحق حول كيفية استخدام
تثبيت الآلية الوقائية الوطنية في هذه الدورة.
الآن بعد أن أصبحنا في ملف package.json دعونا نجري بعض التعديلات حتى
نتمكن من الاستفادة من خادم lite-لخدمة هذا المحتوى.
حتى هنا، في هذا الخيار يسمى البرامج النصية،
دعونا نضيف في واحد أكثر هنا.
لذلك سوف نقول «ابدأ».
لذا فإن البداية هي أمر تدعمه الآلية الوقائية الوطنية والذي
يتيح لك تحديد مجموعة من الأشياء التي سيتم تشغيلها.
لذلك في وقت لاحق سنرى كيف نستفيد من هذا.
حتى هنا أنا ذاهب إلى القول «نبم تشغيل لايت».
وبعد هذا الاختبار، وأنا ذاهب لإضافة
في إدخال واحد آخر يسمى «لايت»،
والتي سوف تكوين باسم «ليت سيرفر»، حسنا؟
مع هذه التغييرات، دعونا حفظ ملف package.json.
وبعد ذلك، الآن يتم تكوين مشروعنا، بحيث الآن إذا قمت بتشغيل خادم lite-،
سيتم تقديم محتويات المجلد الخاص بك الآن في المتصفح المفضل لديك.
العودة إلى موجه الأوامر لدينا، إضافة موجه.
إذا قمت بالكتابة، تبدأ npm، والآن ترى لماذا أضع
بطاقة الإدخال هذه في ملف Package.json الخاص بي.
إذا قلت بداية npm، مهما تم تكوين البداية كما هو الحال في ملف Package.json،
فإننا نحدد أن npm تشغيل الضوء، وتم تحديد lite كخادم خفيف.
لذلك أساسا، نحن نقول بدء الخادم لايت.
لذلك، بمجرد كتابة npm start، سيبدأ خادم lite-،
وسيخدم محتويات هذا المجلد.
الآن كيف يمكنك الوصول إلى محتويات هذا المجلد؟
إذا كنت ترغب في الوصول إلى هذا محليًا،
فستصل إليه عن طريق تحديد أنك المضيف المحلي: 3000.
هذه هي الإعدادات الافتراضية لخادم lite-server.
وعلاوة على ذلك، يجب أن يفتح هذا تلقائيا
نافذة المتصفح من المتصفح الافتراضي الخاص بك،
وتظهر محتويات الفهرس أو HTML في نافذة المتصفح.
هنا يمكنك أن ترى أنني فتحت محرر
بلدي ونافذة المتصفح الموجهة إلى لوكالهوست: 3000 في
وقت واحد جنبا إلى جنب، بحيث يمكننا أن نرى
كيف نافذة المتصفح سوف تعكس على الفور
أي تغييرات نجريها على مجلد اختبار جيت لدينا.
لذلك اسمحوا لي أن أذهب إلى index.html.
ومن ثم من أجل الفضاء، سأقوم بتسليم ذلك.
وبعد ذلك، هنا، يمكنك أن ترى أن هذه هي محتويات هذا.
وبعد ذلك، اسمحوا لي الآن أن أضيف فقرة واحدة أخرى.
وحفظ التغييرات، وبعد ذلك ستلاحظ على الفور
أن التغيير الذي أجريته على ملف index.html الخاص بي ينعكس في المتصفح الخاص بي.
يوفر هذا طريقة لطيفة جدًا لتتمكن من مراقبة
التغييرات التي تجريها على شفرتك في الوقت الحقيقي والتي تنعكس في متصفحك.
لذلك عندما كنت تعمل على مشروع، سيكون من المناسب جدا بالنسبة
لك أن تكون قادرا على رؤية التغييرات على الفور.
لذلك عند إجراء تغيير ثم حفظ الملف،
يتم تحميل التعليمات البرمجية المعدلة على الفور في المتصفح الخاص بك.
حتى تتمكن من رؤية التغيير الذي ينعكس في نافذة المتصفح الخاص بك على الفور.
هذه أداة مفيدة للغاية أثناء قيامك بتطوير مشروعك.
هذا هو السبب في أنني قدمت لكم أن خادم لايت,
وإعداده حتى نتمكن من الاستفادة منه, ونحن تطوير الموقع في هذه الدورة.
إذا كنت تتذكر، فقد قمنا بالفعل بإعداد مجلد git-test ليكون مستودع Git.
لذا التحقق مرة أخرى،
سنرى أن لدينا بالفعل ثلاثة التزامات في مستودع Git الخاص بنا. وقد تم نسخ
مستودع Git هذا بالفعل إلى مستودع Git عبر الإنترنت
الذي قمنا بإعداده في التمرين السابق إما في Bitbucket أو GitHub.
تتم مزامنة مجلد git-test الخاص بي إلى
مستودع Bitbucket الخاص بي في هذا التمرين بالذات.
لذلك ما سأفعله الآن هو أن أريك كيف يمكنك استبعاد بعض
المجلدات من مجلد المشروع الخاص بك،
ومن ثم تأكد من أنها غير متزامنة مع المستودع الخاص بك على الانترنت.
الآن كما قلت، يمكن دائمًا إعادة إنشاء مجلد node_modules
عن طريق كتابة npm install في المطالبة.
لهذا السبب عند تحميل
محتويات المجلد الخاص بك إلى مستودع Git عبر الإنترنت،
أو عند القيام بالتزام المجلد إلى مستودع Git الخاص بك،
لا تريد
تضمين مجلد node_modules أو جميع المجلدات الفرعية تحته في الالتزام.
إذن كيف نستبعد بعض المجلدات أو
بعض الملفات من مجلدنا من التحقق في مستودع Git الخاص بنا؟
لذلك للقيام بذلك، سنقوم بإعداد ملف اسمه .gitignore.
إذا هذا هو اسم الملف، .gitignore.
لذلك لإنشاء هذا الملف.gitignore، سنذهب إلى محررنا.
لذلك في المحرر، في مجلد git-test،
سأقوم بإنشاء ملف جديد وسأسميه .gitignore.
لاحظ أن الاسم يبدأ بنقطة
ثم، بقية الاسم هو g-i-t-i-g-n-o-r-e.
لذلك هذا مهم جدا أن تقوم بإعداد الملف مع هذا الاسم بالضبط،
.gitignore.
لذلك دعونا إنشاء هذا الملف يسمى .gitignore،
والسطر الأول من هذا الملف، وسوف نكتب كما node_modules.
إذن ما يعنيه هذا هو أن مجلد node_modules سيتم
استبعاده من التزام git الخاص بنا.
لذلك بمجرد إنشاء هذا الملف.gitignore
ثم إضافة node_modules إلى ملف.gitignore، دعونا حفظ التغييرات.
وبعد ذلك سنقوم الآن بالتزام الحالة الحالية لمشروعنا
في مستودع Git الخاص بنا.
آمل أن تتذكر أوامر git الخاصة بك.
دعونا نفعل حالة git، وبعد ذلك عند القيام بذلك،
ستلاحظ على الفور أن لديك
ملف index.html ملحوظ كما تم تعديله، ثم ملفين جديدين، .gitignore و package.json.
لذلك، نقوم بإضافة git.، ثم نقوم بحالة git.
ثم ترى أن كل هذه الملفات الجديدة قد تم تسجيلها في التزامك.
دعونا نفعل التزام جيت. جيت ارتكاب -m «الالتزام الرابع».
والملفات ملتزمة.
دعونا ندفع الالتزام الجديد لمستودعنا عبر الإنترنت.
لذلك، للقيام بذلك git push -u
الأصل الرئيسي وانتظر حتى
يتم دفعه إلى خادمنا.
الآن، إذا ذهبت إلى مستودع Git الخاص بك على الإنترنت،
سترى أن ملف package.json
و.gitignore كان قد تم تسجيله في مستودع Git الخاص بك.
الذهاب إلى مستودع Bitbucket الخاص بي من اختبار Git، سترى أنه
عندما أنظر إلى المصدر، سترى أنه تمت إضافة ملف package.json.
تمت إضافة.gitignore وتم إيداع الملف index.html الجديد في.
بحيث يكمل هذا التمرين.
لذلك في هذا التمرين،
تعلمنا كيفية إعداد ملف package.json باستخدام npm init.
لقد تعلمنا كيفية تثبيت وحدة npm.
وتعلمنا كيفية استخدام وحدة npm lite-server لخدمة
محتويات مجلد مشروعنا بحيث يمكن مشاهدته في المتصفح.
لذلك، هذه طريقة لطيفة لخدمة محتويات الويب الخاصة بك،
تطبيق الويب الخاص بك أو موقع الويب الخاص بك،
بحيث يمكنك رؤية التغييرات في الوقت الحقيقي تنعكس على نافذة المتصفح الخاص بك.
ثم رأينا أيضًا كيف يمكننا إعداد.gitignore بحيث
يمكن استبعاد بعض المجلدات من التحقق في مستودع Git الخاص بنا.
و هذا يكمل هذا التمرين.
لذلك مع هذا، أنا متأكد من أنك قد حصلت على مقبض جيد
على استخدام كل من Git، ثم أيضا وحدات العقدة والعقدة.
لا تقلق، سوف نستخدم العقدة على نطاق واسع، بطرق مختلفة،
كما تذهب من خلال دورات هذا التخصص.
هذه مجرد بداية
[ موسيقى]