如何发布一个 npm 包

news2024/11/17 16:26:25

前言

npm(node package manager)作为 Node.js 的包管理工具,让世界各地的 JavaScript 开发者方便复用、分享代码以及造轮子;本文将介绍如何发布一个 npm 包,以及使用工具来自动化管理发布 npm 包;本文总览如下:

  1. 准备 npm 账号 & 示例包代码;
  2. 初始化 & 配置 package.json 文件;
  3. 确定发布的包版本;
  4. 发布 npm 包;
  5. 使用 cli 工具 release-it 来自动管理版本、发布包等;
  6. 学习 npm init release-it 原理。

准备

本地需要安装 Node.js 及 npm CLI,npm 将随 Node.js 一起安装,建议使用 Node 版本管理工具来安装 Node,例如 nvm 、n。

注册 npm 账号

第一步先到 npm 注册个账号 www.npmjs.com/signup,跟着注册步骤操作就行。

示例包代码

为了整个流程相对完整,创建个 github 仓库存放代码(本文代码仓库);将仓库克隆到本地后,新建 index.js 文件,这里我们随便搞点工具函数来作为示例。

// index.js  copy from @vue/shared
export const isArray = Array.isArray;
export const isMap = (val) => toTypeString(val) === "[object Map]";
export const isSet = (val) => toTypeString(val) === "[object Set]";
export const isDate = (val) => toTypeString(val) === "[object Date]";
export const isRegExp = (val) => toTypeString(val) === "[object RegExp]";
export const isFunction = (val) => typeof val === "function";
export const isString = (val) => typeof val === "string";
export const isSymbol = (val) => typeof val === "symbol";
export const isObject = (val) => val !== null && typeof val === "object";
export const toTypeString = (val) => Object.prototype.toString.call(val)

复制代码

创建 & 配置 package.json

要发布一个 npm 包,需要创建一个 package.json 文件,用来描述包信息及依赖包。使用 npm init -y 命令创建一个默认的 package.json 文件,默认生成内容如下:

{
  "name": "utils", // 包名,必填且唯一
  "version": "1.0.0", // 版本号,必填,需遵循语义化版本规范
  "description": "", // 包描述信息,利于包检索
  "main": "index.js", // 入口文件,不设置默认为根文件夹下的 index.js
  "scripts": { // 脚本命令
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": { // 项目代码仓库
    "type": "git",
    "url": "git+https://github.com/jizai1125/joker1125-utils.git"
  },
  "keywords": [], // 关键字,利于包检索
  "author": "", // 作者信息
  "license": "ISC", // 许可证协议
  "bugs": { // 问题反馈地址
    "url": "https://github.com/jizai1125/joker1125-utils/issues"
  },
  // 项目主页
  "homepage": "https://github.com/jizai1125/joker1125-utils#readme"
}
复制代码

修改为如下,这里只填写了一些字段,根据项目需要配置。

{
  "name": "@joker1125/utils", // 这里为了避免包名冲突,加上命名空间 joker1125
  "version": "1.0.0",
  "description": "js utility functions", 
  "keywords": ["utils", "js-utils"],
  "main": "index.js",
  "author": "joker1125",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jizai1125/joker1125-utils.git"
  },
  "author": "joker1125",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jizai1125/joker1125-utils/issues"
  },
  "homepage": "https://github.com/jizai1125/joker1125-utils#readme"
}
复制代码

要发布一个npm 包,name 和 version 字段是必填的;

包名(name 字段)命名规则:

  • 包名长度不能超过 214 个字符(命名空间也算在里面);
  • 包名所有字符必须小写;
  • 包名可以由连字符 - 组成;
  • 包名不能包含空格,不能以 . 或者 _ 开头,不能包含 ~)('!* 中的任意一个字符;
  • 包名不能包含任何非 url 安全字符(因为包名将作为 url 的一部分);
  • 包名不能与 Node.js / io.js 的核心模块、保留字或黑名单相同,例如 http

可以使用 validate-npm-package-name 包来检查包名是否合法

版本号(version 字段)则需要遵循 semver 规范。

可以使用 node-semver 来检查

扩展阅读:

  • npm Docs - package.json
  • New Package Moniker rules 译文 新的包名规则
  • semver 规范

确定版本号

填写好 package.json 字段后,接下来就是确定我们要发布的版本号,每次对包的更改都应该对应一个版本。

版本号格式

格式:MAJOR.MINOR.PATCH ,值非负整数,且禁止在数字前面补 0

  • MAJOR:主版本号
  • MINOR:次版本号
  • PATCH::修订号

版本号递增逻辑

  • 当有破坏性不兼容的 API 变更时,升级主版本号
  • 当新增一些功能特性时,升级次版本号
  • 当做一些 bug 修复时,升级修订号

当某个版本还不稳定的时候,还可能要先发布一个先行版本,具体可看 semver 规范。

可以使用 npm version 命令来修改版本号

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
复制代码

栗子 🌰

# 0.0.0 => 0.0.1
npm version patch
# 0.0.0 => 0.1.0
npm version minor
# 0.0.0 => 1.0.0
npm version major
# 0.0.0 => 0.0.1-0
# === 先行版本 ===
npm version prepatch
# 0.0.0 => 0.0.1-alpha.0
npm version prepatch --preid=alpha
# 0.0.1-alpha.0 => 0.0.1-alpha.1
npm version prerelease
复制代码

命令行选项:

  • --preid 指定先行版本的标识符,例如 1.2.3-rc.4 中的 rc
  • -m 或 --message 可以指定 commit 信息,例如 npm version patch -m "Upgrade to %s for reasons” ;
  • -no-git-tag-version 取消创建 git tag 和 commit 信息
  • ...

其他说明:

  • 执行 npm version 命令时,会修改 package.jsonpackage-lock.jsonversion 字段为对应版本;若当前使用 git 来管理文件,还会创建一条 commit 信息和创建一个 tag,可通过指定 -no-git-tag-version 取消生成 commit 和 tag。
  • 执行 npm version 前,git 工作区和暂存区确保没有文件,否则会执行失败。

相关地址:

  • npm CLI - npm version
  • npm semver 版本号在线测试工具

发布 npm 包

npm 登录 & 确定源地址

使用 npm login 命令登录,如下图

因为我们要发布到官方源上面,所以要确保源地址为官方地址 http://registry.npmjs.orghttps://registry.npmjs.com,可以通过 npm config get registry 命令查看当前 registry 源。

如需修改 registry 可通过以下四种方式:

  1. 在全局配置 .npmrc ,可通过命令 npm config set registry= http://registry.npmjs.org/

  2. 在当前项目配置,在当前项目中添加配置文件 .npmrc

    // .npmrc
    registry = http://registry.npmjs.org/
    复制代码
  3. 发布包时指定 --registry 选项,npm publish —registry=http://registry.npmjs.org/

  4. 在当前项目的 package.json 中通过 publishConfig 字段指定。

    // package.json
    {
      ”publicConfig“: {
        "registry": "http://registry.npmjs.org/"
      } 
    }
    复制代码

发布版本

通过命令 npm publish 发布包

npm publish --access public
复制代码

本文示例使用的命名空间为 joker1125 ,在发布时需要指定声明为公有包,因为发布带有命名空间的包 npm 会默认为是要发布私有包,发布私有包需要另外付费的哦!

这里我们通过命令行选项 --access public 声明为公有包,也可通过 package.json 中的 publicConfig 字段配置声明。

以上就是手动发布一个最简单的 npm 包的大致步骤,下面我们借助 cli 工具 release-it 来自动发布。

扩展阅读:

  • npm Docs - Publishing scoped packages

使用 cli 工具 release-it

release-it 工具可以用来升级包版本、生成 changgelog、Git commit \ tag \ push、发布包等。

在项目中运行命令 npm init release-it , 如下:

选择完之后将会自动安装 release-it 包、在 package.json 中加入脚本命令 "release": "release-it”、及生成一个 .release-it.json 初始配置文件。

.release-it 添加以下配置(查看更多配置见 release-it - Configuration),并安装生成 changelog 的插件npm i @release-it/conventional-changelog -D

{
  "github": {
    "release": true
  },
  "git": {
    "commitMessage": "Release: v${version}"
  },
  "plugins": {
    "@release-it/conventional-changelog": {
      "preset": "angular",
      "infile": "CHANGELOG.md"
    }
  }
}
复制代码

因我们发布的包带有命令空间,所以还需要在 package.json 中添加如下配置,声明一下为公有包

{
    "publishConfig": {
        "access": "public"
    }
}
复制代码

然后运行命令 npm run release ,跟着步骤操作选择,之后就会自动生成 changelog、修改包版本、git commit 信息、打 tag、创建 github release、发布包;如下图,至此就完成了 npm 包的自动发布。

npm init release-it 原理

我们前面使用npm init 创建了一个 pakage.json 文件,其实 init 后面还可以接一个参数 <initializer>,该命令格式为:

# npm v6 版本给该命令添加了别名 npm create
npm init <initializer>
复制代码

initializer 是名为 create-<initializer> 的 npm 包 ( 例如 create-react-app , create-vite ),如果缺省该参数的话(也就是只运行 npm init),就会回退到 init 的默认行为,即询问一系列问题,然后创建 package.json 文件,当然我们加上 -y / --yes 参数,就会跳过这些问题。

执行 npm init <initializer> 将会被转换为对应的 npm exec 操作,即会使用 npm exec 来运行 create-<initializer> 包。例子:

# 使用 create-react-app 包创建一个名为 my-react-project 的项目
$ npm init react-app ./my-react-project
# 等同于
$ npm exec create-react-app ./my-react-project
# 等同于
$ npx create-react-app ./my-react-project
复制代码

init 命令在 npm 版本中的区别:

  • v6.x: 会使用 npx 安装该包,并执行该包的 bin。
  • v7+: 使用 npm exec 命令安装该包,并执行该包 bin。

npx 命令介绍:

用于运行 npm 包的命令(本地未安装要运行的包则从远程拉取),例如执行 npx create-vite my-vite-app,如果本地没有安装过 create-vite,则会先从远程拉取安装 create-vite ,然后执行 create-vite my-vite-app

啰嗦这么一大推,回到我们执行的 npm init release-it ,具体发生了什么呢?

  1. 使用 npx / npm exec 执行 create-release-it 包的 bin,本地未安装则先拉取该包;

  2. create-release-it 的 bin 字段指向 index.js 文件,

    index.js 脚本做的事情:

    • 首先先询问一些问题,然后将配置写入 .release-it.json 文件或 package.json 中;
    • 接着在 package.json 中加入脚本命令 "release": "release-it”
    • 最后执行安装 release-it 包。

总结

通过本文的学习,了解如何发布一个 npm 包,以及利用 release-it 工具自动化管理版本号、发布、生成 changelog、git tag 等;最后学习了 npm init release-it 原理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/55295.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java代码审计——WebGoat CSRF (上)

目录 前言&#xff1a; &#xff08;一&#xff09;CSRF 0x01、简单介绍 0x02、实际案例 1&#xff0e;对 Referer 过滤不严导致的 CSRF 漏洞 2&#xff0e;token 可重用导致 CSRF 漏洞 3、webGoat中的CSRF 0x03 防御 3.1 STP 3.2 检查 Referer 字段 3.3 检查 Referer…

GMO Research 2022年旅游调查:旅游业有望强劲增长

GMO Research (TOKYO: 3695)最近进行的一项旅行调查显示&#xff0c;随着边境再次开放&#xff0c;亚洲正在逐渐恢复正常的旅行模式。尽管该地区仍没有达到疫情前水平&#xff0c;旅行者仍持谨慎态度&#xff0c;但他们对海外旅行的兴趣显著增加。 为了解旅行模式和旅行意愿&a…

Intel OpenVINO 安装显卡驱动

背景&#xff1a; 使用集合诚KMDA-3301 OpenVINO CPU和GPU 算法加速&#xff0c;用GPU加速时&#xff0c;调动不起来。写下解决过程&#xff0c;以备后用。 过程&#xff1a; 调动GPU 报错&#xff1a; terminate called after throwing an instance of InferenceEngine::G…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java高校师生党建管理系统4d8du

最近大四学弟学妹们开始准备设计了&#xff0c;有一些问题问我&#xff0c;比如设计怎么做&#xff0c;有没有模板等等吧&#xff0c;大家都没有去学校&#xff0c;老师都是通过远程指导的&#xff0c;答辩也是远程答辩&#xff0c;这种情况下同学们不在一起&#xff0c;可能碰…

day13【代码随想录】环形链表II、环形链表、快乐数、各位相加、丑数、丑数||

文章目录一、环形链表 II&#xff08;力扣142&#xff09;二、环形链表&#xff08;力扣141&#xff09;三、快乐数&#xff08;力扣202&#xff09;四、各位相加&#xff08;力扣258&#xff09;五、丑数&#xff08;力扣263&#xff09;六、丑数||&#xff08;力扣264&#x…

JavaScript:File API和Blob API

web应用的痛点就是不能操作计算机上的文件。File API和Blob API可以安全访问到客户端上的文件。 File类型 现在我们可以在html表单中直接访问文件&#xff0c;比如&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"U…

PaddleOCR服务部署-并通过Java进行调用

上一篇讲了PaddleOCR的简单使用&#xff0c;但是最终的目的肯定是要将它进行服务部署方便我们调用的&#xff0c;这里介绍一下他的服务部署方式 选择部署方式 官方推荐有以下几种&#xff1a; Python 推理 C 推理 Serving 服务化部署&#xff08;Python/C&#xff09; Paddle…

电影寒冬之下,票房靠“主旋律”能撑住场吗?《扫黑行动》仍在重播

春节将近&#xff0c;各大院线陆陆续续公布了春节档将要上映的影片档期&#xff0c;小伙伴们是不是也对近期热门的影片有了兴趣&#xff0c;想要一饱眼福了呢。下面是小编根据网络公布的数据进行报表数据处理分析后得到的数据可视化图&#xff0c;展示了近期一些热门影片的情况…

数据库专辑--WITH CHECK OPTION的用法

系列文章 C#底层库–数据库访问帮助类&#xff08;MySQL版&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/126886379 文章目录系列文章前言一、概念介绍二、测试用例2.1 数据准备2.2 数据查询2.3 修改视图&#xff0c;加上WITH CHECK O…

IDEA 优质 插件 Translation 跟随 IDEA 2022.3 版 更新翻译引擎啦

IDEA 优质 插件 Translation 跟随 IDEA 2022.3 版 更新翻译引擎啦 文章目录IDEA 优质 插件 Translation 跟随 IDEA 2022.3 版 更新翻译引擎啦特征安装使用 IDE 内置插件系统安装&#xff1a;手动安装&#xff1a;使用1. 注册翻译服务&#xff08;可选&#xff09;2. 开始翻译3.…

BGP学习笔记

概念 动态路由协议按照按照工作范围可以分为IGP和EGP&#xff0c;IGP工作在一个AS之内&#xff0c;主要用来发现和计算路由&#xff0c;常见的IGP包括OSPF&#xff0c;RIP&#xff0c;ISIS等。EGP工作在AS与AS之间&#xff0c;在AS之间提供无环路的路由信息交换。BGP&#xff…

[附源码]Python计算机毕业设计Django基于Web的软考题库平台

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

ActiveMQ window安装、修改密码、启动一闪而过、设置8161端口仅本地访问

目录 1.ActiveMQ下载 2.ActiveMQ目录说明 3.启动activemq 4.修改activemq默认密码 5.设置8161端口仅本地访问。 1.ActiveMQ下载 官网下载ActiveMQhttps://activemq.apache.org/ window版本直接解压就可以。 2.ActiveMQ目录说明 apache-activemq-5.16.5 activemq目录结构…

这几款文档笔记工具,你习惯用哪个?

前言 俗话说的好&#xff1a;“好记性不如烂笔头”&#xff0c;平时工作记录笔记的确是一个良好的习惯&#xff0c;做文档笔记可以在我们遗忘时进行回看&#xff0c;方便查找&#xff0c;代替人的大脑。有时程序写多了&#xff0c;很不愿意去强制记忆一些东西&#xff0c;那么…

【高度预估】基于matlab卡尔曼滤波和粒子滤波无人机离地高度估计【含Matlab源码 2255期】

⛄一、卡尔曼滤波和粒子滤波无人机离地高度估计 1 无人机离地高度估计算法 1.1 离地高度估计基本方案 无人机安装两路距离测量传感器, 传感器能在小型无人机飞行的一般高度正常工作, 且两个传感器的安装位置保证它们能够测量相同的离地高度信息。 两路距离测量传感器以1s的频…

单源最短路径(贪心算法)

最近在研究算法设计与分析&#xff0c;看到了单源最短路劲&#xff0c;特发文一篇。 下面代码就是实现这个有向联通图 废话不说直接上代码 #include<stdio.h> #define m 5000 int c[5][5] {m,10,m,30,100,m,m,50,m,m,m,m,m,m,10,m,m,20,m,60,m,m,m,m,m, }; int dist[5]…

现在市面跑步耳机哪款好用、分享五款适合跑步用的耳机推荐

近这两年来&#xff0c;运动健身风潮一直都非常火&#xff0c;但是一个人运动健身&#xff0c;难免无聊&#xff0c;如果有音乐的陪伴&#xff0c;时间都能过得快很多&#xff0c;这时候就需要一款运动蓝牙耳机了。不过购买运动蓝牙耳机&#xff0c;比挑选普通的耳机还更需要花…

[附源码]Python计算机毕业设计Django架构的博客平台设计

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

节约软件开发成本,关键在这儿。

​1、节省软件开发成本的核心在减少返工&#xff01; 软件企业利润 销售额 - 成本。企业的利润少&#xff0c;可能是销售额太少&#xff0c;也可能是成本太高。而增加销售额&#xff0c;取决于销售人员、客户、市场、产品等众多不可控因素&#xff0c;可遇而不可求。相反&…

RabbitMQ-死信交换机

文章目录1 死信交换机1.1.什么是死信交换机1.2 利用死信交换机接收死信1.3 总结2 TTL2.1 接收超时死信的死信交换机2.2 声明一个队列&#xff0c;并且指定TTL2.3 发送消息时&#xff0c;设定TTL2.4.总结3 延迟队列3.1 DelayExchange原理3.2 使用DelayExchange3.3 总结1 死信交换…