Intégration de packages NPM tiers / Blogs / Perficient

Il est fréquemment nécessaire d’utiliser des bibliothèques et des packages externes dans le monde en constante évolution du développement Web. Pour Spire, l’intégration fluide de packages NPM tiers dans le système nécessite de suivre certaines procédures et considérations.

Comprendre la configuration dans Spire

Les packages NPM tiers peuvent être installés dans le cadre de Spire par les clients et les partenaires. Ce n’est cependant pas aussi simple qu’une installation NPM ordinaire. Ici, l’utilisation des espaces de travail et la structure des répertoires sont des éléments clés.

Le répertoire suivant contient uniquement les packages pouvant être installés : src/FrontEnd/modules/blueprints/{BlueprintThatNeedsCustomPackage}. Des problèmes de build peuvent survenir si des packages sont tentés d’être installés en dehors de cette structure, en particulier sous src/FrontEnd, le dossier racine de Spire.

Comme le montre la capture d’écran ci-dessous

Ci-dessus, nous avons ajouté le package nmp tiers pour la bibliothèque, qui vous permet d’intégrer la fonctionnalité de génération d’URL Cloudinary et de charger vos images et votre documentation Cloudinary.

Une fois le package ajouté à votre plan, vous verrez la structure de dossiers ci-dessous.

La commande npm install –save {PackageName} est utilisée dans le dossier Blueprint pour installer les packages requis pour le développement. Cette commande modifie automatiquement le fichier package.json dans le répertoire blueprint correspondant.

Exemple: npm install –save @cloudinary/url-gen

Vous utilisez la logique pour développer un widget personnalisé ou pour l’appliquer directement sur une page ou un widget existant, en fonction des exigences de votre package tiers. Ici, nous avons créé notre widget personnalisé pour télécharger des documents dans Cloudinary.

Pousser les changements

Une fois les packages installés et les ajustements requis dans package.json, assurez-vous que ces modifications sont poussées vers la branche sandbox.

Un dossier Blueprint dans src/FrontEnd/modules/blueprints correspond à chaque espace de travail. Les espaces de travail sont automatiquement générés par un script PowerShell dans le fichier package.json situé à la racine du Spire pendant le processus de construction. En rationalisant la procédure d’intégration, cette automatisation garantit le bon fonctionnement des modules liés.

Une fois le bac à sable mis à jour, nous pouvons ajouter le widget à la page spécifique qui en a besoin. Un Cloudinary tiers est requis pour le document de commande sur la page pour examen et paiement.

comme affiché sur l’écran ci-dessous.

Téléchargez le document de commande avec Cloudinary sur Review and Pay.

L’utilisateur peut utiliser le widget de téléchargement Cloudinary pour télécharger le document à partir du tableau de bord Cloudinary une fois qu’il a été téléchargé avec succès.

Conclusion:

Cet article de blog doit fournir aux partenaires et clients souhaitant intégrer des packages NPM tiers dans l’environnement Spire une explication détaillée de la procédure et des conseils.

Référence:

https://docs.developers.optimizely.com/configured-commerce/docs/install-3rd-party-npm-packages