A travers cette rubrique, vous trouverez des informations sur les pluggins que nous avons développés pour SharePoint.

​
Comment accéder aux plugins de l’agence ?

Il faut d’abord se connecter au Compte Webexpr sur www.npmjs.com :

Vous trouverez les plugins existant de l’agence sur le lien suivant : NPM Webexpr Agency

​
Création d’un nouveau plugins

Sur son ordinateur local, il faut créer un nouveau projet (un dossier vide) dédiée au plugin. Pour cela, il faut exécuter les commande suivante :

mkdir mon-nouveau-package
cd mon-nouveau-package
npm init

Il faudra répondre aux questions posées par la commande npm init pour générer le fichier package.json du projet.

Ensuite dans le package.json il faudra installer les dépendances nécessaires pour le plugin.

Vous pourrez ensuite créer un dossier src pour y mettre le code source du plugin.

​
Faire le build du plugin

Tout d’abord dans le package.json, il faudra ajouter les scripts suivants :

"scripts": {
    "build": "tsc",
}

Cette commande permet de compiler le code TypeScript du plugin en JavaScript dans le dossier lib.

Nous recommande d’ajouter un fichier index.ts dans le dossier src pour exporter les fonctions qui seront utilisées par le plugin. Cela s’appelle cela un barrel file et cela permettra d’avoir un point d’import unique pour le plugin.

Exemple :

// ./barrelFiles/used.ts
export const HEY = 'hey used';

// ./barrelFiles/notUsed.ts
export const HEY_NOT_USED = 'hey NOT used';


// ./barrelFiles/index.ts
export { HEY_NOT_USED } from './notUsed';
export { HEY } from './used';

/*
This is a barrel file, which will be used as a unique path to import any files into barrelFiles folder (such as ./used).
*/

Utilisation du barrel file :

// ./Component.tsx

import { HEY } from './barrelFiles'; // instead of use './barrelFiles/used'

Une fois le contenu du plugin prêt, il faut exécuter la commande suivante pour compiler le code TypeScript en JavaScript :

npm run build

​
Tester son plugin en local

Pour tester le plugin en local, il faut exécuter la commande suivante :

npm link

Cette commande permet de lier le plugin à l’installation globale de npm sur votre machine. Vous pourrez ensuite l’installer dans un projet SharePoint pour le tester avec la commande :

npm link @webexpr-agency/nom-du-plugin

Vous retrouverez le plugin dans le dossier node_modules du projet SharePoint, et il ne sera pas présent dans le fichier package.json du projet comme c’est une installation en lien symbolique.

​
Publier le plugin sur NPM manuellement

Tout d’abord dans le fichier package.json il faut ajouter cette entrée :

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

Cela permettra à npm de définir le point d’entrée du plugin.

Ensuite, cette entrée :

"files": [
    "lib"
],

Cela permettra de définir les fichiers à inclure dans le package npm.

Une fois ces étapes terminés il faut exécuter ces commandes pour publier le plugin sur npm :

npm login
npm publish

Le plugin sera ensuite disponible sur l’espace WebexpR Agency sur npm ! Il reprendra automatiquement le nom du package défini dans le fichier package.json du projet.

​
Gérer le versionning du plugin

Pour gérer le versionning du plugin, vous pouvez modifier la version dans le fichier package.json du projet. Fonctionnement des versions :

  • 1.0.0 : Major.Minor.Patch
  • Major : Changement majeur de l’API
  • Minor : Ajout de fonctionnalités compatibles avec l’API existante
  • Patch : Correction de bugs

Nous recommandons également de le versionner sur gitlab pour suivre l’évolution du plugin, et de gérer des tags pour chaque version publiée sur npm.

​
Utiliser le plugin dans un projet SharePoint

Le package étant publié sur npm en mode “privé”, il faut gérer l’authentification pour pouvoir l’installer dans un projet SharePoint.

Pour cela, il faut créer un fichier .npmrc à la racine du projet SharePoint et ajouter les lignes suivantes :

@webexpr-agency:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=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

Vous pouvez générer un nouveau token en lançant la commande suivante :

npm login
npm token create

Il faudra ensuite copier le token généré et le coller dans le fichier .npmrc.

Vous pourrez ensuite installer le plugin dans le projet SharePoint avec la commande suivante :

npm install @webexpr-agency/nom-du-plugin

Le plugin sera installé dans le dossier node_modules du projet SharePoint et sera disponible pour être utilisé dans le code du projet.

​
Changelog

TODO

​
Utiliser la CI/CD de gitlab pour publier le plugin automatiquement

TODO

IntroductionInstallation