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不是輪子)，一個屬於自己輪子，在造輪子的工程中你能學到很多很多，沒錯，接下來我可能，，，哼哼

來源：https://juejin.im/post/59c7c3436fb9a00a600f7899

相關文章