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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
Koa日志中间件封装开发详解
Mar 09 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
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
php微信公众号开发之简答题
2018/10/20 PHP
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
详解微信第三方小程序代开发
2017/06/23 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
Python实现115网盘自动下载的方法
2014/09/30 Python
Python中实现的RC4算法
2015/02/14 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
美国网上书店:Barnes & Noble
2018/08/15 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
企业标语大全
2014/07/01 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript