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

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 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 publish:发布编写的包

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

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

如何迭代发布的包

包发布出去了,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中包在远程仓库是否有新版本

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

npm update [packageName]更新包

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

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

有三种版本定义:

  • 直接写准确的版本号:比如: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-outdatednpm-update

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

(0)

相关推荐

  • 详解如何制作并发布一个vue的组件的npm包

    前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程 一.书写一个vue组件 不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he

  • 使用typescript开发angular模块并发布npm包

    本文介绍了使用typescript开发angular模块并发布npm包,分享给大家,具体如下: 创建模块 初始化package.json文件 执行命名 npm init -y 会自动生成package.json文件如下,name默认为文件夹名称 { "name": "MZC-Ng-Api", "version": "1.0.0", "description": "", "mai

  • Nodejs 发布自己的npm包并制作成命令行工具的实例讲解

    <span style="font-family:Arial, Helvetica, sans-serif;background-color:rgb(255,255,255);">近日当我在使用npm上已经存在的一个包时,发现它有bug:于是决定自己实现这个功能,自己写一个npm包.</span> 下面我记录一下自己的实现过程. 1. npm init 选择一个文件夹,然后用命令行cd进去,然后执行npm init,这时会生成一长串表单,根据自己的实际情况填写内

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

    npm 在前端工程化中扮演着不可或缺的角色,前端工程师每天通过npm安装项目依赖,通过npm发布自己的包,更新包,通过npm 脚本运行开发环境,打包等. 平时专注于实现业务,一直没有去了解一款包的发布流程,忙里偷闲,今天就体验下编写并发布一个package的过程,记录下来分享给大家. 一个包诞生的过程无非是:编写-测试-发布-迭代-测试-发布..., 初始化项目 mkdir math-tool_demo 新建文件夹 npm init初始化package.json文件,根据提示输入项目信息: pa

  • 基于vue如何发布一个npm包的方法步骤

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础,了解一点 webpack Are you ready? Go! 一.编写自己的npm包 1. 新建一个空文件夹 2. 进入文件夹,终端(cmd)运行 npm init 完成后会在目录下生成一个 package.json 文件 我们可以根据自己的需要补充文件内容 这是我的: { "name"

  • Vue.js构建你的第一个包并在NPM上发布的方法步骤

    本文我们将学习如何制作一个vue插件,并将其分发到npm上,能够让其他人安装使用. 插件大大地提高了开发者的开发效率.我们的大多数项目都依赖于它们,因为它们能够以极快的速度发布新功能. 正如官方Vue.js文档中所述,插件的范围没有限制.通常我们想实现的功能有下面5种: 添加全局方法或者属性 (如: vue-custom-element) 添加全局资源:指令/过滤器/过渡等 (如:vue-touch) 通过全局 mixin 方法添加一些组件选项 (如:vue-router) 添加 Vue 实例方

  • 使用Vue-cli3.0创建的项目 如何发布npm包

    在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建index.js进行模块的导出 将我们需要导出的组件在index.js文件中进行统一导出,可能之前需要进行处理,是先进行全局注册Vue.component,还是用户自己注册. import App from './App.vue' export default App; 修改vue.config.js配置文件 修改publicPath的路径为相对路径 mod

  • vue3+vite自定义封装vue组件发布到npm包的全过程

    目录 创建项目 创建组件 导出组件 使用vite构建 打包 注册->登录npm 发布前准备 发布到npm 参考: 总结 创建项目 “vue”: “^3.2.8” “vite”: “^2.5.2” 习惯用HB的直接用创建vue3项目即可 或 npm init vite@latest 创建组件 打开项目 在src/components文件夹下新增文件,我这里叫TestBtn.vue <template> <button>我是测试要发布的按钮组件</button> &l

  • Node.js的npm包管理器基础使用教程

    配置 npm set npm set init-author-name 'Your name' npm set init-author-email 'Your email' npm set init-author-url 'http://yourdomain.com' npm set init-license 'MIT' 上面命令等于为npm init设置了默认值,以后执行npm init的时候,package.json的作者姓名.邮件.主页.许可证字段就会自动写入预设的值.这些信息会存放在用户

  • 一文带你了解前端包管理工具npm、yarn和pnpm

    目录 为什么需要包管理工具? 版本管理规范 前端主流包管理工具 yarn vs npm vs pnpm 包管理工具安装和版本切换 安装项目依赖 npm .yarn 和 pnpm 常用命令 安全性 lock 文件 性能对比 pnpm 的优势 总结 为什么需要包管理工具? 每种主流编程语言都有包管理工具,比如 java 的 Maven.Gradle,Python 的 pip,nodejs 的 npm.yarn.pnpm 等. 包管理工具的主要作用是管理第三方依赖,也可以看成一个"轮子"工厂

随机推荐