[MUSIC]
الآن بعد أن لديك Node.js على جهاز الكمبيوتر الخاص بك،
من الواضح أنك تريد البدء في استخدامه على الفور.
لذلك في هذا التمرين سنبدأ في استخدام العقدة.
سنقوم بإعداد ملف package.json
لمجلد git-test الذي كنا نعمل معه حتى الآن،
ثم سنقوم بإعداد وحدة عقدة تسمى خادم lite-server الذي
سيخدم محتويات مجلد git-test الخاص بنا.
ومن ثم يمكننا تصفح هذا الملف index.html
والملفات الأخرى في المتصفح.
وسوف نرى أيضا كيف
سيمكننا خادم لايت من رؤية التحديثات تلقائيا إلى
نافذة المتصفح لدينا ونحن إجراء تغييرات على ملف index.html لدينا أو
أي ملفات أخرى في لدينا جيت اختبار المجلد.
خادم lite-server هو شيء سنقوم باستخدامه على نطاق واسع في هذه
الدورات والمستقبلية لتكون قادرة على رؤية التغييرات في الوقت الحقيقي في
نافذة المتصفح أثناء تحرير ملفات مشروعك.
كما ذكرت، نريد إعداد ملف package.json.
فما هو بالضبط هذا الملف package.json الذي سنقوم بإعداده؟
حتى هنا، لدي بعض المعلومات من
موقع npmjs.org الذي يحدد
بالضبط ما هو دور ملف package.json.
لذا، يعمل ملف package.json كوثائق
حول جميع الحزم الأخرى التي يعتمد عليها مشروعك.
على سبيل المثال، عند إعداد خادم
lite-لمشروعك، سيتم تسجيله في ملف package.json.
بحيث في وقت لاحق، يمكنك أيضا الاستفادة من هذه الحزمة في المستقبل.
كما يسمح لك بتحديد الإصدار المحدد من الحزمة
التي يعتمد عليها مشروعك.
لذلك حتى إذا كانت الحزمة التي تعتمد على التغييرات في المستقبل،
قد تصر على أنك تريد أن يقوم المستخدم بتثبيت
إصدار معين فقط من الحزمة للاستخدام داخل تطبيق Node الخاص بك.
وأيضا يجعل يبني الخاص بك استنساخ،
مما يعني أنه عند مشاركة التعليمات البرمجية الخاصة بك مع الآخرين،
ثم أنها يمكن أيضا القيام بتثبيت جميع وحدات عقدة،
كما سنرى في وقت لاحق في هذا التمرين، على جهاز الكمبيوتر الخاص بهم.
لذا من الواضح أن سؤالك التالي سيكون، كيف يمكننا إنشاء ملف package.json هذا؟
إذا كنت تبدأ مشروعًا جديدًا، حيث تريد تهيئة
ملف package.json، فببساطة اكتب npm init في المطالبة في مجلد المشروع.
وبعد ذلك سوف يأخذك من خلال مجموعة من الخطوات
التي سوف تمكنك من تكوين ملف package.json الخاص بك.
لذلك دعونا المضي قدما في ذلك لمشروعنا git-test.
لذلك أنا هنا في مجلد git-test في نافذة المحطة الطرفية الخاصة بي.
تأكد من فتح نافذة طرفية أو إطار
أوامر ثم انتقل إلى مجلد git-test.
وفي موجه، اكتب npm init ثم اتبع على طول الأسئلة التي يتم طرحها.
لذلك بالنسبة لاسم المشروع، سنتركه فقط كخيار افتراضي، اختبار git-test.
بالنسبة للإصدار، سنتركه فقط كـ 1.0.0.
يمكننا تعديل ذلك لاحقاً
للوصف،
هذا دليل اختبار
لتعلم Git والعقدة.
لا يهم، اكتب بعض الوصف هناك.
ثم نقطة الدخول، سأقول فقط index.html.
عادة إذا كانت حزمة عقدة، ستكون نقطة الإدخال index.js.
الآن، هذا المجلد الذي قمنا بإعداده هو مجلد يستند إلى index.html،
لذلك هذا هو السبب في أنني اكتب فقط في index.html.
أمر اختبار، لا شيء.
مستودع Git، إذا كان لدينا بالفعل إعداد مستودع Git في
التمرين السابق، فسيتم مطالبتك بذلك تلقائيًا.
إذا لم يكن الأمر كذلك، فسيكون هذا فارغًا ويعطيك خيارًا لكتابة
عنوان URL لمستودع Git في حالة استخدام مستودع Git عبر الإنترنت.
بعض الكلمات الرئيسية لمشروعك، والتي سأتركها فارغة.
الكاتب، اكتب اسمك.
لنكن نرجسية
ورخصة.
ثم سيظهر لك تكوين ملف package.json بتنسيق JSON.
لذا إذا كنت معتادًا على JSON، فسيبدو هذا مألوفًا جدًا لك.
لذا إذا كان هذا يبدو جيداً، دعنا فقط نقول حسناً.
ومن ثم يؤدي ذلك إلى إنشاء ملفات package.json.
حتى الآن إذا قمت بإدراج محتويات المجلد،
سترى ملف package.json في محتويات المجلد.
افتح مجلد git-test في المحرر المفضل لديك
ثم ألق نظرة على محتويات ملف package.json في المحرر الخاص بك.
كخطوة تالية، سوف نتعلم كيف يمكننا تثبيت
وحدة عقدة باستخدام الآلية الوقائية الوطنية، مدير حزمة العقدة.
لذلك سنقوم بتثبيت وحدة العقدة هذه تسمى خادم lite-server.
سيقوم خادم lite-server بعرض محتويات هذا المجلد git-test في
خادم يبدأ تشغيله، بحيث يمكنك عرض المحتويات في المستعرض.
وبالنظر إلى أن لدينا ملف index.html، إذا كنا تخدم هذا المجلد
ثم سيكون موقع على شبكة الانترنت ويمكنك عرض index.html في متصفح.
لذلك دعونا إعداد ليت الخادم وبعد ذلك سوف نرى كيف يمكننا
الاستفادة من ليت الخادم لخدمة محتويات هذا المجلد.
هذا مفيد للغاية لأنه إذا كنت تعمل على مشروع تطوير الويب،
فأنت تريد أن ترى الإصدار المباشر لمشروع تطوير الويب الخاص بك
بحيث يمكنك عند إجراء تغييرات على
مشروعك، رؤية التغييرات التي تنعكس على الفور في المتصفح.
لذلك هذه حزمة عقدة جيدة جدا مفيدة جدا لهذا الغرض.
لذلك دعونا إعداد ليت الخادم.
للقيام بذلك في موجه، اكتب في npm install.
لذا لاحظ، إذا كنت تريد أن تقوم npm بتثبيت حزمة
Node، فهذه هي الطريقة التي ستستدعيها.
ومن ثم كنت أقول ليت الخادم.
ثم نريد أيضًا حفظ حقيقة أن مشروعنا يستخدم خادم lite-server.
لذلك سنقوم بحفظ هذه المعلومات في ملف package.json.
لذلك للقيام بذلك، سنقوم بكتابة - save-dev.
الآن يحدد خيار حفظ ديف أن هذا الملقم لايت يستخدم
لتبعية التنمية لمشروعنا.
إذا كنت تقوم بتثبيت وحدة Node
يعتمد عليها مشروعك بشكل مباشر، فستثبّه ببساطة عن طريق قول خيار - save.
لذلك دعونا المضي قدما وتثبيته.
وأنت تنتظر بصبر حتى يتم التثبيت.
سيستغرق ذلك بضع دقائق لإكمال تركيبه.
بمجرد تثبيت ذلك،
ستلاحظ على الفور عند النظر إلى محتويات المجلد الخاص
بك، ستلاحظ على الفور أن هناك مجلد هناك تم إنشاؤه اسمه node_modules.
الآن، إذا ذهبت إلى node_modules سترى مجموعة كاملة
من المجلدات الفرعية الأخرى هناك التي تحتوي على وحدات عقدة
ضرورية لوحدة عقدة lite-sever وهلم جرا.
لذلك، دعونا نلقي جولة سريعة من مجلد node_modules لمعرفة
ما هي محتويات هذه.
الذهاب إلى مجلد git-test الخاص بي، إذا كنت تسير على مجلد node_modules،
سترى كما قلت، مجموعة كاملة من المجلدات الفرعية هناك.
عادة لا تحتاج إلى التقديم في مجلد node_modules،
فهي موجودة فقط هناك لأنها مطلوبة لخادم lite-server.
لذلك، كما يمكنك تصفح من خلال لك، يجب أن مجلد إشعار اسمه lite-server هنا.
عندما تذهب إلى مجلد خادم lite-server، لاحظ على وجه الخصوص وجود
ملف index.js ثم ملف package.json، والعديد من الأشياء الأخرى.
لذلك تضم محتويات المجلد وحدة عقدة خادم lite-server.
ولكن وحدة عقدة lite-server هذه تعتمد على وحدات العقدة الأخرى
لتزويدها ببعض الوظائف الإضافية.
لذلك هذا هو السبب، عند تثبيت وحدة عقدة خادم lite-server، ستقوم بدورها
بتثبيت العديد من وحدات العقدة الأخرى التي يعتمد عليها خادم lite-server نفسه.
لذلك هذا هو السبب في أنك ترى هذا الانفجار من
تلك المجلدات داخل مجلد node_modules.
لا تكون قلقا جدا حيال ذلك، فإن مجموع كل هذا لن يكون أكثر من
بضع عشرات من ميغابايت.
لذلك، فإنه لن لملء الدليل الخاص بك مع تلك غير المرغوب فيه.
كل هذا ضروري للعقدة لتكون قادرة على مساعدتك.
في حال كنت تشعر بالفضول حول خادم lite-وكيف يعمل وهلم جرا.
يمكنك الانتقال إلى موقع GitHub هذا حيث يتم نشر خادم
lite-ثم البحث عن وثائق خادم lite-server.
وسوف أعرض لكم كل ما تحتاج إلى معرفته عن LITE الخادم ونحن نذهب من خلال
هذه الدورة والدورات المتبقية.
لذلك لا داعي للقلق كثيرا حول هذا الموضوع.
ولكن فقط في حال كنت غريبة,
يمكنك دائما الذهاب إلى هذا الموقع لمعرفة المزيد من التفاصيل حول Lite-الخادم.
يتم توفير الرابط في تعليمات التمرين
وجزء الموارد الإضافية من هذا الدرس.
بمجرد الانتهاء من ذلك، ثم توجه إلى المحرر،
حيث لديك المجلد، مجلد git-test، افتح
ثم عرض محتويات ملف package.json.
لذلك سترى أن ملف package.json يحتوي بالضبط على المعلومات التي
قمت بتكوينها باستخدام npm الخاص بك فيه.
لذلك سترى الاسم والإصدار ومؤلف المستودع، وعلى
وجه الخصوص، لاحظ هذه المعلومات هنا تقول DevDependencies.
ثم يحدد خادم lite-، ويلاحظ أيضًا أنه يقول، ^2.2.2.
مما يعني أن هذا المشروع بالذات يعتمد على
خادم lite-الذي هو على الأقل الإصدار 2.2.2.
كل مستوى عالٍ.
لذلك هذا مفيد جدا بالنسبة لنا.
الآن، لماذا نحتاج إلى هذه المعلومات هنا، في وقت لاحق عندما تذهب إلى
التدريبات الأخرى، ستلاحظ أنه عند تخزين هذا على مستودع عبر الإنترنت.
لا تريد تخزين كل شيء في مجلد node_modules الخاص بك.
سنقوم فقط بتخزين المعلومات من جميع الملفات التي أنشأناها.
يمكن دائمًا إعادة إنشاء مجلد node_modules
بكتابة nmp install في موجه الأوامر الخاص بنا.
ثم استنادًا إلى
devDependencies والاعتماديات المسردة في ملف package.json. سيتم
تثبيت جميع وحدات العقدة التي يعتمد عليها مشروعك تلقائيًا.
سنرى أنه في وقت لاحق،
حول كيفية استخدام npm install في هذه الدورة.
الآن، الآن بعد أن نحن في ملف package.json، دعونا نجري بعض التعديلات حتى
نتمكن من الاستفادة من خادم lite-لخدمة هذا المحتوى.
لذلك، هنا في هذا الخيار يسمى البرامج النصية،
دعونا نضيف في واحد أكثر هنا.
لذلك سوف نقول، ابدأ.
لذا فإن البداية هي أمر يدعم npm
والذي يتيح لك تحديد مجموعة من الأشياء التي سيتم تشغيلها.
لذا في وقت لاحق، سنرى كيف سنستفيد من هذا.
حتى هنا، أنا ذاهب إلى القول، نبم تشغيل لايت.
وبعد الاختبار، وأنا ذاهب
لإضافة في إدخال واحد آخر يسمى،
لايت التي سوف تكوين كما ليت الخادم.
حسنا، مع هذه التغييرات، دعونا حفظ ملف package.json
ثم الآن، يتم تكوين مشروعنا.
حتى الآن، إذا قمت بتشغيل خادم lite-server،
فسيتم عرض محتويات المجلد الخاص بك الآن في المتصفح المفضل لديك.
العودة إلى موجه الأوامر لدينا والموجه.
إذا قمت بكتابة npm start، فأنت الآن ترى لماذا
أضع هذا الإدخال الذي يسمى البدء في ملف package.json الخاص بي.
لذلك، إذا قلت بداية npm، مهما تم تكوين هذه البداية،
في ملف package.json.
نحدد أنه كما npm تشغيل لايت، ومن ثم تم تحديد لايت كما ليت الخادم.
لذلك أساسا، ونحن نقول بدء الخادم لايت.
لذلك بمجرد كتابة، تبدأ npm، سيبدأ تشغيل خادم
lite-وسيخدم محتويات هذا المجلد.
الآن، كيف يمكنك الوصول إلى محتويات هذا المجلد؟
إذا كنت ترغب في الوصول إليه محليًا، فستتمكن من الوصول إليه عن طريق
تحديد عنوان URL على أنه مضيف محلي: 3000.
هذه هي الإعدادات الافتراضية لخادم lite-server.
وعلاوة على ذلك، يجب أن يفتح هذا تلقائيا
نافذة المتصفح من المتصفح الافتراضي الخاص بك
ثم تظهر محتويات index.html في نافذة المتصفح تلك.
هنا، يمكنك أن ترى أنني قد فتحت محرر
بلدي ونافذة المتصفح الموجهة إلى لوكالهوست: 3000
في وقت واحد جنبا إلى جنب.
حتى نتمكن من رؤية كيف
ستعكس نافذة المتصفح على الفور أي تغييرات نجريها على ملفاتنا في مجلد git-test.
لذلك اسمحوا لي أن أذهب إلى index.html.
ومن ثم من أجل الفضاء، سأقوم بتسليم ذلك.
ثم هنا يمكنك أن ترى أن هذا هو محتويات هذا.
ثم اسمحوا لي الآن أن أضيف في
فقرة واحدة أخرى،
وحفظ التغييرات.
وبعد ذلك ستلاحظ على الفور أن التغيير الذي
أجريته على ملف index.html الخاص بي ينعكس في المتصفح الخاص بي.
يوفر هذا طريقة لطيفة جدًا لتتمكن من مراقبة
التغييرات التي تجريها على شفرتك في المستعرض الخاص بك في الوقت الحقيقي.
لذلك عندما كنت تعمل على مشروع، سيكون من المناسب جدا بالنسبة
لك أن تكون قادرا على رؤية التغييرات على الفور.
لذلك عند إجراء تغيير وحفظ الملف،
يتم تحميل التعليمات البرمجية المعدلة على الفور في المتصفح الخاص بك حتى
تتمكن من رؤية التغيير الذي ينعكس في نافذة المتصفح الخاص بك على الفور.
هذه أداة مفيدة للغاية أثناء قيامك بتطوير مشروعك.
وهذا هو السبب في أنني قدمت لكم إلى الخادم لايت
وإعداده حتى نتمكن من الاستفادة منه ونحن تطوير الموقع في هذه الدورة.
إذا كنت تتذكر، فقد قمنا بالفعل بإعداد مجلد git-test ليكون مستودع git،
بحيث يتم التحقق مرة أخرى،
سنرى أن لدينا بالفعل ثلاثة التزامات في مستودع git الخاص بنا.
وهذا مستودع git موجود بالفعل في مستودع git الخاص بنا على الإنترنت،
والذي قمنا بإعداده في التمرين السابق، إما في bitbucket أو GitHub.
تتم مزامنة مجلد git-test الخاص بي إلى
مستودع bitbucket الخاص بي في هذا التمرين المعين.
لذلك ما سأفعله الآن هو أن أريك كيف يمكنك استبعاد بعض
المجلدات من مجلد المشروع الخاص بك
ومن ثم التأكد من أنها غير متزامنة مع المستودع الخاص بك على الانترنت.
الآن كما قلت، يمكن دائمًا إعادة إنشاء مجلد وحدات العقدة
بكتابة npminstall في المطالبة.
لهذا السبب، عند تحميل محتويات
المجلد الخاص بك إلى مستودع git عبر الإنترنت أو
عند القيام بالتزام المجلد إلى مستودع git الخاص بك،
لا تريد
تضمين مجلد وحدات الملاحظات أو جميع المجلدات الفرعية تحته في، Commit.
فكيف نستبعد بعض المجلدات أو
بعض الملفات من مجلدنا من أن يتم تسجيلها في مستودع git الخاص بنا.
لذلك للقيام بذلك، سنقوم بإعداد ملف اسمه .gitignore.
إذا هذا هو اسم الملف، .gitignore.
لذلك لإنشاء هذا الملف.gitignore، سنذهب إلى محررنا.
لذلك في المحرر في مجلد اختبار git، سأقوم بإنشاء ملف جديد.
وسأسميها. gitignore.
لاحظ أن الاسم يبدأ بنقطة
ثم بقية الاسم هو G-I-T-I-G-N-O-R-E.
لذلك هذا
مهم جدا جدا أن تقوم بإعداد fille مع الاسم بالضبط، .gitignore.
لذلك دعونا إنشاء هذا الملف يسمى، .gitignore،
والسطر الأول من هذا الملف، وسوف نكتب كما node_modules.
لذلك ما يعنيه هذا هو أنه،
سيتم استبعاد مجلد وحدة العقدة من التزام git الخاص بنا.
لذلك بمجرد إنشاء هذا الملف.gitignore
ثم إضافة وحدات العقدة في ملف.gitignore، دعونا حفظ التغييرات.
وبعد ذلك سنقوم الآن بالتزام الحالة الحالية لمشروعنا
في مستودع git الخاص بنا.
آمل أن تتذكر أوامر git الخاصة بك.
دعونا نفعل حالة git، وبعد ذلك عند القيام بذلك،
ستلاحظ على الفور أن لديك ملف index.html
ملحوظ كما تم تعديله ثم ملفين جديدين، .gitignore و package.json.
لذلك نقوم بإضافة git.، ثم نقوم بحالة git.
ثم ترى أن جميع هذه الملفات الجديدة قد تم تسجيلها في التزامك.
دعونا نفعل جيت ارتكاب، جيت ارتكاب -m «
الالتزام الرابع». والملفات ملتزمة.
دعونا ندفع الالتزام الجديد لمستودعنا عبر الإنترنت.
لذلك للقيام بذلك، جيت دفع
-u الأصل الرئيسي.
وانتظر حتى يتم دفعها إلى خادمنا.
الآن إذا ذهبت إلى مستودع git الخاص بك على الإنترنت،
سترى أن ملف package.json
و.gitignore قد تم تسجيله في مستودع git الخاص بك.
الذهاب إلى مستودع بيتبوكيت الخاص بي لاختبار جيت.
سترى أنه عندما أنظر إلى المصدر،
سترى أنه تمت إضافة ملف package.json، تمت
إضافة.gitignore، وتم إيداع ملف index.html الجديد.
بحيث يكمل هذا التمرين.
لذلك في هذا التمرين،
تعلمنا كيفية إعداد ملف package.json باستخدام دقيقة npm.
لقد تعلمنا كيفية تثبيت وحدة npm.
وتعلمنا كيفية استخدام وحدة npm server lite لخدمة
محتويات مجلد مشروعنا بحيث يمكن مشاهدته في المتصفح.
لذلك هذه طريقة لطيفة لتقديم محتوياتك
أو تطبيق الويب الخاص بك أو موقع الويب الخاص بك
بحيث يمكنك رؤية التغييرات في الوقت الحقيقي تنعكس على نافذة المتصفح الخاص بك.
وبعد ذلك، رأينا أيضًا كيف يمكنهم إعداد.gitignore بحيث
يمكن استبعاد بعض المجلدات من التحقق في مستودع git الخاص بنا.
و هذا يكمل هذا التمرين.
لذلك مع هذا، أنا متأكد من أنك قد حصلت على مقبض جيد
على استخدام كل من بوابة ومن ثم أيضا عقدة عقدة وحدات.
لا تقلقي
سوف نستخدم عقدة على نطاق واسع بطرق مختلفة
كما تذهب من خلال دورات هذا التخصص.
هذه مجرد بداية
[ موسيقى]