自定义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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
js 异步处理进度条
Apr 01 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
jquery radio 操作代码
Mar 16 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
取选中的radio的值
2010/01/11 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
利用js实现简易红绿灯
2020/10/15 Javascript
python matlibplot绘制3D图形
2018/07/02 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python datetime模块使用方法小结
2020/06/18 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
委托书格式要求
2015/01/28 职场文书
财务会计岗位职责
2015/02/03 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
对学校的意见和建议
2015/06/04 职场文书
会议简讯范文
2015/07/20 职场文书
环境卫生整治简报
2015/07/20 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS