كيفية إنشاء وتكوين مشروع الزاوي من الصفر

مقدمة قصيرة

غالبًا ما أواجه موقفًا عندما لا يتم تكوين المشروع بدقة كافية في بداية التطوير ، وهذا خطأ كبير ، حيث إن تغيير إعدادات linter أو إدراج خيارات إضافية للتحقق من الكتابة في المستقبل يمكن أن يكون ألمًا حقيقيًا للفريق بأكمله. لذلك ، لا ترتكب هذا الخطأ الشائع وقم بتكوين مشروعك بأكبر قدر ممكن من الدقة منذ البداية.

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

بوابة

أول ما يجب تثبيته على أي بيئة تطوير هو Git . قم بتنزيل Git وتثبيته على نظام التشغيل الخاص بك.

بعد ذلك ، تحتاج إلى إعداد البيانات الشخصية. سيتم تضمين هذه المعلومات في كل التزام وبعد ذلك سيتمكن أي عضو في الفريق من العثور على مؤلف أي سطر من التعليمات البرمجية في المشروع.

//    (  )   $ git config --global user.name "John Doe" $ git config --global user.email johndoe@example.com //            $ git config user.name "John Doe" $ git config user.email johndoe@example.com 

NodeJs و NVM

الشيء التالي الذي تحتاج إلى تكوينه للعمل مع Angular هو NodeJs . أفضل طريقة حتى الآن هي تثبيت NodeJs باستخدام Node Version Manager . سيمكن ذلك من التبديل بسهولة إلى أي إصدار وحتى القيام بذلك تلقائيًا لكل مشروع.

1. على MacOs ، يجب عليك إنشاء ملف. zshrc في الدليل الرئيسي الخاص بك قبل التثبيت.

 $ touch ~/.zshrc 

1. قم بتشغيل أحد الأوامر التالية لتثبيت أو ترقية NVM. قد يتم تحديث الإصدار الموجود على الفريق ، لذا تحقق من أحدث إصدار هنا .

 $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash $ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash 

1. قم بتثبيت أحدث إصدار من LTS من NodeJs .

 $ nvm install 'lts/*' 

1. قم بتعيينها كإعداد افتراضي .

 $ nvm use 'lts/*' $ nvm alias default 'lts/*' 

1. في MacOs ، أضف التعليمات البرمجية التالية إلى ملف ~ / .zshrc للاتصال باستخدام nvm تلقائيًا عندما تذهب إلى الدليل الذي يحتوي على ملف .nvmrc مع سطر يخبر nvm عن إصدار nodejs الذي يجب استخدامه. لأنظمة التشغيل الأخرى قراءة دليل.

 # place this after nvm initialization! autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path" ]; then local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")") if [ "$nvmrc_node_version" = "N/A" ]; then nvm install elif [ "$nvmrc_node_version" != "$node_version" ]; then nvm use fi elif [ "$node_version" != "$(nvm version default)" ]; then echo "Reverting to nvm default version" nvm use default fi } add-zsh-hook chpwd load-nvmrc load-nvmrc 

تركيب CLI وإنشاء المشروع

1. تثبيت CLI باستخدام مدير حزمة npm.

 $ npm install -g @angular/cli 

1. انتقل إلى مجلد المشروع الخاص بك وقم بإنشاء مشروع Angular فارغ

 $ cd ~/Projects $ ng new --create-application false --new-project-root apps project-name 

أنشأنا مشروعًا فارغًا مع دليل تطبيقات مخصص للتطبيقات الجديدة. وبعبارة أخرى ، أعددنا الأساس للمخزن .

1. أنشئ وارتكب أول تطبيق في المستودع الأحادي .

 $ cd project-name $ ng generate application --routing true --style scss website $ git add . $ git commit -m 'website application created' 

لإنشاء تطبيقات إضافية ، ما عليك سوى تكرار هذه الخطوة باسم تطبيق مختلف بدلاً من موقع الويب .

إنشاء مكتبة

أوصي عادةً بإنشاء مكتبات في مجلد libs . للقيام بذلك ، نحتاج إلى تغيير سطر واحد في ملف angular.json :

 "newProjectRoot": "apps", 

على السطر التالي:

 "newProjectRoot": "libs", 

وتنفيذ الأمر:

 $ ng generate library @group-name/lib-name 

أضفنا اسم المجموعة إلى مجموعات المكتبات بشكل أكثر وضوحًا حسب المجال أو بعض المبادئ الأخرى. أيضًا ، إذا كنت ترغب في نشر مكتبة على سبيل المثال في npm ، فيجب عليك أولاً إنشاء مؤسسة هنا بالاسم المقابل لاسم المجموعة . هذا مثل مساحة الاسم لمجموعة من المكتبات ذات الصلة ، على سبيل المثال:

 "@angular/common" "@angular/compiler" "@angular/core" "@angular/forms" 

سوف أصف بمزيد من التفصيل عملية نشر المكتبات في npm في المقالات المستقبلية. في غضون ذلك ، فقط اتبع هذه القاعدة.

ولا تنسَ أن تعيد angular.json إلى حالتها السابقة: "newProjectRoot": "apps"

تكوين إضافي

إصدار NodeJs

إضافة ملف .nvmrc مع نص lts/* فيه. يمكنك أيضًا تحديد إصدار محدد من العقدة ، على سبيل المثال 12.13.1 . سيتم تثبيت هذا الإصدار تلقائيًا إذا اتبعت الإرشادات السابقة. يمكنك أيضًا تنشيط هذا الإصدار يدويًا باستخدام الأمر $ nvm use .

 $ touch .nvmrc $ echo "lts/*" > .nvmrc 

الشيكات الصارمة لاغية وغير محددة

أضف القاعدة التالية إلى tsconfig.json لتمكين التحقق الدقيق من وجود قيمة خالية وغير محددة. سيوفر لك هذا الحماية من الخطأ الشائع المتمثل في قراءة خاصية لمتغير غير معرف أو فارغ.

 "compilerOptions": { "strictNullChecks": true, } 

أو الأفضل ، إذا كنت تريد إجراء اختبارات أكثر صرامة ، فقم بتضمين جميع القواعد في برنامج التحويل البرمجي:

 /* Strict Type-Checking Options */ "strict": true, /* Enable all strict type-checking options. */ // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ "noUnusedLocals": true, /* Report errors on unused locals. */ "noUnusedParameters": true, /* Report errors on unused parameters. */ "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 

لكي يكون TypeScript أكثر صرامة ، ليس فقط في ملفات TS ، ولكن في القوالب الزاوية ، يجب تمكين الخيار "fullTemplateTypeCheck" في tsconfig.json:

 { "compilerOptions": { ... }, "angularCompilerOptions": { "fullTemplateTypeCheck": true ... } } 

بعد إضافة هذه القواعد ، حاول إنشاء مشروع وإصلاح جميع الأخطاء التي تم العثور عليها.

 $ npm run build 

قواعد صارمة TsLint

تمكين جميع قواعد tslint مع أكثر الإعدادات صرامة ، فقط استبدال في tslint.json لهذا الغرض

 "extends": "tslint:recommended", 

في

 "extends": "tslint:all", 

وأضف القواعد التالية لتعطيل بعض القواعد الإضافية

 "no-implicit-dependencies": false, "no-submodule-imports": false, "completed-docs": false, "prefer-function-over-method": false, "file-name-casing": [ true, "kebab-case" ], "no-object-literal-type-assertion": [ true, { "allow-arguments": true } ], "no-floating-promises": false, "promise-function-async": false, "no-unsafe-any": false, "no-any": false, "comment-format": [ true, "check-space" ], "newline-per-chained-call": false, "typedef": [ true, "call-signature", "arrow-call-signature", "parameter", "arrow-parameter", "property-declaration", "object-destructuring", "array-destructuring" ] 

أثناء عملية التطوير ، قم بتعطيل أو تكوين تلك القواعد التي لا تحبها. ولا تنس تضمين دعم tslint في IDE الخاص بك .

بعد إضافة هذه القواعد ، حاول تشغيل المشروع باستخدام linter وإصلاح جميع الأخطاء.

 $ npm run lint 

لينت SCSS مع stylelint

أضف stylelint للتحقق من جودة كود sssss الخاص بك

 $ npm install stylelint stylelint-config-standard --save-dev $ touch .stylelintrc 

وتكوين القواعد في. stylelintrc

 { "extends": "stylelint-config-standard", "rules": {} } 

أضف الأسطر التالية لتشغيل stylelint في package.json

 "scripts": { "lint-all-scss": "stylelint \"**/*.scss\"", "lint-all-scss-fix": "npm run lint-all-scss -- --fix" } 

أثناء عملية التطوير ، قم بتعطيل أو تكوين تلك القواعد التي لا تناسبك. ولا تنس تضمين دعم stylelint في IDE الخاص بك

 $ npm run lint-all-scss-fix 

أجمل

يستخدم أجمل لتنسيق التعليمات البرمجية. بالنسبة لبعض أسطر التعليمات البرمجية ، لا يمنحك Prettier النتيجة التي تريدها ، ولكن على الرغم من فوائد استخدامها ، فهناك الكثير.

 $ npm install --save-dev --save-exact prettier 

إضافة ملف التكوين .prettierrc إلى المشروع

 { "printWidth": 120, "tabWidth": 2, "arrowParens": "always", "bracketSpacing": true, "endOfLine": "lf", "semi": true, "singleQuote": true, "quoteProps": "consistent", "trailingComma": "all" } 

وملف .prettierignore مع تجاهل الملفات والمجلدات

 karma.conf.js protractor.conf.js ng-package.json package.json tsconfig.lib.json tsconfig.app.json tsconfig.spec.json tslint.json tsconfig.json browserslist .gitkeep favicon.ico 

إضافة البرامج النصية لتشغيل أجمل في package.json

 "scripts": { "prettier": "prettier --write \"{apps,libs}/**/*\"", "prettier:check": "prettier --check \"{apps,libs}/**/*\"" }, 

بعد ذلك ، قم بتشغيل أجمل لإصلاح جميع الملفات في المشروع

 $ npm run prettier 

HOOKS

من أجل تشغيل linter ، المنسق أو البرامج النصية الأخرى ، يمكننا تكوين خطافات git. سوف نستخدم الحزم التالية لهذا:

• أجش - مجموعات السنانير
• سريع جدًا - يتم تشغيله بشكل أجمل فقط للملفات المعدلة

 $ npm i husky pretty-quick -D 

والخطوة التالية هي كتابة البرامج النصية لدينا السنانير. أفضل إنشاء مجلد أدوات للبرامج النصية shell. سنقوم بتكوين 3 السنانير:

1. ما قبل الالتزام - خطاف يتم تنفيذه قبل الالتزام. في هذا الغطاء ، سنكون أجمل على الملفات المعدلة.
2. الالتزام - msg - خطاف يمكنك من خلاله تغيير نص الالتزام ، نستخدمه لإضافة اسم فرع إلى نص الالتزام.
3. الدفع المسبق - خطاف يتم تنفيذه قبل دفع الضغط. نستخدمها لإطلاق linter.

التكوين أجش في الحزمة. json :

 "husky": { "hooks": { "pre-commit": "pretty-quick --staged", "commit-msg": "node ./tools/commit-msg.js", "pre-push": "./tools/pre-push.sh" } }, 

البرنامج النصي ./tools/commit-msg.js

 const fs = require('fs'); const { execSync } = require('child_process'); const message = fs.readFileSync(process.env.HUSKY_GIT_PARAMS, 'utf8').trim(); const currentBranch = getCurrentBranch(); fs.writeFileSync(process.env.HUSKY_GIT_PARAMS, `${currentBranch}: ${message}`); process.exit(0); function getCurrentBranch() { const branches = execSync('git branch', { encoding: 'utf8' }); return branches .split('\n') .find((b) => b.charAt(0) === '*') .trim() .substring(2); } 

البرنامج النصي ./tools/pre-push.sh

 #!/usr/bin/env bash npm run lint-all-scss || exit npm run lint || exit 

يمكنك أيضًا إضافة اختبار التشغيل و e2e إلى برنامج نصي مسبق الدفع.

قريبًا ...

هذه المقالة هي الأولى في سلسلة حول إعداد مشروع Angular. في المقالات التالية أخطط لتغطية الموضوعات التالية:

• تكوين التكامل المستمر مع Travis و Docker
• تقديم جانب الخادم
• ترجمة
• اختبارات
• إدارة الحالة وهيكل الوحدات
• مستودع أحادي مع Nrwl.Nx

اشترك ، وطرح الأسئلة. يمكنك أيضًا مشاهدة المثال الموضح في هذه المقالة في هذا المستودع .

انضم أيضًا إلى مجتمعنا على Medium أو Telegram أو Twitter .