发布一款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 相关文章推荐
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
vue $mount 和 el的区别说明
Sep 11 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/09/11 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
javascript 闭包
2011/09/15 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
Python logging模块原理解析及应用
2020/08/13 Python
Python中qutip用法示例详解
2020/10/02 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
《鸟岛》教学反思
2014/04/26 职场文书
百日安全活动总结
2014/05/04 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Linux磁盘管理方法介绍
2022/06/01 Servers