Création et diffusion d’un package pour React Native
Rien ne sert de réinventer la roue ! Ce principe est la base de la programmation moderne. Nous travaillons tous en communauté, et nous pouvons grâce à cela nous concentrer sur la valeur ajouté de notre projet, en s’appuyant sur le travail que d’autres ont déjà fait avant nous.
En React Native nous avons accès à de nombreux package qui nous permettent d’avancer plus vite dans notre développement. Alors quand vous avez l’occasion de partager votre travail avec la communauté, pourquoi ne pas la saisir. Pour cela, il vous faudra savoir créer un package et le partager. C’est ce que nous allons voir dans cet article.
Création du repo sur GitHub
Si nous souhaitons partager notre package, il faut qu’il soit disponible pour tous. Commençons donc par créer un repo publique sur GitHub afin d’y déposer nos ressources.
Nous nous rendons donc à la page de création d’un nouveau repo sur GitHub, et commençons la configuration.
Tout d’abord le nom de notre repo. Le noms des packages pour React Native sont créés avec le prefix “react-native”. Trouvez un nom qui reflète ce que fait votre package (important pour son référencement, et indiquer aux autres développeurs ce qu’ils vont pouvoir faire avec), et qui ne soit pas déjà pris.
Dans cet exemple, nous allons créer un package pour faire du traitement d’images en passant par les bibliothèques natives. Je vais proposer des outils pour faire du traitement d’image, donc mon nom de package sera : react-native-image-processing-tools.
Je lui ajoute une descritpion — important pour que les autres développeurs sachent directement de quoi il s’agit : Collection of tools for image processing in for React Native (bien sûr la langue de Shakespeare s’impose).
Le repo doit être publique, avoir un ReadMe, qui vous permettra d’exposer son fonctionnement, et enfin une licence indiquant les conditions d’utilisation (La licence MIT s’impose naturellement — pour en savoir plus sur la licence MIT suivez ce lien).
Une fois le repo créé, on le clone sur notre poste, et on va travailler dessus.
Création d’une bibliothèque React Native
Je vais partir de la commande create-react-native-module pour créer une nouvelle bibliothèque pour React Native.
Plaçons-nous dans le répertoire parent de notre projet, et exécutons la commande suivante.
npx create-react-native-module react-native-image-processing-tools --generate-exampleQuelques explications sur cette commande s’imposent :
- Je me positionne dans le dossier parents, afin que mon projet se crée directement dans le dossier de mon projet, dont je pourrai alors commiter directement les modifications.
- create-react-native-module est un outil créé par Chris Brody, qui vous permet de générer un template de module en React Native, et qui inclue déjà une application de démo (example), ainsi que le “pont” entre le code Natif et le code écrit en React Native.
- L’option generate-example permet comme son nom l’indique de créer une application de démo dans mon projet.
J’ai donc maintenant le code du template disponible dans mon dossier react-native-image-processing-tools. Il ne me reste plus qu’à tester que tout fonctionne.
Afin de voir que tout fonctionne, je peux lancer le projet example et voir directement le résultat.
cd example
yarn ios
yarn androidVous devriez voir les écrans suivant sur Android (à gauche) et sur iOS (à droite).
Structure du projet et explications
Notre projet est donc composé des éléments suivants :
- index.js : fichier racine de notre projet ;
- ios : dossier contenant le code natif de notre projet en Objective C ;
- android : dossier contenant le code natif de notre projet en Java ;
- example : dossier contenant notre projet de test et de démo ;
Pour ceux qui ne sont pas familier avec les modules natifs, voici une petite explication.
Dans le fichier index.js, vous allez trouver le code ci-dessous.
import { NativeModules } from ‘react-native’;const { ImageProcessingTools } = NativeModules;export default ImageProcessingTools;
La bibliothèque NativeModules qui est importée est celle qui nous permet de communiquer avec le code natif (écrit ici en Objective C et en Java).
Notre module s’appelle ImageProcessingTools. Cela provient des déclarations faites dans le code natif, et il devient disponible dans notre code React Native via sa récupration dans la constante ImageProcessingTools et sont export en tant que classe par défaut de notre index.
Si on regarde dans le dossier ios, on trouve — entre autres — deux fichiers nommés ImageProcessingTools.h et ImageProcessingTools.m. Ces fichiers contiennent le code natif qui permet à notre projet de fonctionner. Concentrons nous sur le fichier ImageProcessingTools.m
#import “ImageProcessingTools.h”
@implementation ImageProcessingToolsRCT_EXPORT_MODULE()RCT_EXPORT_METHOD(sampleMethod:(NSString *)stringArgument numberParameter:(nonnull NSNumber *)numberArgument callback:(RCTResponseSenderBlock)callback)
{
// TODO: Implement some actually useful functionality
callback(@[[NSString stringWithFormat: @”numberArgument: %@ stringArgument: %@”, numberArgument, stringArgument]]);
}@end
Nous pouvons voir que le code est défini autour de deux élément — RCT_EXPORT_MODULE() et RCT_EXPORT_METHOD() — appelés des macros.
La macro RCT_EXPORT_MODULE() permet de exporter le code natif contenu dans le fichier via les NativeModules de React Native. Elle est unique et par défaut, le module prend alors le nom de le classe (ici ImageProcessingTools). Si vous souhaitez un nom différent, il faut le spécifier comme argument de la macro RCT_EXPORT_MODULE(). Nous allons garder le nom par défaut.
La macro RCT_EXPORT_METHOD() permet de définire les méthodes qui seront disponibles via le module. Ici nous exposons la méthode sampleMethod, qui sera donc accessible dans notre code React Native. Si nous souhaitons exposer plusieurs méthodes, il nous suffit d’ajouter autant de macros RCT_EXPORT_METHOD() que nécessaire.
Allons voir maintenant ce qui se passe du côté d’Android. Nous allons étudier les fichiers présents dans le dossier android/src/main/java/dev/onthebeach/rnimageprocessingtools/ (le nom de ces trois derniers dossiers dépend évidemment du nom choisit pour votre package name. Si vous avez choisis le package name fr.monmodule, alors le chemin sera android/src/main/java/fr/monmodule/).
Dans ce dossier nous allons trouver les fichiers ImageProcessingToolsModule.java et ImageProcessingToolsPackage.java.
Celui qui nous intéresse est le fichier ImageProcessginToolsModule.java dont voici le code.
package dev.onthebeach.rnimageprocessingtools;import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;public class ImageProcessingToolsModule extends ReactContextBaseJavaModule {
private final ReactApplicationContext reactContext;
public ImageProcessingToolsModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
} @Override
public String getName() {
return “ImageProcessingTools”;
} @ReactMethod
public void sampleMethod(String stringArgument, int numberArgument, Callback callback) {
// TODO: Implement some actually useful functionality
callback.invoke(“Received numberArgument: “ + numberArgument + “ stringArgument: “ + stringArgument);
}
}
La classe ImageProcessingToolsModule présente 2 méthodes qui nous intéressent : getName() et sampleMethod().
La méthode getName() nous permet de définir le nom de notre module. Si vous avez changé ce nom dans iOS via la macro RCT_EXPORT_MODULE, n’oubliez pas de le changer également dans cette méthode.
La méthode sampleMethod() est la soeur jumelle de celle définie dans la macro RCT_EXPORT_METHOD sur iOS.
Enfin, regardons comment ces méthodes natives sont utilisées dans notre code React Native. Si nous allons dans notre application example, nous trouverons le code de notre app de démo dans le fichier App.js.
Le module est importer dans notre code.
import ImageProcessingTools from ‘react-native-image-processing-tools’;Puis, nous l’utilisons dans notre componentDidMount via l’appel à la méthode commune à nos modules natifs.
ImageProcessingTools.sampleMethod(‘Testing’, 123, (message) => {
this.setState({
status: ‘native callback received’,
message
});
});Modification du code natif
Avant de commencer à faire du traitement d’image, nous allons voir comment modifier le code iOS et Android, pour modifier le fonctionnement de nos méthodes.
Nous allons reprendre notre méthode sampleMethod, mais au lieu d’afficher le nombre défini dans numberArgument, nous allons d’abord incrémenter ce nombre de 1. Donc quand nous enverrons 123, notre application affichera 124.
Dans le fichier ImageProcessingTools.m de notre module iOS, nous allons remplacer le code de la sampleMethod par le suivant :
//Récupération de l'entier définir dans numberArgument
int numberArgumentValue = [numberArgument intValue];//Création d'un nouvel objet contenant la valeur de numberArgument incrémentée de 1
NSNumber *newNumberArgument = [NSNumber numberWithInt:numberArgumentValue + 1];//Modification du callback pour renvoyer le nouvel objet
callback(@[[NSString stringWithFormat: @”numberArgument: %@ stringArgument: %@”, newNumberArgument, stringArgument]]);
Dans le fichier ImageProcessginToolsModule.java de notre module Android, nous allons remplacer le code de la sampleMethod par le suivant :
//Création d'un nouvel entier dont la valeur est égale à celle de numberArgument incrémentée de 1
int newNumberArgument = numberArgument + 1;//Modification du callback pour renvoyer le nouvel entier
callback.invoke(“Received numberArgument: “ + newNumberArgument + “ stringArgument: “ + stringArgument);
Étant donné que nous avons modifier du code natif, il faut recompiler l’app example, pour en voir le résultat.
cd example
yarn ios
yarn androidStructure du code JS du module React Native
Pour le moment tout le code JS de mon module est stocké dans le fichier index.js.
Si je veux étoffer ce code, et ajouter d’autre fonction (dépendantes ou indépendantes des modules natifs), mon fichier index va vite devenir lourd et illisibles.
De plus, le code qui y est présenté est très basique. En effet, dans mon app example, si je code dans un IDE digne de ce nom, je vois bien qu’après avoir saisie “ImageProcessingTools.”, aucune méthode ne m’est proposée. Or pour les développeurs qui vont utiliser votre module, il serait bon qu’ils aient une visibilité sur les méthodes disponibles, ainsi que sur les arguments attendus pour chaque méthode.
Nous allons donc construire une classe qui va exposer toutes les méthodes de notre module. Pour cela nous allons créer un dossier lib à la racine de notre projet, et y créer le fichier imageProcessingTools.js.
Dans ce fichier, nous allons dans un premier temps y copier le contenu de notre fichier index.js.
import { NativeModules } from ‘react-native’;const { ImageProcessingTools } = NativeModules;export default ImageProcessingTools;
Pour continuer à utiliser le module ImageProcessingTools, le code de notre fichier index.js devient alors :
import ImageProcessingTools from ‘./lib/imageProcessingTools’;
export default ImageProcessingTools;Pour l’instant notre code n’a pas été optimisé. Dans notre fichier lib/imageProcesingTools.js nous allons créer une classe, dont une instance sera exportée pour être utilisée dans le code de notre app example.
import { NativeModules } from ‘react-native’;
const { ImageProcessingTools } = NativeModules;//Déclaration de la classe RNImageProcessingTools
class RNImageProcessingTools { //Création de la méthode sampleMethod de notre classe, qui pourra être appelée dans le code JS des apps utilisant le module
sampleMethod(stringArgument, numberArgument, callback) {
//Notre méthode JS appelle les méthodes natives, et en renvoie le résultat via la callback définie dans les arguments
ImageProcessingTools.sampleMethod(stringArgument, numberArgument, (message) => {
callback(message);
});
}
}
//Nous créons une instance de notre classe
const imageProcessingTools = new RNImageProcessingTools();//Nous exportons l'insctance pour qu'elle soit utilisée dans notre code
export default imageProcessingTools;
Si je teste l’implémentation de ma méthode dans VSCode, je vais avoir une aide précieuse me permettant de voir les méthodes disponibles ainsi que les arguments demandés pour une méthode.
Maintenant que notre code est plus propre il est temps de faire appel au code natif pour afficher de belles images retravaillées.
Nous allons créer une méthode qui va prendre en entrée l’URL d’une image distante et nous renvoyer sa version noir et blanc. Pour les tests je vais utiliser cette photo de la plage Pacific Beach à San Diego prise par Roman Gomez et disponible sur Unsplash.
Pour transformer l’image, je vais utiliser le framework Core Image disponible dans le SDK iOS. Pour Android, j’ai trouvé une liste de tutos écrits par Pete Huston sur son site, pour faire du retravaille d’image.
Nous allons modifier le code de notre app example pour qu’elle affiche 2 images :
- Celle d’origine simplement afficher via la bibliothèque Image de React Native depuis son URL
- Celle renvoyée par notre module, qui sera représenté en Base64.
import React, { Component } from ‘react’;
import { Platform, StyleSheet, Text, View, Image } from ‘react-native’;import ImageProcessingTools from ‘react-native-image-processing-tools’;//Déclaration de l'url de l'image à retravailler
const imageUrl = ‘https://images.unsplash.com/photo-1536602295863-59cf052c35f5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2636&q=80';export default class App extends Component {
constructor() {
super();
this.state = {
status: ‘starting’,
processedImage: ‘’
}; this.getImageProcessed = this.getImageProcessed.bind(this);
} componentDidMount() {
} render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Original Image</Text>
<Image source={{uri:imageUrl}} style={{width:320, height:191}} />
<Text style={styles.welcome}>Processed Image</Text>
{this.getImageProcessed()}
</View>
);
} getImageProcessed() {
if (this.state.processedImage.length > 0) {
return <Image source={{uri:this.state.processedImage}} style={{width:320, height:191}} />
} else {
return <View style={{width:320, height:191, justifyContent:’center’, alignItems:’center’, backgroundColor:’grey’}}>
<Text>No image to display</Text>
</View>
}
}
}const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
}
});
Avec ce nouveau code nous obtenons ce résulat.
Il faut maintenant créer la méthode qui va nous permettre d’envoyer l’URL aux méthodes natives iOS et Android, et de récupérer le résultat retravaillé. Étant donné que nous allons transformé notre image en noir et blanc, je propose d’appeler notre méthode getBlackAndWhiteImageFromUrl.
Création de la méthode getBlackAndWhiteImageFromUrl sur iOS
Revenons à notre fichier ios/ImageProcessingTools.m.
Nous allons supprimer la sampleMethod, et la remplacer par notre méthode de manipulation d’image.
#import “ImageProcessingTools.h”
@implementation ImageProcessingToolsRCT_EXPORT_MODULE()RCT_EXPORT_METHOD(getBlackAndWhiteImageFromUrl:(NSString *)imageUrl callback:(RCTResponseSenderBlock)callback) {}@end
Nous avons donc une nouvelle méthode qui accepte une chaine de caractère en entrée contenant l’URL de l’image à retravailler, et une callback, nous permettant de récupérer le résultat.
Pour travailler l’image sur iOS, il va nous falloir 2 frameworks :
- UIKit — Framework des interfaces utilisateur d’iOS qui contient l’objet UIImage que nous allons utiliser dans le processus de création de l’image en Base64 ;
- CoreImage — Framework de manipulation des images.
Pour ajouter ces frameworks à notre projet, il faut l’ouvrir sur XCode. Pour cela ouvrez le projet xcodeproj avec la commande suivante exécutée à la racine de votre projet.
open ios/ImageProcessingTools.xcodeprojUne fois ouvert, cliquez sur votre projet dans le menu de gauche (ici ImageProcessingTools), puis sur l’onglet Build Phases, et ouvrez celui nommé Link Binary With Librairies. Comme son nom l’indique c’est ici que vous allez lier votre projet avec des bibliothèques.
Appuyez sur le bouton + situé dans la ligne basse du tableau, et vous allez ouvrir la fenêtre de sélection des frameworks inclus dans le SDK Apple.
Dans le champs de recherche, saisissez UIKit. Vous devriez avoir dans les résultats UIKit.framework. Sélectionnez le, puis cliquez sur Add. Puis recommencez la manipulation, en cliquant sur +, puis en saisissant CoreImage. Cliquez sur CoreImage.framework puis sur Add.
Les deux frameworks apparaissent maintenant dans le tableau. Nous pouvons les utiliser dans notre module. Pour cela il faut commencer par les importer. Retour dans notre fichier ios/ImageProcessingTools.m
#import “ImageProcessingTools.h”
#import <UIKit/UIKit.h>
#import <CoreImage/CoreImage.h>@implementation ImageProcessingTools[…]@end
Il ne nous reste plus maintenant qu’à traiter notre image.
RCT_EXPORT_METHOD(getBlackAndWhiteImageFromUrl:(NSString *)imageUrl callback:(RCTResponseSenderBlock)callback) {
//Tout d'abord nous devons transformer notre chaine de caractère en une URL
NSURL *imageNSURL = [NSURL URLWithString:imageUrl]; //Puis nous allons stocker notre image dans un objet CIImage (CI pour Core Image), qui sera l'objet que nous allons pouvoir traiter
CIImage *originalCIImage = [CIImage imageWithContentsOfURL:imageNSURL];//Nous allons créer un filtre avec l'effet Mono
CIFilter *blackAndWhiteFilter = [CIFilter filterWithName:@”CIPhotoEffectMono”]; //Nous allons appliquer ce filter à notre Image
[blackAndWhiteFilter setValue:originalCIImage forKey:kCIInputImageKey]; //Enfin nous en récupérons le resultat
CIImage *blackAndWhiteImage = blackAndWhiteFilter.outputImage; //Pour convertir une image en Base64, la méthode la plus simple que j'ai trouvée est de passer par une UIImage
UIImage *anUIImage = [UIImage imageWithCIImage:blackAndWhiteImage];
NSData *imageData = UIImagePNGRepresentation(anUIImage);
NSString *imageDataAsString = [imageData base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithLineFeed]; //Enfin nous renvoyons notre résulat au code natif
callback(@[imageDataAsString]);
}
Création de la méthode getBlackAndWhiteImageFromUrl sur Android
Revenons maintenant à notre fichier android/src/main/java/dev/onthebeach/rnimageprocessingtools/ImageProcessingToolsModule.java
Comme pour iOS, nous allons supprimer notre sampleMethod et ajouter une méthode getBlackAndWhiteImageFromUrl
package dev.onthebeach.rnimageprocessingtools;import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;public class ImageProcessingToolsModule extends ReactContextBaseJavaModule {
private final ReactApplicationContext reactContext; public ImageProcessingToolsModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
} @Override
public String getName() {
return “ImageProcessingTools”;
} @ReactMethod
public void getBlackAndWhiteImageFromUrl(String imageUrl, Callback callback) { }
}
Pour travailler notre image, nous allons avoir besoin d’importer quelques librairies du SDK Android et de Java.
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.util.Base64;import java.io.ByteArrayOutputStream;
import java.net.URL;
import java.net.HttpURLConnection;
import java.io.InputStream;
import java.io.IOException;
Nous allons créer une méthode getBitmapFromURL qui va nous permettre de transformer notre image en un objet Bitmap. Nous allons ensuite transformer cette objet Bitmap en noir et blanc avec la méthode applyGreyscale. Et enfin nous allons transfromer le Bitmap résultant en une chaine de caractère encodée en Base64.
public class ImageProcessingToolsModule extends ReactContextBaseJavaModule {
[...]
//Récupération d’une image d’une URL au format bitmap
public static Bitmap getBitmapFromURL(String imageSource) {
try {
URL imageUrl = new URL(imageSource);
HttpURLConnection connection = (HttpURLConnection) imageUrl.openConnection();
connection.setDoInput(true);
connection.connect();
InputStream input = connection.getInputStream();
Bitmap imageAsBitmap = BitmapFactory.decodeStream(input);
return imageAsBitmap;
} catch (IOException e) {
// TODO : Gestion des erreurs
return null;
}
} //Transformation d'un objet Bitmap en noir et blanc
public static Bitmap applyGreyscale(Bitmap bitmapSource) {
//Définition des nuances pour obenir un noir et blanc
final double GS_RED = 0.299;
final double GS_GREEN = 0.587;
final double GS_BLUE = 0.114; Bitmap bitmapOutput = Bitmap.createBitmap(bitmapSource.getWidth(), bitmapSource.getHeight(), bitmapSource.getConfig());
int A, R, G, B;
int pixel; // Récupération de la taille de l’image
int width = bitmapSource.getWidth();
int height = bitmapSource.getHeight(); // On va modifier les pixels de l’image
for(int x = 0; x < width; ++x) {
for(int y = 0; y < height; ++y) {
//Récupération du pixel de l’image
pixel = bitmapSource.getPixel(x, y);
A = Color.alpha(pixel);
R = Color.red(pixel);
G = Color.green(pixel);
B = Color.blue(pixel);
R = G = B = (int)(GS_RED * R + GS_GREEN * G + GS_BLUE * B); //Récupération du pixel transformé
bitmapOutput.setPixel(x, y, Color.argb(A, R, G, B));
}
} // Renvoie du Bitmap transformé
return bitmapOutput;
} @ReactMethod
public void getBlackAndWhiteImageFromUrl(String imageUrl, Callback callback) {
//On récupère l'image dans un BitMap qu'on transforme en Noir & Blanc
Bitmap imageBitmap = applyGreyscale(getBitmapFromURL(imageUrl));
//On va convertir notre Bitmap en image PNG puis en Data et enfin en une chaine de caractère encodée en Base64
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
imageBitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
byte[] byteArray = byteArrayOutputStream.toByteArray();
String imageDataAsString = Base64.encodeToString(byteArray, Base64.DEFAULT); //On renvoie notre résultat à notre module
callback.invoke(imageDataAsString);
}
}
Maintenant que tout cela est en place, nous devons modifier le code de notre module React Native pour qu’il puisse exposer cette nouvelle méthode getBlackAndWhiteImageFromUrl.
Implémentation de la méthode getBlackAndWhiteImageFromUrl dans notre module
Revenons maintenant à notre fichier lib/imageProcessingTools.js.
Nous allons supprimer notre méthode sampleMethod, qui n’existe plus et la remplacer par notre nouvelle méthode getBlackAndWhiteImageFromUrl.
import { NativeModules } from ‘react-native’;
const { ImageProcessingTools } = NativeModules;class RNImageProcessingTools {
getBlackAndWhiteImageFromUrl(imageUrl, callback) {
ImageProcessingTools.getBlackAndWhiteImageFromUrl(imageUrl, (response) => {
const base64Image = ‘data:image/png;base64,’+response;
callback(base64Image);
});
}
}const imageProcessingTools = new RNImageProcessingTools();export default imageProcessingTools;
J’en profile pour ajouté le prefixe ‘data:image/png;base64,’ à la chaine de caractère que je reçois. En effet, j’ai créé des images PNG que j’ai ensuite converti en chaines de caractères encodées en base64. Il faut que j’ajoute ce préfix, pour que la bibliothèque Image de React Native l’interprète comme tel.
Il ne me reste plus qu’à tester cette nouvelle méthode dans mon app de démo.
Démo de la méthode getBlackAndWhiteImageFromUrl dans l’app React Native
Je reviens dans mon fichier example/App.js
Il ne me reste qu’à ajouter le code suivante dans mon componentDidMount()
ImageProcessingTools.getBlackAndWhiteImageFromUrl(imageUrl, (response) => {
this.setState({processedImage:response});
});Et je recompile mes apps, étant donné que j’ai modifié le code natif.
cd example
yarn ios
yarn androidEt voilà le resultat sur iOS
et sur Android
On peut voir que le résultat n’est pas tout à fait identique. Pour terminer le module, il faudrait les ajuster, mais ce sera pour une autre fois.
Maintenant que nous avons créé notre module, il faut le partager. Le code de notre module est disponible sur Github, ce qui permet déjà à quelqu’un de le cloner. Mais le mieux est de le packager pour le rendre disponible via NPM et Yarn.
Création de notre package
Pour créer un package, il faut commencer par se créer un compte sur https://www.npmjs.com.
Une fois votre compte créé, retourner dans votre console, à la racine de votre projet, et saisissez la commande suivante
npm adduserOn va alors vous demander votre Username, votre Password et l’email associé au compte pour vous connecter à votre compte NPM.
Une fois connecté, vous allez pouvoir le publier. Avant de le faire, je vous invite à vérifier le fichier package.json situé à la racine de votre projet. Il est important que ce fichier soit correctement configuré, principalement les champs : name, title, version, description, repository et author.
Une fois le fichier package.json compléter, vous pouvez publier votre package de la manière suivante :
npm publish --access=publicL’utilisation de l’option access=public est optionnel. Le but étant de vous permettre de rendre votre package accessible à tous.
