2. إعداد بيئة التطوير

نحن نستخدم بيئة التطوير الموضحة بالتفصيل في الوثيقة [2]:

• Visual Studio Code (VSCode) لكتابة كود JavaScript؛
• [node.js] لتشغيله؛
• [npm] لتنزيل وتثبيت مكتبات JavaScript التي سنحتاجها؛

نقوم بإنشاء بيئة عمل في [VSCode]:

• في [1-5]، نفتح مجلد [vuejs] فارغًا في [VSCode]؛

• في [8-10]، نقوم بتثبيت التبعية [@vue/cli]، والتي ستسمح لنا بتهيئة مشروع [Vue.js]. تتضمن هذه التبعية عددًا كبيرًا من الحزم (عدة مئات)؛

في نفس المحطة الطرفية، نكتب بعد ذلك الأمر [vue create .]، الذي ينشئ مشروع [Vue.js] في الدليل الحالي (.):

• في [13]، تبدأ سلسلة من الأسئلة لتكوين المشروع؛

• بمجرد الإجابة على جميع الأسئلة، يتم تنزيل حزم جديدة وإنشاء مشروع في الدليل الحالي [14].

دعونا نلقي نظرة على ما تم إنشاؤه. ملف [package.json] هو كما يلي:

{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-20/main.js",
    "build": "vue-cli-service build vuejs-20/main.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.2",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

تعليقات

• الأسطر 14–22: من بين التبعيات المطلوبة للتطوير، نرى إشارات إلى الأداتين [eslint، babel] اللتين استُخدمتا بالفعل في الفصلين السابقين. يضاف إلى ذلك المكونات الإضافية لهاتين الأداتين المخصصة للاستخدام داخل [vue.js]؛
• السطر 34: ستتولى حزمة [babel-eslint] تحويل كود JavaScript من ES6 إلى ES5؛
• الأسطر 5–9: تم إنشاء ثلاث مهام [npm]:
  • [build]: تُستخدم لإنشاء النسخة المُجمَّعة من المشروع الجاهزة للإنتاج؛
  • [serve]: تعمل على تشغيل المشروع على خادم ويب. تُستخدم هذه الأداة لإجراء الاختبارات أثناء التطوير. كما هو الحال مع [webpack-dev-server]، يؤدي تعديل كود المصدر للمشروع تلقائيًا إلى إعادة ترجمة المشروع وإعادة تحميله بواسطة خادم الويب؛
  • [lint]: تُستخدم لتحليل كود JavaScript وإنشاء التقارير. لن نستخدم هذه الأداة هنا؛

تم إنشاء ملف [README.md] بالمحتوى التالي:

# vuejs
 
## Project setup
```
npm install
```
 
### Compiles and hot-reloads for development
```
npm run serve
```
 
### Compiles and minifies for production
```
npm run build
```
 
### Run your tests
```
npm run test
```
 
### Lints and fixes files
```
npm run lint
```
 
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

يلخص هذا الملف الأوامر التي يجب استخدامها لإدارة المشروع.

نعلم أنه في [VSCode]، تتوفر مهام [npm] للتنفيذ:

• في [1-3]، نقوم بتشغيل الأمر [serve]، الذي سيقوم بترجمة المشروع ثم تشغيله [4-5]؛

عند عنوان URL [http://localhost:8080]، نحصل على الصفحة التالية:

سنشرح لاحقًا ما الذي أدى إلى ظهور هذه الصفحة.

لنواصل إعداد بيئة العمل لدينا:

• في [2] أعلاه، نرى مؤشرات [git]. [git] هو نظام للتحكم في إصدارات شفرة المصدر يتيح لك إدارة الإصدارات المتتالية من الشفرة ومشاركتها بين المطورين. سنقوم بتعطيل هذه الأداة للمشروع؛
• في [3-5]، ننتقل إلى خصائص المشروع؛

• في [9-10]، نقوم بتعطيل استخدام [git] في المشروع؛

سنكتب اختبارات متنوعة لتوضيح كيفية عمل [vue.js]. ومع ذلك، لا نريد إنشاء مشروع جديد في كل مرة، لأن هذا سيتطلب إنشاء مجلد [node_modules] في كل مرة، ويبلغ حجم هذا المجلد عدة مئات من الميغابايت. دعونا نراجع مهام [npm] في ملف [package.json]:

  "scripts": {
    "serve": "vue-cli-service serve vuejs-00/main.js",
    "build": "vue-cli-service build vuejs-00/main.js",
    "lint": "vue-cli-service lint"
  },

• السطر 2: يستخدم الأمر [serve] بشكل افتراضي:
  • الملف [public/index.html]؛
  • المرتبط بالملف [src/main.js]؛

في السطر 2، يمكنك تحديد نقطة دخول المشروع لأمر [serve]، على سبيل المثال:

"serve": "vue-cli-service serve vuejs-00/main.js",

لنجرب ذلك:

• في [1]، تمت إعادة تسمية المجلد [src] إلى [vuejs-00]؛
• في [2-3]، تم تعديل الأمر [serve]؛
• في [4-6]، نقوم بتشغيل المشروع؛

نحصل على نفس النتيجة السابقة:

بالنسبة لاختباراتنا، سنقوم بما يلي:

• كتابة الكود في مجلد [vuejs-xx] داخل المشروع؛
• اختبار هذا المشروع باستخدام الأمر [vue-cli-service serve vuejs-xx/main.js] في ملف [package.json]؛

عندما يكون خادم التطوير قيد التشغيل، يؤدي أي تغيير يُجرى على أحد ملفات المشروع إلى إعادة التجميع. ولهذا السبب، نقوم بتعطيل وضع [الحفظ التلقائي] في [VSCode]. ففي الواقع، لا نريد أن تتم إعادة التجميع في كل مرة نكتب فيها أحرفًا في أحد ملفات المشروع. بل نريد إعادة التجميع في أوقات محددة فقط:

• في [2]، يجب ألا يتم تحديد خيار [الحفظ التلقائي]؛