Créer un package NPM dans React.JS

Dans cet article, je vais vous guider à travers le processus de création et de publication d'un package npm pour une application React.js.

Tout d'abord, exécutez la commande suivante :

npx create-react-library react-loader

Cela générera une application/package React.js de base. Après avoir exécuté la commande, vous verrez une structure de projet comme celle-ci :

dans le dossier src, vous trouverez un fichier index.js.

Vous pouvez soit créer votre composant de bibliothèque directement dans le fichier index.js, soit créer un nouveau fichier de composant dans le dossier src et l'exporter à partir du fichier index.js comme ceci :

Si vous utilisez CSS pour votre composant, assurez-vous de l'importer dans votre fichier de composant.

Ensuite, si vous avez un dossier dist dans votre projet, supprimez-le. Pour tester si votre composant fonctionne correctement, accédez au dossier example/src.

Dans le fichier App.js, importez votre composant comme indiqué ici. C'est la même approche que vous utiliserez pour inclure cette bibliothèque en tant que package npm dans d'autres projets.

Pour exécuter l'application, exécutez les commandes suivantes :

cd réagir-loader && npm start
cd réagir-loader/exemple && npm start

Après avoir testé votre bibliothèque, il est temps de la publier.

Si vous avez déjà configuré un référentiel pour votre projet, poussez simplement les modifications finales. Sinon, créez un nouveau référentiel et transférez vos modifications.

Vous devez également créer un fichier .npmignore à la racine de votre projet, qui fonctionne de la même manière qu'un fichier .gitignore pour NPM. Il empêche certains fichiers et dossiers (comme node_modules, .git, .gitignore, etc.) d'être publiés dans le registre NPM.

Après avoir poussé vos modifications, exécutez la commande npm login. Vous serez invité à ouvrir NPM dans votre navigateur, où vous pourrez vous connecter à votre compte ou vous inscrire si vous n'en avez pas. Ensuite, exécutez npm submit, qui publiera votre dossier dist sur NPM avec la version spécifiée dans votre fichier package.json.

Une fois le package publié, vous pouvez le visualiser sur le site Web de NPM en recherchant le nom de votre package ou en visitant votre profil, où tous vos packages seront répertoriés.

Suivez pour en savoir plus. Vous pouvez me trouver ici

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!