Geekly articles weekly

Aturan ketat untuk aplikasi Angular baru

Cara membuat dan mengonfigurasi proyek Sudut dari awal


Pengantar singkat


Sangat sering saya menghadapi situasi ketika proyek tidak dikonfigurasikan dengan cukup ketat pada awal pengembangan dan ini merupakan kesalahan besar, karena mengubah pengaturan linter atau memasukkan opsi tambahan untuk memeriksa naskah di masa depan dapat menjadi masalah nyata bagi seluruh tim. Karena itu, jangan membuat kesalahan umum ini dan konfigurasikan proyek Anda semaksimal mungkin sejak awal.


Mempersiapkan lingkungan pengembangan


Git


Hal pertama yang perlu diinstal pada lingkungan pengembangan apa pun adalah Git . Unduh dan instal Git di sistem operasi Anda.


Setelah itu, Anda perlu mengatur data pribadi. Informasi ini akan dimasukkan dalam setiap komit dan kemudian setiap anggota tim akan dapat menemukan penulis dari setiap baris kode pada proyek.


//    (  )   $ 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 dan NVM


Hal berikutnya yang perlu Anda konfigurasi untuk bekerja dengan Angular adalah NodeJs . Pendekatan terbaik sejauh ini adalah menginstal NodeJs menggunakan Node Version Manager . Ini akan memungkinkan untuk dengan mudah beralih ke versi apa pun dan bahkan melakukannya secara otomatis untuk setiap proyek.


  1. Pada MacO, Anda harus membuat file .zshrc di direktori home Anda sebelum menginstal.

 $ touch ~/.zshrc

  1. Jalankan salah satu dari perintah berikut untuk menginstal atau meningkatkan NVM. Versi di tim dapat diperbarui, jadi periksa versi terbaru di sini .

 $ 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. Instal NodeJs versi LTS terbaru.

 $ nvm install 'lts/*'

  1. Tetapkan sebagai default .

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

  1. Pada MacOs, tambahkan kode berikut ke file ~ / .zshrc untuk memanggil nvm digunakan secara otomatis ketika Anda pergi ke direktori yang berisi file .nvmrc dengan garis yang memberitahu nvm versi nodejs mana yang akan digunakan. Untuk sistem operasi lain baca manual.

 # 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

Instalasi CLI dan pembuatan proyek


  1. Instal CLI menggunakan manajer paket npm.

 $ npm install -g @angular/cli

  1. Buka folder proyek Anda dan buat proyek Sudut kosong

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

Kami membuat proyek kosong dengan direktori aplikasi khusus untuk aplikasi baru. Dengan kata lain, kami menyiapkan dasar untuk monorepositori .


  1. Buat dan komit aplikasi pertama dalam repositori mono .

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

Untuk membuat aplikasi tambahan, cukup ulangi langkah ini dengan nama aplikasi yang berbeda dan bukan situs web .


Pembuatan Perpustakaan


Saya biasanya merekomendasikan membuat perpustakaan di folder libs . Untuk melakukan ini, kita perlu mengubah satu baris dalam file angular.json :


 "newProjectRoot": "apps",

Pada baris berikut:


 "newProjectRoot": "libs",

Dan jalankan perintah:


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

Kami menambahkan nama grup ke perpustakaan grup yang lebih jelas berdasarkan domain atau prinsip lainnya. Juga, jika Anda ingin menerbitkan perpustakaan misalnya di npm, Anda harus terlebih dahulu membuat organisasi di sini dengan nama yang sesuai dengan nama grup . Ini seperti namespace untuk sekelompok perpustakaan terkait, misalnya:


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

Saya akan menjelaskan secara lebih rinci proses penerbitan perpustakaan di NPM dalam artikel mendatang. Sementara itu, ikuti saja aturan ini.


Dan jangan lupa untuk mengembalikan angular.json ke status sebelumnya: "newProjectRoot": "apps"


Konfigurasi tambahan


Versi NodeJs


Tambahkan file .nvmrc dengan teks lts/* di dalamnya. Anda juga dapat menentukan versi node tertentu, misalnya 12.13.1 . Versi ini akan diinstal secara otomatis jika Anda mengikuti instruksi saya sebelumnya. Anda juga dapat mengaktifkan versi ini secara manual menggunakan perintah $ nvm use .


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

Pemeriksaan ketat untuk null dan tidak terdefinisi


Tambahkan aturan berikut ke tsconfig.json untuk mengaktifkan pemeriksaan ketat untuk null dan tidak terdefinisi. Ini akan melindungi Anda dari kesalahan umum membaca properti dari variabel yang tidak terdefinisi atau nol.


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

Atau lebih baik , jika Anda ingin pemeriksaan lebih ketat, sertakan semua aturan di kompiler:


 /* 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. */

Agar TypeScript menjadi lebih ketat tidak hanya dalam file TS, tetapi dalam template Angular Anda perlu mengaktifkan opsi 'fullTemplateTypeCheck' di tsconfig.json:


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

Setelah menambahkan aturan ini, cobalah membangun proyek dan memperbaiki semua kesalahan yang ditemukan.


 $ npm run build

Aturan TsLint yang ketat


Aktifkan semua aturan tslint dengan pengaturan paling ketat, cukup ganti di tslint.json untuk ini


 "extends": "tslint:recommended",

Aktif


 "extends": "tslint:all",

Dan tambahkan aturan berikut untuk menonaktifkan beberapa aturan tambahan


 "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" ]

Selama proses pengembangan, nonaktifkan atau konfigurasikan aturan yang tidak Anda sukai. Dan jangan lupa untuk menyertakan dukungan tslint dalam IDE Anda .


Setelah menambahkan aturan ini, cobalah untuk menjalankan proyek dengan linter dan memperbaiki semua kesalahan.


 $ npm run lint

Lint SCSS dengan stylelint


Tambahkan stylelint untuk memeriksa kualitas kode sssss Anda


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

Dan konfigurasikan aturan dalam .stylelintrc


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

Tambahkan baris berikut untuk menjalankan stylelint di package.json


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

Selama proses pengembangan, nonaktifkan atau konfigurasikan aturan-aturan yang tidak sesuai dengan Anda. Dan jangan lupa untuk menyertakan dukungan stylelint dalam IDE Anda


 $ npm run lint-all-scss-fix

Lebih cantik


Lebih cantik digunakan untuk memformat kode. Untuk beberapa baris kode, Prettier tidak memberi Anda hasil yang Anda sukai, tetapi terlepas dari manfaat menggunakannya, ada banyak lagi.


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

Tambahkan file konfigurasi .prettierrc ke proyek


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

Dan file .prettierignore dengan file dan folder yang diabaikan


 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

Tambahkan skrip untuk menjalankan lebih cantik di package.json


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

Setelah itu, jalankan lebih cantik untuk memperbaiki semua file dalam proyek


 $ npm run prettier

KAIT


Untuk menjalankan linter, formatter atau skrip lain kita dapat mengkonfigurasi git hooks. Kami akan menggunakan paket-paket berikut untuk ini:


  • husky - set kait
  • pretty-quick - meluncurkan lebih cantik hanya untuk file yang dimodifikasi

 $ npm i husky pretty-quick -D

Langkah selanjutnya adalah menulis skrip untuk kait kami. Saya lebih suka membuat folder alat untuk skrip shell. Kami akan mengonfigurasi 3 kait:


  1. pre-commit - Sebuah kait yang dieksekusi sebelum komit. Di kap ini, kami akan lebih cantik pada file yang dimodifikasi.
  2. commit-msg - Sebuah kait di mana Anda dapat mengubah teks komit, kami menggunakannya untuk menambahkan nama cabang ke teks komit.
  3. pre-push - Sebuah kait yang dijalankan sebelum git push. Kami menggunakannya untuk meluncurkan linter.

Konfigurasi Husky di package.json :


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

Script ./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); }

Script ./tools/pre-push.sh


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

Anda juga dapat menambahkan uji coba dan e2e ke skrip pra-push.


SEGERA DATANG ...


Artikel ini adalah yang pertama dalam seri tentang pengaturan proyek Angular. Dalam artikel berikut ini saya berencana untuk membahas topik-topik berikut:


  • Mengkonfigurasi integrasi berkelanjutan dengan Travis dan Docker
  • Render sisi server
  • Terjemahan
  • Tes
  • Manajemen keadaan dan struktur modul
  • Repositori Mono dengan Nrwl.Nx

Berlangganan, ajukan pertanyaan. Anda juga dapat melihat contoh yang dijelaskan dalam artikel ini di repositori ini .



Bergabung juga dengan komunitas kami di Medium , Telegram atau Twitter .

Source: https://habr.com/ru/post/id481444/

More articles:


All Articles