Cara menerbitkan paket TypeScript ke NPM

Pada artikel ini saya akan membahas proses penerbitan paket TypeScript dengan ketergantungan eksternal ke NPM

Tulis beberapa kode

Paket yang akan kami terbitkan adalah hook kustom React.js untuk nilai-nilai pelambatan: react-use-throttle . Saya sudah menulis artikel tentang mengembangkan hook ini dan sekarang kami akan mempublikasikannya ke NPM

Hal pertama yang pertama, kita perlu menulis kode untuk paket tersebut. Saya telah meletakkan kode saya ke file src/index.ts

tsconfig.json

Untuk mengembangkan dengan TypeScript kita perlu menambahkan tsconfig ke repositori kita. Konfigurasi saya terlihat seperti ini:

 { "include" : [ "./src/**/*" ], "compilerOptions" : { "strict" : true , "declaration" : true , // generates declaration files "esModuleInterop" : true }
}

Untuk mempelajari lebih lanjut tentang opsi yang berbeda, silakan lihat Referensi TSConfig

Siapkan Rollup

Rollup adalah bundler modul untuk JavaScript yang mengkompilasi potongan kecil kode menjadi sesuatu yang lebih besar dan lebih kompleks, seperti perpustakaan atau aplikasi.

Rollup memungkinkan pengembang dengan mudah mengkompilasi kode ke dalam sistem modul JavaScript yang berbeda seperti ESModules, UMD, AMD atau CommonJS. Ada artikel bagus yang membahas perbedaan utama di antara mereka

Ini adalah rollup.config.js saya, ini mengekspor larik objek, di mana setiap objek menentukan bagaimana Rollup harus membangun kode kami dalam format yang ditentukan. Di sini kami membuat kode untuk modul ES dan UMD, karena yang paling umum saat ini. Setiap bundel memiliki plugin TypeScript dan Babel, dan bundel UMD juga memiliki plugin terser untuk minifikasi kode

 import typescript from ' rollup-plugin-typescript2 ' import babel from ' @rollup/plugin-babel ' import { terser } from ' rollup-plugin-terser ' export default [ // ES Modules { input : ' src/useThrottle.ts ' , output : { file : ' dist/index.es.js ' , format : ' es ' , }, plugins : [ typescript (), babel ({ extensions : [ ' .ts ' ] }), ], }, // UMD { input : ' src/useThrottle.ts ' , output : { file : ' dist/index.umd.min.js ' , format : ' umd ' , name : ' reactUseThrottle ' , indent : false , }, plugins : [ typescript (), babel ({ extensions : [ ' .ts ' ], exclude : ' node_modules/** ' }), terser (), ], }, ]

Untuk mempelajari lebih lanjut tentang konfigurasi Rollup, silakan lihat panduan memulai cepat Rollup

Buat kode dan publikasikan paket ke NPM

Kita perlu menentukan kolom berikut di file package.json

 "name" : "react-use-throttle" ,
"version" : "0.0.1" ,
"main" : "dist/index.umd.min.js" ,
"module" : "dist/index.es.js" ,
"types" : "dist/useThrottle.d.ts" ,
"files" : [ "dist" ]

name dan version bersama-sama mengidentifikasi paket yang benar-benar unik
main adalah titik masuk utama ke paket kami
module adalah titik masuk untuk ESModules
types adalah titik masuk untuk deklarasi tipe TypeScript
files adalah larik pola yang mendeskripsikan entri yang akan disertakan saat paket Anda diinstal sebagai dependensi

Pelajari lebih lanjut tentang berbagai bidang di file package.json: dokumen Package.json

Selain itu, kita perlu menentukan react sebagai peerDependency , karena itu tidak akan ditambahkan ke build akhir

 "peerDependencies" : { "react" : "^16.8.0 || ^17.0.0"
}

Untuk membuat kode dengan rollup kita perlu menjalankan perintah berikut:

 rollup -c

Ini akan membangun paket kami berdasarkan aturan yang kami tetapkan di rollup.config.js . Kode akan dihasilkan ke folder dist

Sekarang kami siap untuk mempublikasikan paket kami, untuk melakukan ini kami perlu menjalankan perintah berikut:

 npm login # this will ask you for your NPM login and password npm publish

Paket berhasil diterbitkan ke NPM 🎉

Teks Alt

Tautan

April 20, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *