自定义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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
使用js实现数据格式化
Dec 03 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
微信小程序实现搜索历史功能
Mar 26 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
JavaScript使用cookie
2007/02/02 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python实现调度算法代码详解
2017/12/01 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python之array赋值技巧分享
2019/11/28 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
求职推荐信范文
2013/12/01 职场文书
银行办理业务介绍信
2014/01/18 职场文书
工作迟到检讨书
2014/02/21 职场文书
矿泉水广告词
2014/03/20 职场文书
计算机求职信
2014/07/02 职场文书
小学生表扬稿范文
2015/05/05 职场文书
神州牡丹园的导游词
2019/11/20 职场文书