自定义vue组件发布到npm的方法


Posted in Javascript onMay 09, 2018

本文介绍了自定义vue组件发布到npm的方法,分享给大家,具体如下:

为什么会有这个想法呢,主要是vue项目中自定义的组件在多个项目中使用。导致修改bug的时候,总是要在项目分支中修改,然后同步到主线上,这样容易导致分支修改后没有同步到主线,慢慢的就会导致组件版本不统一,而导致升级组件很繁琐,最后可能都要去维护多个组件的不同版本,这样不是我们想要的。

所以就打算将组件打包发布到npm上,每个项目中只需要在package.json中修改组件版本即可同步最新版本。

组件发布历程

1、开始对打包不是很了解,只是简单的将原有.vue文件以及相关的css、image资源进行提取,然后放到一个项目下,下面是发布组件到npm的详细步骤:

(1)新建组件项目,通过npm init来初始化一个package.json文件
(2)将提取出来的组件放到项目路径。
(3)在package.json所在目录,执行npm adduser。这里需要注册npm帐号
(4)然后要求输入用户名、密码、注册时填的邮箱。如图:

自定义vue组件发布到npm的方法

(5)然后输入npm publish即可。

如果不出以外,组件就已经发布成功了,可以通过npm install xxxx来进行安装了。

2、在使用过程中发现了一些小问题。由于当时在index.js中使用了es6的部分语法(如:数组的map、const),导致在低版本ie中会报错,虽然可以通过修改js来解决。但是作为一个有理想有抱负的码农,这种事情不能忍,因为想element-ui这些组件都是可以将.vue文件打包之后发布的。然后就想着也要弄好了。

3、然后就开始研究怎么能通过import xx from xxx即可实现加载打包后的js。通过查找资料,发现是通过package.json中有个main属性来设置加载js的路径。如图:

自定义vue组件发布到npm的方法

4、加载问题解决了,剩下就是打包问题了。由于打包需要一些webpack的配置,所以直接用vue-cli初始化了一个工程,对其中的webpack进行调整。主要是去掉build中打包配置文件webpack.prod.conf.js,这里去掉HtmlWebpackPlugin等。

https://github.com/myGitZone/mapModule 这里是示例,该项目只是一个demo。

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

Javascript 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
Vue3.0的优化总结
Oct 16 Javascript
React Navigation 使用中遇到的问题小结
May 08 #Javascript
官方推荐react-navigation的具体使用详解
May 08 #Javascript
JavaScript callback回调函数用法实例分析
May 08 #Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 #Javascript
vue-cli 引入、配置axios的方法
May 08 #Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 #Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 #Javascript
You might like
yii使用bootstrap分页样式的实例
2017/01/17 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
React 组件间的通信示例
2018/06/14 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
Vue多选列表组件深入详解
2021/03/02 Vue.js
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
Django admin美化插件suit使用示例
2017/12/12 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
python中round函数如何使用
2020/06/19 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
关于感恩的演讲稿500字
2014/08/26 职场文书
二胎满月酒致辞
2015/07/29 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis