发布一款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 suggest效果 自动完成实现代码分享
Feb 17 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
js读取cookie方法总结
Oct 31 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 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
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python如何实现代码检查
2019/06/28 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
参观接待方案
2014/03/17 职场文书
2014年社区工作总结
2014/11/18 职场文书
2015年林业工作总结
2015/05/14 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技