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 相关文章推荐
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 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 已经成熟
2006/12/04 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php实现Mysql简易操作类
2015/10/11 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python 删除非空文件夹的实例
2018/04/26 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
会计自荐书
2013/12/02 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
公司应聘求职信
2014/06/21 职场文书
班组长安全工作职责
2014/07/15 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
裁员通知
2015/04/25 职场文书
小学教学工作总结2015
2015/05/13 职场文书