手把手教你制作一个小而美丽的 npm 包并发布

2020-03-17 14:37:38 黑胡桃實驗室

第1步：npm账户

你需要一个 npm 账户，如果米有，注册地址是：npmjs.com/signup

第2步：登录

进入你自己电脑的终端(cmd)并输入：

<code>npm adduser/<code>

也可以使用以下命令：

<code>npm login/<code>

选择你喜欢的命令即可。您将得到一个提示，输入您的用户名、密码和电子邮件。类似于这个的信息：

<code>Logged in as bamblehorse to scope @username on https://registry.npmjs.org/./<code>

我们做个 npm 吧

首先我们需要一个文件夹来保存我们的代码。以任何你觉得舒服的方式创造一个。我叫我的包裹很小，因为它真的很小。我为那些不熟悉它们的人添加了一些终端命令。

<code>md tiny/<code>

在该文件夹中，我们需要一个package.json文件，它包含关于您的项目的信息，并且有很多不同的选项。在本教程中，我们将只关注其中的两个。

<code>cd tiny && touch package.json/<code>

不过，它到底能有多少大小呢？

真的很小。

所有关于制作npm包的教程，包括官方文档，都告诉您在package.json中输入某些字段。我们会尽可能少地发布我们的包，直到它生效。这是一种最小npm包的TDD。

请注意：我给你看这个是为了证明制作一个npm包不复杂。

发布：首次尝试

要发布npm包，可以运行命名良好的命令：npm publish。因此，我们的文件夹中有一个空package.json，我们尝试：

<code>npm publish/<code>

我们发现一个错误：

<code>npm ERR! file package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected end of JSON input while parsing near ''
npm ERR! File: package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse/<code>

发布：第二次失败

让我们在package.json文件中为包命名：。

<code>{
"name": "@bamlehorse/tiny"
}/<code>

你可能已经注意到我在开头添加了npm用户名。

那是怎么回事？

通过使用名称@bamblehorse/tiny而不仅仅是tiny，我们在用户名的作用域下创建了一个包，它被称为作用域包。它允许我们使用可能已经使用的短名称，例如npm中已经存在的小程序包。您可能已经在流行的库中看到了这一点，比如来自Google的Angular框架。它们有一些作用域包，比如@angular/core和@angular/http。

很酷吧？

我们将再次尝试发布：

<code>npm publish/<code>

这个时间进程的错误更小。

<code>npm ERR! package.json requires a valid “version” field/<code>

每个npm包都需要一个版本，以便开发人员知道他们是否可以安全地更新到包的新版本，而不会破坏其他代码。npm使用的版本控制系统称为semver，它代表语义版本控制。

不要太担心理解更复杂的版本名，下面是它们对基本版本名工作原理的总结：

给定版本号 MAJOR.MINOR.PATCH, 增加:

1.进行不兼容的API更改时的主要版本

2.以向后兼容的方式添加功能时的MINOR版本

3.修正向后兼容错误时的补丁版本。

预发布和生成元数据的其他标签作为MAJOR.MINOR.PATCH格式的扩展提供。

https://semver.org

发布：第三次尝试

我们将给出package.json的版本：1.0.0—第一个主要版本。

<code>{
"name": "@bamblehorse/tiny",
"version": "1.0.0"
}/<code>

我们发布吧！

<code>npm publish/<code>

糟糕

<code>npm ERR! publish Failed PUT 402npm ERR! code E402npm ERR! You must sign up for private packages : @bamblehorse/tiny/<code>

请允许我解释一下。

作用域包是自动私下发布的，因为除了对像我们这样的单个用户有用外，公司还利用它们在项目之间共享代码。如果我们发布了一个正常的包，那么我们的旅程就到此结束。

我们只需要告诉npm，实际上我们希望每个人都使用这个模块，而不是把它锁在他们的保险库里。因此，我们运行：

<code>npm publish --access=public/<code>

报错了！

<code>+ @bamblehorse/[email protected]/<code>

我们收到一个加号，包裹的名字和版本。我们做到了-我们在npm俱乐部。我很兴奋。你一定很兴奋。

让我们重新组合

如果我们想作为一个开发人员被认真对待，我们希望我们的包被使用，我们需要向人们展示代码并告诉他们如何使用它。一般来说，我们通过将代码放在公共的地方并添加一个自述文件来实现这一点。

我们还需要一些代码。说真的，我们还没有代码。GitHub是放置代码的好地方。让我们创建一个新的存储库。

README

这里你需要简单介绍你的 npm 包是什么用处，以及如何操作的。我贴出我的 README：

代码许可证

许可证只是让人们知道在什么情况下他们可以使用你的代码，有很多不同的数据。

在每个GitHub存储库中都有一个很酷的名为insights的页面，您可以在其中检查各种统计数据，包括项目的社区标准，我将从那里添加我的许可证：

然后点击此页：

代码

我们添加简单的实例代码：

<code>module.exports = function tiny(string) {
  if (typeof string !== "string") throw new TypeError("Tiny wants a string!");
  return string.replace(/\\s/g, "");
};/<code>

tiny()函数用于删除字符串中的所有空格。

因此npm包只需要一个index.js文件。这是你包裹的入口。当你的软件包变得更加复杂时，你可以用不同的方法来完成它。

我们可能应该更新minimal package.json并在readme.md中添加一些指令。否则没人会知道如何使用我们美丽的代码。

package.json

<code>{
  "name": "@bamblehorse/tiny",
  "version": "1.0.0",
  "description": "Removes all spaces from a string",
  "license": "MIT",
  "repository": "bamblehorse/tiny",
  "main": "index.js",
  "keywords": [
    "tiny",
    "npm",
    "package",
    "bamblehorse"
  ]
}/<code>

我们补充了：

description: 对包裹的简短描述。
repository: GitHub友好-因此您可以编写用户名/repo。
license: MIT in this case
main: 相对于文件夹根目录，指向包的入口点。
keywords: 用于在npm搜索中发现包的关键字列表。

完成

让我们发布。

版本

首先，我们将使用npm version命令更新版本。

<code>npm version major/<code>

哪些输出：

<code>v2.0.0/<code>

发布

让我们运行命令：

<code>npm publish/<code>

完成：

<code>+ @bamblehorse/[email protected]/<code>

Cool

这是一个很好的总结，你可以开始发布你的 npm 包了！

分享到:

閱讀更多 黑胡桃實驗室 的文章

關鍵字: Google 包并小而