Comment publier votre composant Vue.js sur NPM

Vous avez créé un composant génial avec Vue.js que d’autres développeurs pourraient utiliser dans leurs projets. Comment pouvez-vous le partager avec eux?

Dans cet article, je vais vous montrer comment préparer votre composant afin qu’il puisse être empaqueté et publié sur NPM. Je vais utiliser un exemple de projet et démontrer ce qui suit:

  • S'assurer que les dépendances ne sont pas incluses dans le package
  • Utilisation de Webpack pour créer des versions distinctes pour le navigateur et le nœud
  • Créer un plugin pour le navigateur
  • Configuration importante de package.json
  • Publication sur NPM
Remarque: cet article a été initialement publié ici sur le blog Vue.js Developers le 31/07/2017.

Projet d'étude de cas: Vue Clock

J'ai créé ce composant d'horloge simple que je vais publier sur NPM. Ce n’est peut-être pas l’élément le plus cool que vous ayez jamais vu, mais c’est suffisant pour la démonstration.

Voici le fichier de composant. Rien n’est trop spécial ici, mais notez que j’importe la bibliothèque moment pour pouvoir formater l’heure. Il est important d’exclure les dépendances de votre paquet, que nous examinerons bientôt.

Outil clé: Webpack

La plupart de ce que je dois faire pour préparer ce composant pour NPM se fait avec Webpack. Voici la configuration de base de Webpack que je vais ajouter à cet article. Il ne devrait pas y avoir beaucoup de surprises si vous avez déjà utilisé Vue et Webpack:

Externes

L'option de configuration externals permet d'exclure les dépendances du groupe de sortie Webpack. Je ne veux pas que mon paquet inclue des dépendances car elles vont gonfler sa taille et potentiellement causer des conflits de version dans l’environnement de l’utilisateur. L'utilisateur devra installer les dépendances eux-mêmes.

Dans le projet d’étude de cas, j’utilise la bibliothèque moment comme dépendance. Pour m'assurer qu'il n'est pas intégré à mon package, je le spécifie en tant qu'externe dans ma configuration Webpack:

Environnement construit

Dans Vue.js, il existe deux environnements différents dans lesquels un utilisateur peut souhaiter installer un composant. Tout d'abord, le navigateur, par exemple

Deuxièmement, les environnements de développement basés sur Node.js, par ex.

Idéalement, je souhaite que les utilisateurs puissent utiliser Vue Clock dans les deux environnements. Malheureusement, ces environnements exigent que le code soit associé différemment, ce qui signifie que je devrai configurer deux versions différentes.

Pour ce faire, je vais créer deux configurations Webpack distinctes. C'est plus facile qu'il n'y paraît, car les configurations seront presque identiques. Je vais d’abord créer un objet de configuration commun, puis utiliser webpack-merge pour l’inclure dans les deux configurations d’environnement:

La configuration commune est identique à celle d’avant (j’ai abrégé la plupart d’entre elles pour économiser de l’espace), sauf que j’ai supprimé les options entry et output.filename. Je les spécifierai individuellement dans les configurations de construction séparées.

Paquet de navigateur

Les navigateurs ne peuvent pas importer des modules JavaScript à partir d’un autre fichier de la même manière qu’un nœud. Ils peuvent utiliser un chargeur de script tel qu'AMD, mais pour une facilité maximale, je veux permettre à mon script de composant d'être ajouté plus simplement en tant que variable globale.

De plus, je ne veux pas que l’utilisateur doive trop réfléchir pour savoir comment utiliser le composant. Je vais faire en sorte que le composant puisse facilement être enregistré en tant que composant global lorsque l'utilisateur inclut le script. Le système de plugins de Vue aidera ici.

Le résultat que je vise est cette configuration simple:

Brancher

Tout d’abord, je vais créer un wrapper de plugin pour permettre une installation facile du composant:

Ce plugin enregistre le composant globalement, afin que l'utilisateur puisse appeler le composant clock n'importe où dans leur application.

Configuration Webpack

Je vais maintenant utiliser le fichier de plugin comme point d’entrée pour la construction du navigateur. Je vais sortir dans un fichier appelé vue-clock.min.js car ce sera plus évident pour l'utilisateur.

Exporter en tant que bibliothèque

Webpack peut exposer votre script fourni de différentes manières, par exemple: en tant que module AMD ou CommonJS, en tant qu'objet, en tant que variable globale, etc. Vous pouvez le spécifier à l'aide de l'option libraryTarget.

Pour l’ensemble de navigateurs, j’utiliserai la cible de la fenêtre. Je pourrais également utiliser UMD pour plus de flexibilité, mais comme je crée déjà deux ensembles, je vais simplement limiter cet ensemble à une utilisation dans le navigateur.

Je vais également spécifier le nom de la bibliothèque comme "VueClock". Cela signifie que lorsqu'un navigateur inclut l'ensemble, celui-ci sera disponible en tant que fenêtre globale.VueClock.

Node bundle

Pour permettre aux utilisateurs d’utiliser le composant dans un environnement de développement basé sur un noeud, j’utiliserai la cible de la bibliothèque UMD pour l’ensemble de noeuds. UMD est un type de module flexible qui permet d'utiliser le code dans une variété de chargeurs de scripts et d'environnements différents.

Notez que le groupe de nœuds utilise le composant de fichier unique comme point d’entrée et n’utilise pas le wrapper de plug-in, car il n’est pas nécessaire. Cela permet une installation plus flexible:

package.json

Avant de publier sur NPM, je vais configurer mon fichier package.json. Une description détaillée de chaque option est disponible sur npmjs.com.

J'ai abrégé la majeure partie de ce fichier, mais les points importants à noter sont les suivants:

  1. Le fichier de script principal, c’est-à-dire "main": "dist / vue-clock.js". Ceci pointe le fichier de groupe de noeuds, en s'assurant que les chargeurs de modules savent quel fichier lire.

2. Dépendances. Comme j'ai exclu les dépendances du paquet, les utilisateurs doivent les installer pour pouvoir utiliser le paquet.

Publication sur NPM

Maintenant que mon composant est configuré correctement, il est prêt à être publié sur NPM. Je ne répéterai pas les instructions ici car elles sont décrites en détail sur npmjs.com.

Voici le résultat:

  • Code Github
  • Page NPM
Prenez un cours d'introduction à Vue.js gratuit! Découvrez ce que Vue est, quels types d'applications vous pouvez créer avec, comparez cela à React & Angular, et plus encore dans cette introduction vidéo de 30 minutes. Inscription gratuite!