Panduan Pustaka Javascript Anda Sendiri dengan TypeScript

Panduan Pustaka Javascript Anda Sendiri dengan TypeScript

Sebagai pengembang frontend, Anda akan memerlukan Pustaka Kode untuk mendukung pengembangan proyek Anda. Anda dapat dengan mudah mengoptimalkan kode Anda dengan membuat kode tersebut dapat digunakan kembali sehingga tidak akan membuat kode Anda menjadi gemuk dan berlebihan. Untuk membuat kode dapat digunakan kembali di seluruh proyek Anda, Anda dapat mengubah kode Anda menjadi kode yang modular dan terpisah.

Cara terbaik untuk membuat kode Anda modular adalah dengan membuat pustaka Anda sendiri. Jika Anda familier dengan pustaka seperti jQuery, pustaka yang menyediakan utilitas untuk mengembangkan proyek Javascript Anda dengan lebih mudah.

Mengapa TypeScript?

Ada banyak manfaat yang bisa Anda dapatkan dengan TypeScript sebagai pengembangan pustaka. Yang paling luar biasa adalah antarmukanya. Pertimbangkan contoh ini, sebagai pengguna pustaka, bagaimana Anda mengetahui parameter dan tipe pengembalian saat menggunakan fungsi? Ada yang seperti jsdoc dan dokumentasi pustaka. Namun, tidak satu pun dari ini menyediakan pengalaman yang ditawarkan TypeScript secara langsung.

Dengan TypeScript dan bantuan IDE dan editor seperti VScode, kita bisa mendapatkan detail fungsi dari pustaka yang Anda gunakan. Anda bisa mendapatkan pelengkapan otomatis dan informasi lebih lanjut tentang tipe dan parameter yang dikembalikan. Lihat contoh di bawah ini, kita bisa melihat fungsi tersebut fetch()memiliki parameter RequestInfo dan RequestInit, dan akan mengembalikan Promiseantarmuka Response. Exp: pandoraa.us

Antarmuka TypeScript

Karena kita akan membuat pustaka, sangat disarankan untuk menggunakan TypeScript, karena orang-orang akan menggunakan pustaka Anda pada proyek mereka. Sebagai pembuat dan pengelola pustaka, Anda tentu ingin memberi mereka kemudahan dan ketangguhan selama pengembangan proyek mereka.

Proyek Boilerplate

Jika Anda belum pernah mendengar tentang boilerplate , ini adalah perangkat awal (atau Anda dapat menyebutnya template ) yang dapat membantu Anda memulai proyek lebih cepat. Boilerplate telah menyusun struktur proyek dan juga telah menyiapkan semua elemen yang Anda perlukan dalam fase pengembangan dan produksi.

Saya telah membuat boilerplate yang sangat sederhana untuk mendukung pengembangan pustaka di TypeScript. Anda dapat memeriksanya langsung di repositori vite-ts-starter . Boilerplate ini memiliki banyak fitur yang tentunya akan meningkatkan pengembangan pustaka Anda.

Fitur

Paket Monorepo

Taman bermain (demo)

CI/CD dengan Tindakan Github

Vite dengan banyak fitur

Pengujian dengan Vitest

Struktur Folder

├── packages

│   └── mypackage

│       ├── package.json

│       └── src

│           └── index.ts

├── playground

│   ├── favicon.svg

│   ├── index.html

│   ├── package.json

│   └── src

│       ├── main.ts

│       ├── style.css

│       └── vite-env.d.ts

├── netlify.toml

├── package.json

├── pnpm-lock.yaml

├── pnpm-workspace.yaml

├── README.md

└── tsconfig.json

Seperti yang Anda lihat struktur folder di atas, saya akan menjelaskan setiap bagiannya dan fungsinya.

foldernyapackages 

Folder tersebut packagesdapat berisi beberapa paket yang akan di-deploy pada registri npm. Misalnya

foldernyaplayground 

Folder tersebut playgroundberisi aplikasi situs web Anda yang akan menampilkan hasil dan men-debug paket yang sedang Anda kerjakan. Dalam proyek ini, saya menggunakan Vite untuk memberikan kinerja terbaik, juga fleksibilitas tinggi pada plugin atau kerangka kerja yang ingin Anda gunakan.

Instalasi

Berikut adalah langkah-langkah yang dapat Anda ikuti untuk memasang boilerplate sebelum mulai membangun perpustakaan Anda:

Klik "Gunakan templat ini" di repositori vite-ts-starter . Ini akan membuat repositori Anda sendiri dengan salinan konten vite-ts-starter .

Setelah repositori Anda dibuat, klon repositori tersebut.

git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git

cd YOUR_REPOSITORY

Instal dependensinya. Anda dapat menggunakan npm , yarn , atau pnpm . Namun, saya sarankan Anda menggunakan pnpm dalam kasus ini.

pnpm install # or npm install

Jalankan secara lokal. Kita akan menjalankan dua perintah, perintah untuk menjalankan playgroundproyek, lalu menjalankan perintah untuk mengkompilasi semua paket dalam packagesfolder. Anda perlu menjalankannya di dua tab terminal atau cmd.

Kompilasi paket-paket:

pnpm run js:dev # or npm run js:dev

Sajikan playground:

pnpm run dev # or npm run dev

Anda dapat berkunjung localhost:3000setelah server Vite berjalan.

Membangun perpustakaan Anda

Hal pertama yang harus dilakukan adalah mengubah info perpustakaan Anda dalam package.jsonfile di packages/mypackage/package.json. Anda dapat mengubah nilai name, version, description, author, repository, bugs, dan Anda dapat mengubah atau menambahkan sesuatu seperti fundingjuga.

{

  "name": "mypackage", // Must be UNIQUE 

  "version": "1.0.0", // Set up your first version

  "description": "", // Library description

  "main": "dist/index.js",

  "module": "dist/index.mjs",

  "types": "dist/index.d.ts",

  "unpkg": "dist/index.global.js",

  "jsdelivr": "dist/index.global.js",

  "files": ["dist"],

  "author": "creatpages <creatpages.dev@gmail.com>",

  "license": "MIT",

  "repository": {

    "type": "git",

    "url": "git+https://github.com/creatpages/vite-ts-starter.git"

  },

  "bugs": {

    "url": "https://github.com/creatpages/vite-ts-starter/issues"

  },

  "scripts": {

    "dev": "nr tsup --watch",

    "tsup": "tsup src/index.ts --format esm,cjs --dts --no-splitting --clean",

    "build": "nr tsup",

    "prepublishOnly": "nr build"

  }

}

Setelah Anda memutuskan namanya, Anda juga perlu mengubah nama pustaka yang diimpor di beberapa file.

Di tsconfig.json, ubah nama pustaka Anda di bagian ini (lihat gambar) sehingga IDE atau editor dapat menentukan paket yang sebenarnya Anda gunakan. Ubah mypackageke nama yang Anda inginkan.

"paths": {

    "mypackage": ["./packages/mypackage/src/index.ts"]

}

Dan akhirnya Anda dapat mulai bekerja! Anda dapat mulai membuat fungsi-fungsi Anda dalam packages/{your_package}/src/index.tsfile.

Jadikan perpustakaan Anda

Untuk membuatnya visual dan mudah di-debug, buka file dalam playground/src/main.tsfile untuk mulai menggunakan pustaka Anda.

Membangun dan Menyebarkan ke Registri NPM

Kami menerapkan dua hal di sini: halaman playground (demo) dan paket ke registri npm. Pastikan Anda telah menyiapkan versi yang benar package.jsonuntuk pertama kalinya.

Proyek taman bermain akan diterapkan di atas Halaman Github. Dan semua paket akan dirilis dengan npm release.

Terapkan paket-paketnya

Masuk ke npm (lewati jika Anda sudah masuk)

pnpm login # or npm login

dan Anda akan dimintai nama pengguna npm, kata sandi, dan OTP email Anda.

masuk ke npm

Jalankan perintah rilis build.

pnpm run build

pnpm run release

Di terminal, Anda akan ditanya versi apa yang ingin Anda ubah. Versi semantik digunakan untuk penamaan versi.

pilih versi paket npm

Setelah versi dipilih, pembuatan dan penyebaran ke registri npm akan dimulai. Jika penyebaran berhasil, di terminal, Anda akan mendapatkan sesuatu seperti ini (saya menggunakan pustaka rolloc sebagai contoh):

keberhasilan penerapan npm

Terapkan taman bermain ke Halaman Github

Boilerplate ini sudah dibundel dengan Github Actions, Anda dapat memeriksa berkasnya di .github/workflows/main.yml. Setiap kali Anda mengirimnya ke maincabang, ia akan secara otomatis membuat dan menyebarkannya ke gh-pagescabang.

Untuk memeriksa apakah penerapan berjalan dengan benar, buka halaman repositori Anda, buka tab Tindakan , dan Anda dapat melihat status alur kerja Integrasi Berkelanjutan. Jika ada tanda centang hijau, berarti berhasil.

tindakan integrasi berkelanjutan github

Setelah itu, masuk ke Pengaturan repositori Anda , pilih menu Halaman , lalu pilih cabang gh-pages sebagai sumber Anda.

aktifkan halaman GitHub

Klik simpan, peringatan keberhasilan akan muncul dan memberi Anda tautan ke halaman web aktif.

aktivasi halaman GitHub berhasil

Selesai! Paket npm Anda berhasil di-deploy dan halaman demo sudah aktif. Anda dapat mulai membagikan hasil kerja Anda kepada teman, keluarga, dan menyelenggarakan pesta!

Kesimpulan

Tidak akan sulit untuk mulai membangun pustaka Anda sendiri jika Anda mengumpulkan semua alat yang tepat untuk membantu pekerjaan Anda. Dan saya telah membuat boilerplate atau starter kit untuk segera bersiap mengerjakan pustaka baru. Saya harap pustaka Anda akan sukses besar dan terus menyebarkan manfaatnya kepada pengembang lain. Saya terbuka untuk pertanyaan apa pun jika Anda memerlukan bantuan saya, tinggalkan komentar di bawah dan saya akan segera menanggapinya.