自定义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 相关文章推荐
通过jQuery源码学习javascript(二)
Dec 27 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 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
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
php构造函数与析构函数
2016/04/23 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
纯JS实现轮播图
2017/02/22 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python入门篇之字符串
2014/10/17 Python
python中split方法用法分析
2015/04/17 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
python版飞机大战代码分享
2018/11/20 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
致裁判员加油稿
2014/02/08 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书