Jadi Anda melakukan sesuatu yang baru dan keren, pemikiran itu muncul - masukkan ke dalam open source dan publikasikan di npm.
Hanya mendorong kode ke repositori publik tidak cukup. Ini akan menghancurkan proyek karena kurangnya pengembangan dan kegagalan. Di sisi lain, saya ingat sejumlah proses yang membosankan: membuat versi dan menerbitkan paket, menyiapkan integrasi berkesinambungan, hosting dan menyebarkan halaman dari proyek demo, mengatur kemungkinan berkontribusi untuk komunitas.
Jika Anda ingin menerbitkan paket kecil, maka kumpulan pekerjaan ini bisa sangat menakutkan. Ide cemerlang untuk membagikan sesuatu yang bermanfaat akan masuk ke kotak panjang kasus-kasus rumit.
Bahkan, semua ini bisa memakan waktu kurang dari satu jam. Tanpa pengetahuan DevOps dan sepenuhnya gratis.
Kami mengatur versi
Jika perpustakaan Anda siap untuk rilis pertama, saya sarankan menggunakan versi standar . Paket ini akan sepenuhnya bertanggung jawab untuk pembuatan versi: perbarui versi di package.json, buat file CHANGELOG.md dan tambahkan tag versi di git.
File dengan riwayat perubahan dikumpulkan secara otomatis oleh Komitmen Konvensional . Ini membawa nilai tambah lainnya: format pesan terpadu untuk komit muncul di perpustakaan. Ini bisa dimengerti baik untuk Anda maupun untuk pengembang yang memutuskan untuk berkontribusi pada proyek Anda.
Tidak ada kesulitan dalam proses koneksi, itu dijelaskan secara rinci pada halaman github . Tambahkan satu set perintah rilis ke package.json kami untuk kenyamanan:
"release": "standard-version", "release:patch": "npm run release -- --release-as patch", "release:minor": "npm run release -- --release-as minor", "release:major": "npm run release -- --release-as major",
Atur CI
Untuk integrasi berkelanjutan, saya sarankan menggunakan Travis CI . Itu juga dibuat sangat user friendly:
- Masuk melalui github
- Pilih proyek Anda dari daftar dan aktifkan Travis untuk itu
- Di folder root proyek, tambahkan konfigurasi sederhana yang akan dijalankan di CI:
language: node_js node_js: - "10" script: - npm run lint - npm run build - npm run test:ci
CI minimum siap. Sekarang, setelah setiap pembaruan repositori Anda, Travis akan menjalankan linter, membangun proyek, dan menjalankan tes.
Anda dapat menonton status cabang, Tarik Permintaan, menganalisis log setiap build yang sedang berjalan.
Pengembang lain akan lebih percaya diri untuk beralih ke paket Anda jika mereka melihat bahwa semua kode Anda telah diuji.
Saya menyarankan untuk mengalihkan kontrol atas cakupan kode dengan tes ke layanan Coveralls khusus. Biarkan Travis memberikan kepadanya hasil tes setelah setiap CI membangun.
Masuk ke baju dan letakkan tanda centang di depan repositori yang diinginkan. Seperti di Travis.
Kami mengonfigurasi di sisi proyek:
- Instal paket baju dalam ketergantungan proyek dev
- Tambahkan skrip untuk menjalankan baju, tambahkan ke perintah tes: ci
"test:ci": "npm run test && npm run coveralls", "coveralls": "cat coverage/lcov.info | coveralls",
Perhatikan bahwa perintah uji coba npm harus menyertakan --code-coverage . Coveralls membutuhkan file lcov.info Anda, yang dihasilkan oleh pelari pengujian Anda dengan flag ini. Jika tidak ada flag seperti itu, maka Anda dapat menggunakan paket istanbul .
Konfigurasikan di sisi Travis:
Jika repositori sudah terbuka dan akan selalu tetap publik, maka Anda dapat menambahkan beberapa baris ke .travis.yml:
notifications: webhooks: https://coveralls.io/webhook
Dalam kasus lain, lebih baik menghubungkannya melalui token:
Buka pengaturan repositori di Baju dan buat Repo Token:
Dengan token ini, buka pengaturan repositori di Travis dan tambahkan ke bagian Variabel Lingkungan sebagai COVERALLS_REPO_TOKEN.
Token menghubungkan kedua layanan. Sekarang mari kita kembali ke github dan melindungi cabang master proyek dengan alat baru kami.
- Buka Pengaturan -> Cabang
- Buat aturan baru untuk semua cabang:
* - Kami menempatkan cek yang diperlukan tanpa itu tidak akan mungkin untuk membekukan Permintaan Tarik di cabang utama
Pada tahap ini, saya juga menyarankan untuk kembali ke pengaturan repositori di Coveralls. Di bagian PULL REQUESTS ALERTS, Anda dapat menentukan pada apa yang menurunkan tingkat cakupan oleh tes Tarik Permintaan tes tidak akan lulus. Lakukan ini agar paket Anda selalu teruji dengan baik.
Sikat alur kerja Anda
Semua kode proyek harus disimpan dalam gaya yang sama. Kalau tidak, basis kode akan secara bertahap menurun dan akan lebih sulit bagi kita untuk mendukung proyek. Perlu juga diingat bahwa pengembang eksternal tidak terlalu tertarik dengan gaya kode Anda. Untuk membuat semua orang senang, kami akan mengurus otomatisasi masalah ini.
Untuk berjaga-jaga, periksa apakah Anda memiliki file .editorconfig dan pengaturan pemformatan kode tertulis di dalamnya.
Selanjutnya, pasang beberapa dependensi dev lainnya: husky dan lint-staged . Paket pertama memungkinkan Anda untuk mengikat perintah ke git hooks, dan yang kedua bersamaan dengan itu - jalankan linters hanya untuk file yang ditambahkan ke komit.
Sebagai contoh, ini mungkin terlihat seperti pengaturan untuk paket pada TypeScript dan Less:
{ ... "scripts": { ... "typecheck": "tsc --noEmit --skipLibCheck", }, "husky": { "hooks": { "pre-commit": "lint-staged && npm run typecheck" } }, "lint-staged": { "*.{js,ts,html,md,less,json}": [ "prettier --write", "git add" ], "*.ts": "tslint", "*.less": "stylelint" } }
Jika Anda belum mengkonfigurasi linter, maka saya dapat menyarankan:
- Lebih cantik untuk memformat kode
- eslint atau tslint sebagai linters dari file JS / TS
- stylelint untuk file gaya
Ada konfigurasi yang sudah jadi untuk semuanya, di mana semua pengaturan dasar disediakan. Sebagai contoh, Anda dapat mengambil solusi turnkey kami @ tinkoff / linters . Sambungan turun untuk membuat tiga file:
.stylelintrc
{ "extends": ["@tinkoff/linters/stylelint/bases/prettier.stylelint.json"] }
prettier.config.js
module.exports = { ...require('@tinkoff/linters/prettier/prettier.config'), };
tslint.json
{ "extends": ["@tinkoff/linters/tslint/bases/prettier.tslint.json"] }
Terbitkan ke NPM
Sekarang saatnya untuk mempublikasikan paket kami. Tambahkan satu lagi perintah sederhana ke skrip paket-json:
"publish": "npm run build && npm publish ./dist"
Dalam hal ini, repositori kami berisi kode sumber dan file untuk pengembangan, dan di npm ada paket yang dikompilasi di mana tidak ada yang berlebihan.
Kami mengumpulkan majelis saat ini, menerbitkan. Pekerjaan sudah selesai.
Mari kita juga menggunakan npm hooks dan menambahkan skrip postbuild yang akan menyalin README.md ke folder assembly. Jadi kami tidak akan pernah lupa untuk memperbarui deskripsi paket pada NPM.
"build": "..", "postbuild": "node scripts/postbuild.js",
skrip / postbuild.js
const fs = require('fs'); const DIST_LIB_PATH = 'dist/'; const README_PATH = 'README.md'; const PATH_TO = DIST_LIB_PATH + README_PATH; copyReadmeIntoDistFolder(); function copyReadmeIntoDistFolder() { if (!fs.existsSync(README_PATH)) { throw new Error('README.md does not exist'); } else { fs.copyFileSync(README_PATH, PATH_TO); } }
Kustomisasi demo
Demo tidak diperlukan untuk semua paket. Jika paket Anda memiliki beberapa metode publik yang mudah digunakan dan didokumentasikan dengan baik, maka Anda dapat melewati bagian ini dengan aman.
Dalam kasus lain, akan lebih baik untuk menunjukkan sesuatu, tetapi perlu diingat - kami menerbitkan perpustakaan, yang berarti bahwa demo yang biasa di Halaman Github tidak akan begitu menarik bagi pengembang. Akan lebih mudah bagi mereka untuk membuka proyek demo Anda segera di beberapa IDE online: lihat bagaimana paket terhubung, tusuk saja atau segera periksa beberapa case yang membuat mereka bersemangat.
Anda dapat membuat demo sebagai repositori terpisah atau meletakkannya di folder baru di sebelah proyek itu sendiri. Kami bahkan tidak perlu menyiapkan penyebaran! IDE online modern memungkinkan Anda untuk menyatukan proyek atau cabang / folder terpisah secara langsung dari github.
Anda dapat mencoba salah satu dari layanan ini, tidak lebih dari lima menit:
- stackblitz.com sekarang memungkinkan Anda untuk menjalankan proyek pada Angular, React, Ionic, TypeScript, RxJs dan Svelte. Anda dapat membuka proyek dari github hanya dengan mengklik tautan .
- codesandbox.io juga meluncurkan Angular, React, dan Vue. Dia juga tahu cara membuat JavaScript biasa. Itu terbuka dengan cara yang sama oleh tautan ke repositori, tetapi sedikit lebih detail dapat dibaca di sini
- repl.it pada layanan ini Anda dapat mengimpor repositori dengan NodeJS, Express, NextJS, GatsbyJS. Jenis huruf dan vanilla JS juga tersedia.
Pilih apa saja, tambahkan tautan ke demo di README dan jangan pernah khawatir lagi. Semua perubahan akan diambil secara otomatis.
Anda juga dapat menambahkan perintah ke CI, yang akan membangun aplikasi demo dengan versi terbaru paket di NPM. Ini bisa menjadi pemeriksaan tambahan bahwa versi paket saat ini berhasil diluncurkan pada proyek pihak ketiga.
Marafet terakhir
Tambahkan lencana ke README.md. Agak, tetapi itu akan membantu Anda dengan cepat mengarahkan diri Anda ke pengunjung paket Anda di github.
Sebagai contoh, berikut adalah empat lencana yang mengatakan bahwa semuanya baik-baik saja pada proyek, dan memungkinkan akses sekali klik ke NPM, CI atau cakupan uji.
Untuk menghasilkan lencana, saya sarankan menggunakan layanan Shields.io . Mereka sederhana dan berkualitas tinggi.
Total
Seperangkat alat semacam itu akan cukup untuk memulai proyek dengan normal. Pengunjung paket di npm atau repositori di github lebih mungkin untuk mengambil paket Anda karena desain yang tepat dan kemampuan untuk mencobanya di demo.
Yayasan semacam itu akan memungkinkan Anda untuk menerima Permintaan Tarik dengan aman dari luar, dan pengembang lain akan lebih bersedia membayarnya. Sekarang Anda dapat fokus pada implementasi paket itu sendiri, tanpa khawatir tentang proses di sekitar pengembangannya.