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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
快速开发一个PHP扩展图文教程
2008/12/12 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
Python Deque 模块使用详解
2014/07/04 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
心理学专业毕业生推荐信范文
2013/11/21 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python