如何发个 npm 包?
liuian 2025-01-05 18:41 49 浏览
大家好,我是前端西瓜哥。
这次写了个简单的方法的包,来梳理一下发 npm 包的整个过程。
示例地址
文章和源码配合看效果更好。
本文实例的 npm 包名为 mid-index-of。
github 地址:
https://github.com/F-star/mid-index-of
npm 包地址:
https://www.npmjs.com/package/mid-index-of
源码和编译
包里只有一个工具类函数,叫 midIndexOf,和 indexOf 类似,返回元素在数组中的索引位置。
不同的是,这个方法可以指定起始位置,一会左一会右两边循环去遍历元素的。使用场景是在数组很大,目标元素在接近起始位置的情况,能较快地找到目标元素。
我们将方法写在了 index.ts 上。
function midIndexOf() {
// 实现
}
export default midIndexOf;
ts 是不能直接用的,需要编译成 js。然后就是这个包的使用场景,我希望它能同时在浏览器和 nodejs 环境中使用,所以我希望将其编译成两种模块文件(esm 和 commonjs)。
这种情况下最好的打包工具就是 rollup。rollup 的配置文件为:
// rollup.config.mjs
import typescript from '@rollup/plugin-typescript';
const config = {
input: 'index.ts',
output: [
{
file: 'dist/mid-index-of.esm.js',
format: 'esm',
},
{
file: 'dist/mid-index-of.common.js',
format: 'cjs',
},
],
plugins: [typescript()],
};
export default config;
这里引入了 rollup 的 typescript 插件,这样才能识别 ts 文件。然后在 ouput 里设置了两种模块格式的输出。
另外注意在 tsconfig.json 中设置 "declaration": true,这样编译的时候才会生成类型声明文件(.d.ts 结尾)。
然后我们执行:
rollup -c
编译出:
dist
├── index.d.ts
├── mid-index-of.common.js
└── mid-index-of.esm.js
package.json 的设置
package.json 就是对 npm 包的描述,这里你需要配置不少的字段。
- name:包名;
- decription:包的描述,在 npm 搜索里会用到,如果没有提供,会从 README.md 中提取;
- main:包的入口文件,通常是 CommonJS,历史原因。这里我们写上 ./dist/mid-index-of.common.js;
- browser:包用于浏览器时的入口文件;
- module:指定 ES 模块入口,这个不是 npm 自己的字段,是给打包工具用的。这里我们写上 ./dist/mid-index-of.esm.js;
- types:指定包的类型文件。这里我们写上 ./dist/index.d.ts;
- keywords:关键字数组,npm 搜索会用到,建议多写一点;
- private:是否为私有包,这个字段设置为 true 可以防止意外将私有包发布出去;
- liscense:开源许可证,常用 MIT;
- files:指定可以被发布的文件,默认是所有文件。为了减少包体积,不加上多余的文件,这个是一定要配置的。此外一些文件是一定会带上的,比如 package.json、LICENSE、README.md;
- sideEffects:包是否有副作用,比如注入全局变量。如果没副作用,设置为 false,可以帮助打包工具做 tree-shaking,将一些引入了但没有使用的包移除;
package.json 是可以自定义字段的,一些前端工具的配置除了可以单独使用一个配置文件,大多也同时支持放到 package.json 下,比如 ESLint、Jest、commitlint 等。
一开始我觉得配置就应该放到单独的一个配置文件,然后放到根目录下,这样比较清晰。后来我发现配置文件越来越多,觉得都放 package.json 也是不错的,会清爽一些,而且配置完后基本都不怎么改了,找个地方藏起来也是不错的。
当然将这些配置文件放到一个单独的文件夹下也可以,但在调用对应工具的时候,就要手动指定配置文件路径,有点麻烦。
发包
首先是到 npm 官网,注册一个 npm 账号,设置用户名、密码和邮箱。这些信息会在之后命令行登录用到。
然后用 npm 命令行工具进行登录。
npm login
期间我踩了个坑,就是我 npm 原来用的是阿里的源,导致登录会出现 403 失败。后来我改成 npm 官方源进行登录就成功。
然后就是发包:
npm publish
发包成功后,我们会收到 npm 包发布成功的邮件:
我们再看看自己的包的信息:
npm view mid-index-of
升级版本号
npm 的包的版本号遵循 semver 标准,一个版本号通常依次由三部分(Major.Minor.Patch)组成:
- 主版本号(major):大版本,通常出现不兼容的大改动,才会升这个主版本;
- 次版本号(minor):添加了新特性,但还是向下兼容的,就升级这个;
- 修订号(patch):做了一些 bug 修复,会升这个;
还有一种比较少用的先行版本号(pre-release),不是本文的重点,具体不说了,可以看 semver 文档说明。
假设你发现了一些 bug,然后修复了它们,你就需要发一个新的包,此时你可以给 patch 升级一下。
npm version patch
执行上面这个命令,就会将 package.json 的 version 的修订号 +1,并做一个 git commit,同时会打一个 tag:
6a4cfa8 (HEAD -> main, tag: v0.0.3) 0.0.3
打 tag 后 push 后可以配合 CI/CD 做自动发包。过一段时间我会出一篇 github action 的文章,里面再介绍如何做自动化发包。
一个注意点
npm publish 默认会将最后一次的发包标记为 latest 标签,等价于 npm publish --tag latest。
假设有这么一个场景,你的包发布到版本 3.x,2.x 基本上是不再维护状态。然后有人反馈 2.x 有个致命的问题,修复后你将 2.x 发布了,此时 latest 就变成了 2.x,这其实 发生了版本的降级。
紧接着开发者用 npm install <包名> ,下载的包就变成了 2.x 版本,哦豁。
所以发布完后,你需要使用 npm dist-tag 将 latest 指向回原来的版本号:
npm dist-tag add <包名>@3.0.0 latest
结尾
一个简单的 npm 发包流程大概就是这些了。
我是前端西瓜哥,欢迎关注我,学习更多前端知识。
- 上一篇:还没有开始用自己的npm包吗,简单几步就搞定了
- 下一篇:npx 使用教程
相关推荐
- 教你把多个视频合并成一个视频的方法
-
一.情况介绍当你有一个m3u8文件和一个目录,目录中有连续的视频片段,这些片段可以连成一段完整的视频。m3u8文件打开后像这样:m3u8文件,可以理解为播放列表,里面是播放视频片段的顺序。视频片段像这...
- 零代码编程:用kimichat合并一个文件夹下的多个文件
-
一个文件夹里面有很多个srt字幕文件,如何借助kimichat来自动批量合并呢?在kimichat对话框中输入提示词:你是一个Python编程专家,完成如下的编程任务:这个文件夹:D:\downloa...
- Java APT_java APT 生成代码
-
JavaAPT(AnnotationProcessingTool)是一种在Java编译阶段处理注解的工具。APT会在编译阶段扫描源代码中的注解,并根据这些注解生成代码、资源文件或其他输出,...
- Unit Runtime:一键运行 AI 生成的代码,或许将成为你的复制 + 粘贴神器
-
在我们构建了UnitMesh架构之后,以及对应的demo之后,便着手于实现UnitMesh架构。于是,我们就继续开始UnitRuntime,以用于直接运行AI生成的代码。PS:...
- 挣脱臃肿的枷锁:为什么说Vert.x是Java开发者手中的一柄利剑?
-
如果你是一名Java开发者,那么你的职业生涯几乎无法避开Spring。它如同一位德高望重的老国王,统治着企业级应用开发的大片疆土。SpringBoot的约定大于配置、SpringCloud的微服务...
- 五年后,谷歌还在全力以赴发展 Kotlin
-
作者|FredericLardinois译者|Sambodhi策划|Tina自2017年谷歌I/O全球开发者大会上,谷歌首次宣布将Kotlin(JetBrains开发的Ja...
- kotlin和java开发哪个好,优缺点对比
-
Kotlin和Java都是常见的编程语言,它们有各自的优缺点。Kotlin的优点:简洁:Kotlin程序相对于Java程序更简洁,可以减少代码量。安全:Kotlin在类型系统和空值安全...
- 移动端架构模式全景解析:从MVC到MVVM,如何选择最佳设计方案?
-
掌握不同架构模式的精髓,是构建可维护、可测试且高效移动应用的关键。在移动应用开发中,选择合适的软件架构模式对项目的可维护性、可测试性和团队协作效率至关重要。随着应用复杂度的增加,一个良好的架构能够帮助...
- 颜值非常高的XShell替代工具Termora,不一样的使用体验!
-
Termora是一款面向开发者和运维人员的跨平台SSH终端与文件管理工具,支持Windows、macOS及Linux系统,通过一体化界面简化远程服务器管理流程。其核心定位是解决多平台环境下远程连接、文...
- 预处理的底层原理和预处理编译运行异常的解决方案
-
若文章对您有帮助,欢迎关注程序员小迷。助您在编程路上越走越好![Mac-10.7.1LionIntel-based]Q:预处理到底干了什么事情?A:预处理,顾名思义,预先做的处理。源代码中...
- 为“架构”再建个模:如何用代码描述软件架构?
-
在架构治理平台ArchGuard中,为了实现对架构的治理,我们需要代码+模型描述所要处理的内容和数据。所以,在ArchGuard中,我们有了代码的模型、依赖的模型、变更的模型等,剩下的两个...
- 深度解析:Google Gemma 3n —— 移动优先的轻量多模态大模型
-
2025年6月,Google正式发布了Gemma3n,这是一款能够在2GB内存环境下运行的轻量级多模态大模型。它延续了Gemma家族的开源基因,同时在架构设计上大幅优化,目标是让...
- 比分网开发技术栈与功能详解_比分网有哪些
-
一、核心功能模块一个基本的比分网通常包含以下模块:首页/总览实时比分看板:滚动展示所有正在进行的比赛,包含比分、比赛时间、红黄牌等关键信息。热门赛事/焦点战:突出显示重要的、关注度高的比赛。赛事导航...
- 设计模式之-生成器_一键生成设计
-
一、【概念定义】——“分步构建复杂对象,隐藏创建细节”生成器模式(BuilderPattern):一种“分步构建型”创建型设计模式,它将一个复杂对象的构建与其表示分离,使得同样的构建过程可以创建...
- 构建第一个 Kotlin Android 应用_kotlin简介
-
第一步:安装AndroidStudio(推荐IDE)AndroidStudio是官方推荐的Android开发集成开发环境(IDE),内置对Kotlin的完整支持。1.下载And...
- 一周热门
-
-
【验证码逆向专栏】vaptcha 手势验证码逆向分析
-
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
-
一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案
-
再见Swagger UI 国人开源了一款超好用的 API 文档生成框架,真香
-
网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄
-
C++ std::vector 简介
-
飞牛OS入门安装遇到问题,如何解决?
-
系统C盘清理:微信PC端文件清理,扩大C盘可用空间步骤
-
10款高性能NAS丨双十一必看,轻松搞定虚拟机、Docker、软路由
-
python使用fitz模块提取pdf中的图片
-
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)