百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

如何发个 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)组成:

  1. 主版本号(major):大版本,通常出现不兼容的大改动,才会升这个主版本;
  2. 次版本号(minor):添加了新特性,但还是向下兼容的,就升级这个;
  3. 修订号(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 发包流程大概就是这些了。

我是前端西瓜哥,欢迎关注我,学习更多前端知识。

相关推荐

教你把多个视频合并成一个视频的方法

一.情况介绍当你有一个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...