vue封裝第三方外掛併發布到npm

wmui發表於2017-09-24
Vue封裝NPM

前言

寫此文前特意google了一下，因為有較詳細的開發教程我再寫意義不大，有把外掛封裝成元件的教程，有把自己的元件封住成外掛的教程，本文主要說明如何把第三方的外掛封裝成vue外掛，簡化配置，一鍵安裝，主要提供思路，封裝方法大同小異·，文章略長要有耐心。

gitment

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

專案初始化

封裝vue的外掛用webpack-simple很合適，vue init webpack-simple vue-gitment此命令建立我們的專案的目錄，建立資料夾和檔案，最後結構是這樣的

vue封裝第三方外掛併發布到npm

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

vue封裝第三方外掛併發布到npm

我們只需配置入口和出口，不要刪除預設的配置，因為後面開發好外掛，我們需要檢視工作效果

修改index.html

vue封裝第三方外掛併發布到npm

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

封裝外掛

VueComment.vue內容如下

<template>
  <div v-comment="options"></div>
</template>
<script>
// 引入依賴項
import Gitment from 'gitment'
export default {
  name: 'vue-comment',
  props: ['options'],
  directives: {
    // 自定義指令
    comment: {
      bind: function (el, binding) {
        const gitment = new Gitment({
          id: binding.value.id + '',
          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 './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
複製程式碼

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

測試外掛

首先測試build是否成功
npm run builddist目錄會生成如下檔案

vue封裝第三方外掛併發布到npm
可喜可賀，接下來測試外掛是否正常工作
我們需要把package和webpack的修改一下，這就是為什麼我前面說不要刪除而是註釋掉 ，把package.json的main修改為dist/build.js，wepack的entry和filename換成預設配置，index.html的src也換成預設的
在main.js中引入我們的元件

import VueComment from './lib/index.js'
Vue.use(VueComment)
複製程式碼

App.vue中使用我們的外掛

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

執行npm run dev

vue封裝第三方外掛併發布到npm
哈哈，它正常工作了，Error: Not Found是因為我沒配置client_id。

釋出外掛

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

結語

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

相關文章