vue封装第三方插件并发布到npm的方法


Posted in Javascript onSeptember 25, 2017

前言

写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心。

gitment

gitment是一个基于github issues封装的评论插件,以这个插件作为演示,把它封装成vue插件。vue-gitment,该插件已发布到npm,并在自己的开源项目vueblog中安装使用

项目初始化

封装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不是轮子),一个属于自己轮子,在造轮子的工程中你能学到很多很多

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
用js实现的页面关键字密度查询代码
Dec 27 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 #Javascript
vue-cli中的webpack配置详解
Sep 25 #Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 #Javascript
react native与webview通信的示例代码
Sep 25 #Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 #Javascript
vuex中使用对象展开运算符的示例
Sep 25 #Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 #Javascript
You might like
php获取当前时间的毫秒数的方法
2014/01/26 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
webpack源码之loader机制详解
2018/04/06 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python实现同一局域网下传输图片
2020/03/20 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
高中地理教学反思
2014/01/29 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
利群广告词
2014/03/20 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
赔偿协议书范本
2014/09/12 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书