发布一款npm包帮助理解npm的使用


Posted in Javascript onJanuary 03, 2019

npm 在前端工程化中扮演着不可或缺的角色,前端工程师每天通过npm安装项目依赖,通过npm发布自己的包,更新包,通过npm 脚本运行开发环境,打包等。

平时专注于实现业务,一直没有去了解一款包的发布流程,忙里偷闲,今天就体验下编写并发布一个package的过程,记录下来分享给大家。

一个包诞生的过程无非是:编写-测试-发布-迭代-测试-发布...,

初始化项目

mkdir math-tool_demo 新建文件夹

npm init初始化package.json文件,根据提示输入项目信息:

  • package name项目名
  • version 版本
  • description 描述
  • entry point 入口文件
  • test command 测试命令
  • git repository git仓库地址
  • keywords 关键字信息
  • author 作者
  • 协议等

发布一款npm包帮助理解npm的使用

npm init -y:添加 -y 标志,直接默认生成.

编写包里的代码

包含的功能:我们实现一个加减乘除的小工具。

新建index.js入口文件

module.exports = {
  add:add,
  minus:minus
}
function add(num1,num2) {
  if(typeof num1 === 'number' && typeof num2 === 'number'){
    return num1 + num2;
  }else{
    throw('arguments must be number')
  }
  
}
function minus(left,right){
  if(typeof left === 'number' && typeof right === 'number'){
    return left - right;
  }else{
    throw('arguments must be number')
  }
}

测试

测试无非就是引入编写的模块,并运行测试用例,此处不再多说。

发布

npm login 登录。输入账户密码邮箱,如果你没有账户,先申请:链接。

 发布一款npm包帮助理解npm的使用

npm publish:发布编写的包

失败:命名重复或类似: 修改一下包名。

发布一款npm包帮助理解npm的使用

再次发布:npm publish:成功了!默认版本为1.0.0

发布一款npm包帮助理解npm的使用

如何迭代发布的包

包发布出去了,bug是无法避免的,当然作者也会考虑扩展功能,修复bug或功能迭代需要将代码修改同步到远程仓库。

修改代码

比如做出了下述的修改:

module.exports = {
  add:add,
  minus:minus
}
function add() {
  var left = arguments[0];
  var right = arguments[1];
  if(typeof left === 'number' && typeof right === 'number'){
    return left + right;
  }else{
    throw('arguments must be number')
  }
  
}
function minus(){
  var left = arguments[0];
  var right = arguments[1];
  if(typeof left === 'number' && typeof right === 'number'){
    return left - right;
  }else{
    throw('arguments must be number')
  }
}

修改版本号

我们可以直接改package.json里的version字段值.

不过最好还是使用npm 提供的命令修改版本号(比如当前为v1.0.0):

  • npm version patch-->1.0.1:属于小修改,不更改功能使用
  • npm version minor-->1.1.0:可能添加了一些功能,不影响以前的使用。
  • npm version major-->2.0.0:可能改了API,输入大范围的修改。

详细移步:关于npm语义版本

发布

npm publish

如何使用发布的包

  • 到npm仓库搜索包名
  • 然后,输入npm install packageName -S [-D ]分别作为依赖或开发依赖

下面以我们刚发布的包为例:

首次使用该包
npm install -S math-tool_demo 安装刚刚发布的包

在index.js里引入并使用:

var math = require('math-tool_demo')
var addRes = math.add(1,2);
var minusRes = math.minus(1,2);

console.log(
  addRes,
  minusRes,
)//输出:3,-1

正在使用,该包可能已经迭代更新

npm outdated检查每个定义在项目package.json中包在远程仓库是否有新版本

发布一款npm包帮助理解npm的使用

发现有新版本,目前使用的是1.0.0,最新的是2.0.0。

npm update [packageName]更新包

发布一款npm包帮助理解npm的使用

敲完,发现没反应,并没有更新包。

查看package.json中包的依赖定义

发布一款npm包帮助理解npm的使用

有三种版本定义:

  • 直接写准确的版本号:比如:1.0.0
  • 大版本不动,有功能更新则用新版本:^1.0.0
  • 更保守一点,只能小幅更新如bug修复等:~1.0.0

^1.0.0意为>=1.0.0 < 1.2.0

~1.0.0意为>=1.0.0 < 1.1.0

因此更新到2.0.0的是不允许的,只能手动更改package.json中的版本号,并更新了。

为何弄成这样?因为第一个数字意味着major改动,贸然的更新可能会带来无法预计的后果

传送门:npm-outdated,npm-update

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

Javascript 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 #Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 #Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 #Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 #Javascript
如何使用less实现随机下雪动画详解
Jan 02 #Javascript
详解Vue2 添加对scss的支持
Jan 02 #Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 #Javascript
You might like
第五章 php数组操作
2011/12/30 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
JS 表单验证大全
2011/11/23 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
JS验证字符串功能
2017/02/22 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
小程序实现多选框功能
2018/10/30 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python列表推导式与生成器用法分析
2018/08/02 Python
python生成n个元素的全组合方法
2018/11/13 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
大学应届毕业生求职信
2014/05/24 职场文书
政风行风整改报告
2014/11/06 职场文书
培根随笔读书笔记
2015/07/01 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript