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 location.replace与location.reload的区别
Sep 08 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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+oracle 分页类
2006/10/09 PHP
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
Array对象方法参考
2006/10/03 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python数据类型详解(一)字符串
2016/05/08 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
Python3远程监控程序的实现方法
2019/07/15 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
简历自荐信
2013/12/02 职场文书
校园演讲稿汇总
2014/05/21 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers