如何将包发布到 npm(行业惯例)

2025-06-10

如何将包发布到 npm(行业惯例)

将软件包发布到 npm 很简单。只需两个步骤:

  1. 创建您的包。
  2. 发布该包。

但是像业界那样发布软件包呢?没那么简单。还有更多步骤。我们将介绍所需的步骤,并向您展示一种发布和更新软件包的简便方法。

创建您的第一个包

如果您之前没有将软件包发布到 npm,本节适合您。如果您之前发布过软件包,请直接跳到下一部分。

要将您的第一个包发布到 npm,您需要执行以下步骤:

首先,你需要有一个 npm 账户如果你还没有,请在这里创建一个。

其次,您需要通过命令行登录您的 npm 帐户。(在执行此步骤之前,您需要在系统上安装 Node 和 npm。点击此处安装它们)。

要登录,请使用npm login

npm login
Enter fullscreen mode Exit fullscreen mode

系统将提示您输入用户名、密码和电子邮件地址。

通过命令行登录 npm

第三,你需要创建一个包。为此,请在计算机上的某个位置创建一个文件夹并导航到该文件夹​​。命令行版本为:

# Creating a folder named how-to-publish-to-npm
mkdir how-to-publish-to-npm

# Navigating into the folder
cd how-to-publish-to-npm
Enter fullscreen mode Exit fullscreen mode

接下来,您要使用命令开始项目npm init

npm init
Enter fullscreen mode Exit fullscreen mode

此命令会引导您完成几个问题,并package.json在最后创建一个文件。此package.json文件包含发布项目所需的基本信息。(您可以跳过没有意义的提问)。

npm init 命令的图片

最后一步是使用命令发布您的包npm publish

npm publish
Enter fullscreen mode Exit fullscreen mode

如果该包已存在于 npm 上(因为你的包与 npm 上的另一个包同名),你将无法发布它。你会收到一个错误。

您需要更改您的包名称。

要更改包名称,请更改文件name中的属性package.json。在这里,我将其更改为publishing-to-npm

(您可以通过在 npm 上进行搜索或通过npm search命令来检查命名冲突)。

将 name 属性更改为 Publishing-to-npm

为了保持一致性,最好也更新文件夹名称。以下是等效的命令行。

# Command to change folder names by moving everything
mv how-to-publish-to-npm publishing-to-npm
Enter fullscreen mode Exit fullscreen mode

再次尝试该publish命令。您现在应该会收到一条成功消息。

成功发布到 npm

如果您想出的每个名字都已被占用,该怎么办

这是一个常见问题,因为很多人在 npm 上创建包。有时很难找到你想要的包名。(就像我永远找不到一个好的.com域名一样)。

为了解决这个问题,npm 允许你发布到作用域。这意味着你可以用自己的用户名(或 npm 组织)发布包,这样就不用再担心命名问题了。

要发布到某个范围,您可以:

  1. 更改name@username/package-name手动package.json
  2. 运行npm init --scope=username而不是npm init

如果您的存储库有范围,则需要稍微调整发布命令:

npm publish --access public
Enter fullscreen mode Exit fullscreen mode

这就是将包发布到 npm 所需要做的全部事情。

现在,让我们来看看业界是如何发布软件包的。

行业发布(和更新)软件包的方式。

以 React 这样的流行框架为例。如果你深入研究 React,你会注意到以下几点:

首先,React 有一个Github 仓库

其次,React在 npm上发布

第三,React 遵循语义版本控制(简称 Semver)。

npm 软件包遵循 Semver

第四,React 的每次更新都会有一个关联的 git 标签。此 git 标签也遵循 Semver 规范。

每个 git 标签都遵循 Semver

第五,每次 React 更新都有发行说明。

这意味着发布包涉及许多步骤。至少,您需要:

  1. 运行测试(如果有的话)
  2. 根据 Semverversion进行更新package.json
  3. 根据 Semver 创建 git 标签
  4. 将包推送到 Github
  5. 不使用 npm 推送软件包
  6. 为每个更新创建发行说明

当我们准备全力以赴时,很容易忘记这些事情。有时我们npm publish会享受片刻的休息。但等我们回来时,却又后悔自己忘记了。

有一个更简单的方法。那就是使用一个名为 的工具np

名词短语

np (由Sindre Sorhus创建)使我们更容易发布包,而不会错过我上面详述的任何步骤。

安装 np

要安装np,您可以运行以下命令:

npm install np
Enter fullscreen mode Exit fullscreen mode

这可行。但我更喜欢np在我的电脑上全局安装,这样我就可以在任何地方运行该np命令。

sudo npm install --global np
Enter fullscreen mode Exit fullscreen mode

使用 np 之前

使用前np您需要确保:

  1. 您的项目是一个 Git 存储库
  2. 它需要有一个遥控器
  3. 您必须至少推送到远程一次。
  4. 您还需要确保您的工作目录是干净的。
# Initialize Git
git init

# Adds a remote repository
git remote add origin some-url

# Commit changes
git add .
git commit -m "Initial Commit"
Enter fullscreen mode Exit fullscreen mode

如果您的项目不是 Git 存储库,您将收到此错误:

如果项目不是 Git 存储库,则 np 会出错

如果您的项目没有远程,您将收到此错误(在检查的后期)。

如果项目没有远程,np 会报错。此错误会在后续流程中发生。

如果您的工作目录很脏,您将收到此错误:

np 的错误工作目录很脏

如果您至少没有推送到 Git 远程一次,np则会挂起并且不执行任何操作。

使用 npm

要使用np,请运行np命令。

np
Enter fullscreen mode Exit fullscreen mode

np将提示您输入 Semver 号码。

np 提示用户输入 Semver 编号

选择一个数字并np要求您确认您的选择。

np 提示确认所选的 Semver 版本号

np然后为您完成其余的发布工作。

运行测试时出错

np运行该npm test命令作为其检查的一部分。

如果您按照教程进行到这一步,您将收到如下错误:

发生这种情况是因为我们的npm test命令导致错误。你可以自己尝试一下:

npm test
Enter fullscreen mode Exit fullscreen mode

要修复此错误,我们需要更改文件test中的脚本package.json

现在看起来是这样的:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
Enter fullscreen mode Exit fullscreen mode

将其更改为:

"scripts": {
  "test": "echo \"No test specified\""
},
Enter fullscreen mode Exit fullscreen mode

此更改有效,因为exit 1会产生错误。

完成此更改后,np发布过程应该就完成了。(请记住在运行之前提交更改np)。

在该过程结束时,np将启动一个浏览器窗口供您编写发行说明。

简而言之,np使发布包变得更加简单!


感谢阅读。本文最初发布在我的博客上。如果您想阅读更多文章来帮助您成为更优秀的前端开发人员,请订阅我的新闻通讯。

链接链接:https://dev.to/zellwk/how-to-publish-packages-to-npm-the-way-the-industry-does-things-4344
PREV
JavaScript 循环中的 async 和 await
NEXT
我如何记住 CSS 网格属性