vue encapsule les plug-ins tiers et les publie sur des instances npm

Cet article présente principalement la méthode d'encapsulation des plug-ins tiers dans vue et de leur publication sur npm. Il explique principalement comment encapsuler des plug-ins tiers dans des plug-ins vue, simplifier la configuration et les installer avec. un clic. Il donne principalement des idées. Les méthodes de packaging sont similaires. L'article est un peu long donc soyez patient. L'éditeur le trouve plutôt bien, j'aimerais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

gitment

Gitment est un plug-in de commentaires basé sur l'empaquetage des problèmes github. Utilisez ce plug-in comme démonstration et encapsulez-le dans un plug vue. -dans. vue-gitment, le plug-in a été publié sur npm et installé dans son propre projet open source vueblog

Cette commande crée le répertoire de notre projet, crée des dossiers et des fichiers, et la structure finale est. comme ça

Le répertoire lib est notre répertoire de plug-ins, les autres valeurs par défaut sont simplement

vue init webpack-simple vue-gitment

Modifier les éléments de configuration

Tout d'abord, modifiez package.json

Ajoutez la dépendance gitment aux dépendances. Main est l'entrée du fichier une fois que nous l'avons empaquetée. peut utiliser la commande npm init pour générer un package.json

Modifier webpack.config.js

{
 "name": "vue-gitment",
 "version": "0.1.1",
 "description": "A comment plugin by gitment",
 "main": "dist/vue-gitment.js",
 "directories": {
  "dist": "dist"
 },
 "scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
 "repository": {
  "type": "git",
  "url": "git+https://github.com/vue-blog/vue-gitment.git"
 },
 "dependencies": {
  "gitment": "^0.0.3",
  "vue": "^2.3.3"
 },
 "devDependencies": {
 },
 "author": "wmui",
 "license": "MIT",
 "bugs": {
  "url": "https://github.com/vue-blog/vue-gitment/issues"
 },
 "homepage": "https://github.com/vue-blog/vue-gitment#readme"
}

Il suffit de configurer l'entrée et la sortie, ne supprimez pas la configuration par défaut, car une fois le plug-in développé ultérieurement, nous devons vérifier l'effet de fonctionnement

Modifier index.html

Comme nous avons modifié la configuration du webpack, nous devons naturellement modifier le src du script

Emballage du plug-in

Le contenu de VueComment.vue est le suivant

Je pense que toute personne familière avec vue peut le comprendre d'un coup d'œil, le la fonction render est une méthode de l'objet gitment, ne vous inquiétez pas, c'est la même chose que le composant que nous développons

composant encapsulé index.js

<template>
 <p v-comment="options"></p>
</template>
<script>
// 引入依赖项
import Gitment from &#39;gitment&#39;
export default {
 name: &#39;vue-comment&#39;,
 props: [&#39;options&#39;],
 directives: {
  // 自定义指令
  comment: {
   bind: function (el, binding) {
    const gitment = new Gitment({
     id: binding.value.id + &#39;&#39;,
     owner: binding.value.owner,
     repo: binding.value.repo,
     oauth: {
      client_id: binding.value.oauth.client_id,
      client_secret: binding.value.oauth.client_secret
     }
    })
    gitment.render(el)
   }
  }
 }
}
</script>

Le fichier d'entrée que nous configurons dans webpack est lui install est la méthode de montage des composants avec lui, nous pouvons utiliser un plug-in en externe

Tester le plug. -in

import VueComment from './VueComment.vue'
const comment = {
 install: function(Vue) {
  Vue.component(VueComment.name, VueComment)
 }
}
// 这里的判断很重要
if (typeof window !== 'undefined' && window.Vue) { 
  window.Vue.use(comment) 
}
export default comment

Testez d'abord si la construction est réussie

Les fichiers suivants seront générés dans le répertoire

Félicitations, continuez Descendez et testez si le plug-in fonctionne correctement

npm run builddist

Nous devons modifier le package et le webpack C'est pourquoi j'ai dit plus tôt de ne pas supprimer mais. pour commenter et changer le principal de package.json en dist/build js, l'entrée et le nom de fichier de wepack sont remplacés par la configuration par défaut, et le src de index.html est également modifié par défaut

Introduisez notre composant dans main.js

Utilisez notre plug-in dans App.vue

import VueComment from './lib/index.js'
Vue.use(VueComment)

Exécuter

<template>
 <p id="app">
  <vue-comment :options="options" v-if="options"></vue-comment>
 </p>
</template>
<script>
export default {
 name: &#39;App&#39;,
 data() {
  return {
   options: {
    id: &#39;article id&#39;,
    owner: &#39;Your GitHub ID&#39;,
    repo: &#39;The repo to store comments&#39;,
    oauth: {
     client_id: &#39;Your client ID&#39;, 
     client_secret: &#39;Your client secret&#39;,
    } 
   }
  }
 }
}
</script>
<style>
  @import &#39;~gitment/style/default.css&#39;;
</style>

Haha, ça fonctionne normalement, Erreur : Non trouvé c'est parce que je n'ai pas configuré client_id.

npm run dev

Publier le plug-in

Après avoir terminé le travail de test, nous pouvons le publier sur npm. C'est plus visible. Enregistrez un compte npm et publiez-le. lorsque vous souhaitez exécuter la connexion npm dans le répertoire du projet, entrez le mot de passe et l'adresse e-mail de votre compte, puis npm submit sera publié avec succès. Pour vérifier l'effet, npm install vue-gitment est recommandé de consulter le code source. directement, car c'est vraiment simple.

Conclusion

Faites-le vous-même, je pense que chaque développeur front-end a besoin de sa propre roue (même si vue-gitment n'est pas une roue), a Appartenez à votre propre roue et vous pouvez apprendre beaucoup de choses en fabriquant des roues.

Recommandations associées :
Résumé de ThinkPHP à l'aide de la méthode de plug-in tiers Smarty

Crypter par lots les fichiers php sans tiers plug-in

Que dois-je faire si le plug-in Datepicker de référence Vue ne peut pas surveiller la valeur de la zone de saisie du sélecteur de date

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!