Pos asli dalam bahasa Rusia
Menjaga kode Anda konsisten dan diformat dengan baik bukan tugas yang mudah bahkan ketika Anda bekerja sendirian. Tetapi ketika Anda bekerja dengan tim atau dengan proyek open source semua mulai semakin sulit. Setiap orang memiliki gaya kode sendiri, seseorang tidak menjalankan tes, dan tidak ada yang menulis dokumentasi. Artikel ini akan membantu Anda mengatur semua hal ini dan bahkan lebih banyak lagi - mengotomatiskan rutinitas ini untuk tidak melakukannya secara manual.
Setelah membaca, Anda akan mendapatkan proyek siap-npm Anda sendiri dengan fitur-fitur berikut:
- Pemformatan teks dan gaya kode
- Tes otomatis dengan jangkauan dan ambang kode
- Gaya komit terpadu
- Dokumentasi dihasilkan dari kode dan dilakukan
- Proses publikasi otomatis
Ayo pergi!
Prasyarat
Buat folder baru, inisialisasi repositori baru, proyeksikan dan lanjutkan ke langkah berikutnya.
git init npm init npm i -D typescript ./node_modules/.bin/tsc --init
Mari kita mulai dengan pemformatan kode - jenis indensi, ukuran dan sebagainya. Alat pertama adalah file .editorconfig . Tidak memerlukan apa pun kecuali Anda IDE dan membantu menjaga autoformatting Anda konsisten di semua tim Anda.
Buat .editorconfig di root proyek dengan konten berikutnya (jangan ragu untuk mengubahnya sesuai gaya yang Anda inginkan)
#root = true [*] indent_style = space end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true max_line_length = 100 indent_size = 4 [*.md] trim_trailing_whitespace = false
Ini benar-benar luar biasa, tetapi kadang-kadang tidak memiliki kekuatan yang cukup untuk memenuhi kebutuhan Anda. Untuk memastikan bahwa semuanya lebih cantik diformat dengan baik, muncul. Jika Anda lupa memformat kode, lebih cantik akan melakukannya untuk Anda.
npm i -D prettier
Tambahkan perintah ini ke bagian skrip file package.json Anda
"prettier": "prettier --config .prettierrc.json --write src/**/*.ts"
Dan tambahkan file .prettierrc.json dengan pengaturan Anda ke root proyek
{ "tabWidth": 4, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "arrowParens": "always" }
Sekarang Anda dapat menulis beberapa kode dan coba jalankan "npm run prettier". Prettier akan memeriksa folder src dan secara otomatis memformat kode Anda tanpa bantuan dari pihak Anda!
Gaya Kode
Gaya kode - seperti menghindari menggunakan == alih-alih === atau variabel bayangan juga perlu diperiksa. Untuk tujuan ini, kami akan mengambil tslint . Jika Anda lebih suka javascript - ambil eslint saja.
npm i -D tslint ./node_modules/.bin/tslint --init
Perintah terakhir akan membuat file tslint.json untuk Anda. Itu membuat pengaturan Anda dan sudah memperpanjang tslint: seperangkat aturan yang disarankan, tetapi Anda dapat memperluas atau menimpanya apa pun yang Anda inginkan. Jangan lupa untuk menambahkan perintah lint ke package.json Anda.
package.json
"lint": "tslint -c tslint.json 'src/**/*.ts' 'tests/**/*.spec.ts'"
Seperti yang Anda lihat pengaturan untuk bekerja dengan folder src dan tes, jadi semua kode Anda harus ditempatkan di sana.
Pengujian
Sekarang saatnya mengatur tes kami. Instal karma dan dependensi terkait lainnya
npm i -D karma karma-jasmine jasmine karma-typescript karma-chrome-launcher @types/jasmine ./node_modules/.bin/karma init
Dan tambahkan blok konfigurasi baru ke karma.conf.js yang baru dibuat
karma.conf.js karmaTypescriptConfig : { include: ["./src/**/*.ts", "./tests/**/*.spec.ts"], tsconfig: "./tsconfig.json", reports: { "html": "coverage", "lcovonly": { directory: './coverage', filename: '../lcov.dat' } }, coverageOptions: { threshold: { global: { statements: 60, branches: 60, functions: 60, lines: 60 }, file: { statements: 60, branches: 60, functions: 60, lines: 60, } } }, }
Ini akan mengatur file cakupan kode dan tingkat ambang batas. Keduanya penting. Yang pertama membantu Anda menangani liputan Anda dan yang kedua menjaga liputan Anda pada tingkat tertentu.
Perbarui package.json
"test": "karma start"
Dan cobalah untuk menjalankannya. Jangan lupa untuk menulis beberapa kode di dalam folder src dan tes di dalam folder tes. Ini adalah bagaimana laporan cakupan kode Anda akan terlihat seperti:
Btw, jika Anda berencana untuk menggunakan integrasi terus menerus (seperti Travis, Jenkins atau lebih), lebih baik untuk mengubah pelari Chrome menjadi HeadlessChrome dengan dalang . Untuk informasi lebih lanjut tentang HeadlessChrome dan CI - periksa repositori demo saya di GitHub.
Gaya berkomitmen
Biasanya, semua komit ditulis dalam beberapa format "acak". Jadi, untuk menjaga komit cukup baik, komitmen diciptakan. Alat ini meminta beberapa pertanyaan dan menghasilkan komit untuk Anda. Poin bagus lainnya adalah kita dapat membuat file log perubahan dari komit yang ditulis dengan bantuan komit.
Instal komit dan adaptor changelog konvensional
npm i -D commitizen npm i -D cz-conventional-changelog
Perbarui skrip
"commit":"git-cz"
Tambahkan bagian konfigurasi baru di dalam package.json untuk komit.
"config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } }
Coba buat komit atau periksa gambar ini untuk mendapatkan gambaran bagaimana tampilannya:
Dokumentasi
Jika proyek Anda lebih besar dari beberapa fungsi, sebaiknya memiliki beberapa dokumentasi. Dan bahkan lebih baik bila Anda tidak perlu menulis sesuatu secara manual. Untuk itu, ada typedoc . Dibutuhkan file .ts Anda, komentar jsdoc Anda dan membuat dokumentasi yang bagus dan berkilau. Jika Anda menggunakan JavaScript - Anda bisa mencoba esdoc .
Ini dia contoh, bagaimana typedoc menggambarkan fungsi saya adalahNumberStrict:
npm i -D typedoc
package.json
"doc": "typedoc --out docs/src"
Ide bagus lainnya adalah membuat file perubahan-log Anda dibuat secara otomatis juga. Seperti yang saya sebutkan sebelumnya, komitmen mendukung changelog konvensional. Jadi, kita dapat mengambil komit dan mengubahnya menjadi file perubahan-log.
Instal konvensional-changelog-cli
npm i -D conventional-changelog-cli
Dan perbarui package.json dengan perintah baru
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
Jangan khawatir, sudut berarti hanya pemformatan gaya dan tidak lebih. Sekarang, changelog Anda akan dibentuk seperti di bawah ini:
Membangun
Build ini cukup sederhana dan itu hanya masalah untuk menambahkan perintah build dan clean ke package.json
"clean":"rmdir dist /S /Q", "build": "tsc --p ./ --sourceMap false",
Jika Anda memerlukan bundling atau minifikasi - coba uglifyjs .
Otomasi
Ok, sebagian besar sudah dilakukan. Kami membuat banyak skrip berbeda untuk menjaga kode kami tetap bersih dan benar. Tetapi menjalankannya setiap kali secara manual adalah tugas yang cukup membosankan dan dapat menyebabkan kesalahan. Jadi, kita perlu mengotomatisasi mereka. Seperti yang Anda tahu, ketika Anda membuat komit beberapa peristiwa git muncul - pra-komit, pasca-komit, dan sebagainya. Kita dapat menggunakannya untuk menjalankan skrip kita sendiri sebelum kode akan dikomit atau didorong. Tetapi ada masalah - kait git tidak dapat dibagikan. Dan itu sebabnya husky muncul. Paket ini membungkus acara git dan menjalankan skrip Anda dari package.json. Jika skrip gagal, komit akan dibatalkan dan Anda akan mendapatkan pesan apa yang salah.
Instal husky
npm i -D husky
Dan jelaskan beberapa kait di dalam package.json
"precommit":"npm run prettier", "prepush": "call npm run lint && call npm run test"
Sekarang, ketika Anda mencoba membuat komit yang lebih cantik akan berjalan dan memperbaiki semua masalah pemformatan. Ketika Anda mencoba membuat gaya kode push dan tes akan dilakukan secara otomatis. Anda dapat memperpanjang perintah ini apa pun yang Anda butuhkan seperti mengirim notifikasi, pemeriksaan tambahan dll.
Terbitkan
Hebat, kita hampir selesai. Jadi, katakanlah kami siap menerbitkan paket ke npm. Seperti yang Anda ketahui, banyak pekerjaan yang harus dilakukan sebelumnya - tes, pembaruan dokumentasi, versi, dan pembaruan tag. Mudah melupakan sesuatu, ya? Jadi, ide yang bagus untuk mengotomatiskan proses ini juga. Untuk tujuan itu, kami akan menggunakan kait npm asli - preversion, versi, dan postversion. Tambahkan baris berikutnya ke bagian skrip package.json Anda
"preversion": "npm run test", "version": "call npm run clean && call npm run build && call npm run doc && call npm run changelog && git add . && git commit -m 'changelogupdate' --no-verify", "postversion": "git add . && git push && git push --tags"
Ketika Anda akan menjalankan perintah versi npm, skrip preversion akan menjalankan tes, skrip versi akan membuat kode Anda dan menghasilkan semua dokumen. Kemudian versi akan ditingkatkan dan kemudian semua akan dilakukan dan didorong keluar. Sekarang yang Anda butuhkan adalah menjalankan perintah npm publish dan itu saja. Hanya untuk perintah dan yang lainnya akan dilakukan tanpa upaya dari pihak Anda.
Akhirnya, kita perlu menentukan folder apa yang harus dimasukkan dalam proyek dan di mana titik masuk dapat ditemukan. Perbarui package.json terakhir kali
"main": "./dist/index.min.js", "types": "./dist/index.d.ts", "files": [ "dist/", "src/", "tests/" ]
Itu saja, proyek luar biasa Anda siap untuk pergi!
Tautan yang bermanfaat
Terima kasih sudah membaca. Jika Anda memiliki pertanyaan, silakan periksa repositori demo saya di sini atau tanyakan komentar.
Semoga harimu menyenangkan!