دليل عملي • 06 محطات
اضبط أدواتك مرة واحدة، وأنجز أسرع كل يوم.
دليلك العملي لتجهيز بيئة فرونت إند متناسقة: محرر أكواد، Runtime موثوق، مدير حزم، مستودع نظيف، وأوامر تقلل الفوضى قبل أن تبدأ كتابة الواجهة.
قبل أن تبدأ
تجهيز بيئة فرونت إند ليس تجميعًا عشوائيًا للأدوات. الهدف هو أن تتحول الخطوات المتكررة، مثل فتح المشروع وتشغيله وفحص التغييرات، إلى مسار قصير وواضح. عندما تكون الأدوات متناسقة، يصبح تركيزك على المنتج بدل البحث عن إعداد مفقود.
هيّئ VS Code كمساحة عمل
اجعل المحرر يدعم أسلوب عملك بدل أن يعطّلك. ابدأ بامتدادات قليلة وضرورية، ثم فعّل التنسيق عند الحفظ حتى لا يتحول تنسيق الملفات إلى مهمة يدوية متكررة.
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"files.autoSave": "afterDelay",
"editor.minimap.enabled": false
}ضع إعدادات المشروع المشتركة في مجلد .vscode عندما يحتاج الفريق إلى قواعد موحدة. أما تفضيلاتك الشخصية فاتركها في إعدادات المستخدم حتى لا تفرضها على بقية المشروع.
ثبّت Runtime واضحًا
Node.js هو البيئة التي تشغّل أدوات البناء ومدير الحزم. افحص الإصدارين قبل بدء المشروع، وسجّل الإصدار المطلوب في ملف README أو في إعدادات المشروع كي لا تظهر فروقات غامضة بين أجهزة الفريق.
node --version
npm --versionعند الانتقال إلى مشروع قائم، ابدأ دائمًا بقراءة ملف package.json. فهو يوضح أوامر التشغيل والبناء والاختبار والحزم التي يعتمد عليها المشروع.
اختر مدير حزم واحدًا
سواء استخدمت npm أو pnpm أو yarn، الأهم هو الثبات داخل المشروع نفسه. لا تخلط مديري الحزم في مستودع واحد؛ ملف القفل هو اتفاق الفريق على نسخ الحزم التي تم اختبارها.
| الأمر | الاستخدام | متى تنفّذه؟ |
|---|---|---|
| npm install | تثبيت اعتماديات المشروع | بعد استنساخ المشروع أو تحديث package.json |
| npm run dev | تشغيل خادم التطوير | أثناء بناء الواجهة وتجربتها |
| npm run build | إنشاء نسخة الإنتاج | قبل التسليم أو النشر |
أنشئ سجل Git نظيفًا
Git ليس مرحلة أخيرة؛ هو سجل قراراتك أثناء التطوير. ابدأ المستودع مبكرًا، واصنع commits صغيرة لها هدف محدد. هذا يجعل الرجوع إلى نسخة مستقرة أسهل بكثير من محاولة إصلاح مجموعة تغييرات متداخلة.
git init
git add .
git commit -m "تهيئة بيئة العمل"الحد الأدنى لملف .gitignore
node_modules/
dist/
.env
.DS_Storeاجعل الطرفية نقطة تحكم
لا تحتاج إلى عشرات الأوامر؛ تحتاج إلى مجموعة قصيرة تحفظها وتعرف أثر كل منها. افتح المشروع من الطرفية، شغّل خادم التطوير، وافحص حالة Git قبل وبعد أي تعديل كبير.
cd my-project
code .
npm run dev
git statusقائمة تحقق قبل أول واجهة
- المحرر مضبوط على التنسيق عند الحفظ.
- إصدار Node.js معروف ومتوافق مع المشروع.
- تم تثبيت الاعتماديات باستخدام مدير حزم واحد.
- خادم التطوير يعمل محليًا دون أخطاء أساسية.
- ملف .gitignore يستبعد الملفات المحلية والأسرار.
- أول commit يصف تهيئة المشروع بوضوح.
التعليقاتComments (0)