首頁 > 文章 > web前端 > vue封裝第三方外掛程式並發佈到npm實例

vue封裝第三方外掛程式並發佈到npm實例

小云云原創: 2018-02-01 10:47:472357瀏覽

本文主要和大家介紹了vue封裝第三方插件並發佈到npm的方法，主要說明如何把第三方的插件封裝成vue插件，簡化配置，一鍵安裝，主要提供思路，封裝方法大同小異·，文章略長要有耐心。小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

gitment

gitment是一個基於github issues封裝的評論插件，以這個插件作為演示，把它封裝成vue插件。 vue-gitment，該外掛程式已發佈到npm,並在自己的開源專案vueblog中安裝使用

專案初始化

##封裝vue的外掛程式用webpack -simple很合適，

vue init webpack-simple vue-gitment此命令創建我們的專案的目錄，創建資料夾和文件，最後結構是這樣的

lib目錄是我們的外掛目錄，其他的預設就好

#修改組態項目

先修改package.json

{
 "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"
}

把依賴性gitment加到dependencies，main是我們打包後的檔案入口，你可以用npm init指令產生一個package.json

#修改webpack.config.js

我們只需配置入口和出口，不要刪除預設的配置，因為後面開發好插件，我們需要查看工作效果

修改index.html

#因為我們修改了webpack配置，自然要把script的src修改一下

封裝外掛程式

VueComment.vue內容如下

<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>

相信熟悉vue的一眼都看懂了，render函數是gitment物件的方法，不用關心，跟我們開發元件是一樣一樣的

index.js封裝元件

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

我們在webpack配置的入口檔案就是他，install是掛載元件的方法，有了它我們就可以在外部use一個插件了，簡單吧

測試外掛程式

先測試build是否成功

npm run builddist

目錄會產生下列檔案

#可喜可賀，接下來測試外掛程式是否正常運作

我們需要把package和webpack的修改一下，這就是為什麼我前面說不要刪除而是註解掉，把package.json的main修改為dist/build.js，wepack的entry和filename換成預設配置，index.html的src也換成預設的

在main.js中引入我們的元件

import VueComment from &#39;./lib/index.js&#39;
Vue.use(VueComment)

App.vue中使用我們的外掛程式

<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>

執行

npm run dev

哈哈，它正常運作了，Error: Not Found是因為我沒有設定client_id。

發布外掛

完成測試工作後我們就可以發佈到npm了，這個就比較見到了，註冊個npm帳號，在你要發布的專案目錄執行npm login，輸入帳號密碼和郵箱，然後npm publish就發布成功了，npm install vue-gitment查看效果，建議直接看原始碼，因為真的很簡單。

結語

自己動手豐衣足食，我覺得每個前端開發者都要一個屬於自己的輪子(雖然vue-gitment不是輪子)，一個屬於自己輪子，在造輪子的工程中你能學到很多很多。

vue封裝第三方外掛程式並發佈到npm實例

相關文章