Cipta pakej NPM Dalam React.JS

Dalam artikel ini, saya akan membimbing anda melalui proses mencipta dan menerbitkan pakej npm untuk aplikasi React.js.

Pertama, jalankan arahan berikut:

npx create-react-library react-loader

Ini akan menjana aplikasi/pakej React.js asas. Selepas menjalankan arahan, anda akan melihat struktur projek seperti ini:

dalam folder src, anda akan menemui fail index.js.

Anda boleh sama ada mencipta komponen perpustakaan anda terus dalam index.jsfile, atau anda boleh mencipta fail komponen baharu dalam folder src dan mengeksportnya daripada fail index.js seperti ini:

Jika anda menggunakan CSS untuk komponen anda, pastikan anda mengimportnya ke dalam fail komponen anda.

Seterusnya, jika anda mempunyai folder dist dalam projek anda, padamkannya. Untuk menguji sama ada komponen anda berfungsi dengan betul, navigasi ke folder contoh/src.

Dalam fail App.js, import komponen anda seperti yang ditunjukkan di sini. Ini adalah pendekatan yang sama yang akan anda gunakan untuk memasukkan perpustakaan ini sebagai pakej npm dalam projek lain.

Untuk menjalankan apl, laksanakan arahan berikut:

cd react-loader && npm start
cd react-loader/contoh && npm mula

Selepas menguji pustaka anda, tiba masanya untuk menerbitkannya.

Jika anda telah menyediakan repositori untuk projek anda, hanya tolak perubahan terakhir. Jika tidak, buat repositori baharu dan tolak perubahan anda.

Anda juga perlu mencipta fail .npmignore pada akar projek anda, yang berfungsi sama seperti fail .gitignore untuk NPM. Ia menghalang fail dan folder tertentu (seperti node_modules, .git, .gitignore, dll.) daripada diterbitkan ke pendaftaran NPM.

Selepas menolak perubahan anda, jalankan arahan npm log masuk. Anda akan digesa untuk membuka NPM dalam penyemak imbas anda, di mana anda boleh log masuk ke akaun anda atau mendaftar jika anda tidak memilikinya. Kemudian, laksanakan npm publish, yang akan menerbitkan folder dist anda ke NPM dengan versi yang dinyatakan dalam fail package.json anda.

Setelah pakej diterbitkan, anda boleh melihatnya di tapak web NPM dengan mencari nama pakej anda atau dengan melawati profil anda, di mana semua pakej anda akan disenaraikan.

Ikuti untuk lebih banyak lagi Anda boleh mencari saya di sini

Atas ialah kandungan terperinci Cipta pakej NPM Dalam React.JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!