[译] 建立并发布一个小而美的 npm 包，没你想的那么难！

• 原文地址：How to make a beautiful, tiny npm package and publish it
• 原文做者：Jonathan Wood
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：snowyYU
• 校对者：ElizurHz, Park-ma

你确定想不到，建立并发布一个小而美的 npm 包有多简单！

Photo by Chen Hu on Unsplash

若是你已经写过不少 npm 模块，你就能够跳过这部分。若是没有的话，咱们先看下简介。

TL;DR

一个 npm 模块 只 须要包含一个带有 name 和 version 属性的 package.json 文件。

Hey！

看看你。

就像一只懵懂无知的小象。

你不是制做 npm 包的专家，但你很想学习它。

全部的大象跺跺脚就能制做一个又一个的包，而后你会想：

“我无法与它们竞争啊。”

好吧，其实你是能够的！

不要再怀疑本身啦。

开始吧！

你不是大象

这是个 比喻。

想过幼年大象被叫作什么吗？

你固然想过。一个幼年大象被叫作 小牛。

我相信你

怀疑本身 是存在的。

这致使了不少人作不出很酷的东西。

你以为你作不出来，因此你啥都不作。 可是，你又会转头崇拜那些有着很高成就的牛人。

太讽刺啦。

因此我将要展现给你一个多是最小的 npm 模块。

很快就会有 npm 模块从你的指尖飞出来。随处可见的高复用代码。没有耍什么把戏 —— 也没有复杂的指令。

复杂的指令

我保证过不会有...

...不过我确实作了。

没这么糟糕啦。总有一天你会原谅个人。

步骤 1：npm 帐户

你须要一个帐号。这是流程的一部分。

在这注册。

步骤 2：登陆

有没注册一个 npm 帐户呀？

是啊，你已经建立啦。

真棒。

我同时建议你使用 命令行 / 控制台 等等。从如今起我统一叫它们终端。这里能够看下它们的区别 很明显。

打开终端而后输入：

npm adduser
复制代码

你也可使用下面的命令：

npm login
复制代码

这两个选一个跟着你混到死吧。

你会获得一个让你输入username、password 和 email的提示。把它们填在相应的位置吧！

你会获得相似下面的提示：

Logged in as bamblehorse to scope @username on registry.npmjs.org/.

棒极啦！

开始开发一个包

首先咱们须要一个文件夹来装咱们的代码。用一个你喜欢的方式随便建一个。我把我新建的包叫作 tiny 由于它真的很小。我为那些不熟悉命令行的人提供些新建相关的终端命令。

md tiny

在新建的文件夹中，咱们须要 package.json 文件。若是你用过 Node.js — 那你确定见过这个文件。这是一个 JSON 文件，它包含了你的项目信息以及众多的配置项。在本文中，咱们只需关注其中的两项。

cd tiny && touch package.json

它能有多小呢？

真的很小。

包括官方文档在内的建立 npm 包的教程，都在让你在 package.json 中输入某些字段。在不影响它正常工做和发布的前提下，咱们尽可能试着精简下咱们的包。这是 TDD 的一种，咱们把它用在一个很小的 npm 包上。

请注意：我给你讲这些就是想说明不是全部的npm包都很复杂。想让咱们开发的包为社区做出贡献的话，通常还须要不少别的模块，随后咱们会讲到。

发布：第一次尝试

为了发布你的 npm 包，你须要执行规定好的命令：npm publish。

因此咱们在建立好的包含空 package.json 的文件夹中试一下：

npm publish
复制代码

啊哦！

报错：

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
复制代码

npm 可不喜欢报这么多错。

有道理。

发布：第二次挣扎

咱们先在 package.json 文件中给咱们的包起个名字吧：

{
"name": "@bamlehorse/tiny"
}
复制代码

你可能注意到了，我把个人 npm 用户名加到了开头。

这样作的意义是什么呢？

经过使用 @bamblehorse/tiny 代替 tiny，咱们会建立一个在咱们用户名 scope 下的一个包。这个叫作 scoped package。它容许咱们将已经被其余包使用的名称做为包名，好比说，tiny 包 已经在 npm 中存在。

你可能在一些著名的包中见过这种命名方法，好比来自 Google 的 Angular。它们有几个 scoped packages，好比 @angular/core 和 @angular/http。

超级酷，对吧？

咱们试着第二次发布咱们的包：

npm publish
复制代码

此次的报错信息少多了 — 有进步。

npm ERR! package.json requires a valid “version” field
复制代码

每一个 npm 包都须要一个版本，以便开发人员在安全地更新包版本的同时不会破坏其他的代码。npm 使用的版本系统被叫作 SemVer，是 Semantic Versioning 的缩写。

不要过度担忧理解不了相较复杂的版本名称，下面是他们对基本版本命名的总结：

给定版本号 MAJOR.MINOR.PATCH，增量规则以下：

1. MAJOR 版本号的变动说明新版本产生了不兼容低版本的 API 等，

2. MINOR 版本号的变动说明你在以向后兼容的方式添加功能，接下来

3. PATCH 版本号的变动说明你在新版本中作了向后兼容的 bug 修复。

表示预发布和构建元数据的附加标签可做为 MAJOR.MINOR.PATCH 格式的扩展。

semver.org

发布：第三次尝试

咱们将要定义咱们 package.json 中包的版本号：1.0.0 — 第一个主要版本。

{
"name": "@bamblehorse/tiny",
"version": "1.0.0"
}
复制代码

开始发布吧！

npm publish
复制代码

哎呀。

npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages : @bamblehorse/tiny
复制代码

我来解释一下。

Scoped packages 会被自动发布为私有包，由于这样不但对咱们这样的独立用户有用，并且它们也被公司用于在项目之间共享代码。若是咱们就发布这样一个包的话，那咱们的旅程可能就要在此结束了。

咱们只需改变下指令来告诉 npm 咱们想让每一个人均可以使用这个模块 — 不要把它锁进 npm 的保险库中。因此咱们执行以下指令：

npm publish --access=public
复制代码

Boom！

+ @bamblehorse/tiny@1.0.0
复制代码

咱们收到一个 + 号，咱们包的名称和版本号。

咱们作到啦 — 咱们已经走进 npm 俱乐部啦。

好激动。

你也确定很激动。

用友好的蓝色盖住敏感信息

发现没？

npm 爱你呦

真可爱！

版本 1 就躺在那呢！

重构一下

若是咱们想成为一个严谨的开发者，而且让咱们的包得以普遍使用，那咱们就须要向别人展现咱们的代码同时也要让他们明白怎样使用咱们的包。通常咱们经过将代码放在公共平台并添加描述文件来实现。

咱们也须要一些代码来实现。

实话说。

咱们至今尚未写任何代码呢。

GitHub 就是一个放代码的好地方。 先建一个 新的仓库。

README！

我以前经过在 README 编辑文字来 描述。

你没必要再那样作了。

接下来会颇有趣。

咱们将添加一些来自 shields.io 的时髦徽章，让人们知道咱们又酷又专业。

以下可让别人知道咱们当前的包版本：

npm (scoped)

下一个徽章更有趣。它表示警告，由于咱们尚未任何代码。

咱们真该写些代码...

npm bundle size (minified)

咱们简短的简介

代码许可

这个名称确定参考了 James Bond。

我实际上忘了添加许可证。

代码许可其实就是让别人知道在什么状况下才能使用你的代码。这里有 许多选项 供你选择。

每一个 GitHub 仓库中都有一个名为 insights 的酷页面，你能够在其中查看各类统计信息 — 包括社区定下的项目标准。我将要从那里添加个人许可。

社区意见

而后你点出这个页面：

Github 为你提供了每一个许可证简介

代码

咱们仍是没有任何代码。有点尴尬。

在咱们彻底失去可信度以前加点代码吧。

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

虽然没用 — 可是看着舒服多了

就是这样。

一个 简易 的方法，用来移除字符串中的空格。

全部 npm 包都须要一个 index.js 文件。这是包的入口文件。随着复杂度升高，你能够采用不一样的方式来实现它。

不过现在这样对咱们来讲就足够了。

咱们已经到达目的地了吗？

咱们很接近了。

咱们应该更新咱们的迷你 package.json 文件并在 readme.md 文件中添加一些指令。

否则就没人知道怎样使用咱们漂亮的代码啦。

package.json

{
  "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"
  ]
}
复制代码

解释一下！

咱们添加了以下属性：

• description：包的简介
• repository：适合写上 GitHub 地址 — 因此你能够写成这种格式 username/repo
• license：这里是 MIT 认证
• main：包的入口文件，位置在文件夹的根目录
• keywords：添加一些关键词更容易使你的包被搜索到

readme.md

很是丰富！

咱们已经添加了有关如何安装和使用该包的说明。棒极啦！

若是您想优化下 readme 的格式，只需查看开源社区中的热门软件包，并使用它们的格式来帮助你快速入门。

完成

开始发布咱们的棒棒的包吧。

版本

首先，咱们用 npm version 命令来升级下包的版本。

这是一个主版本，所以咱们输入：

npm version major
复制代码

它会输出：

v2.0.0
复制代码

发布！

让咱们运行咱们最喜欢的命令吧：

npm publish
复制代码

完成：

+ @bamblehorse/tiny@2.0.0
复制代码

一个酷酷的东西

Package Phobia 能够为你的包提供一个很棒的摘要。您也能够在 Unpkg 等网站上查看包内的文件。

感谢你的阅读

咱们刚刚经历了一场美妙的旅行。我但愿你会像我同样享受喜好它。

请让我知道你在想什么！

给咱们刚刚建立的包来颗 star 吧：

★ Github.com/Bamblehorse…

“大半个身子浸在水中的大象。” 由 Jakob Owens 拍摄，来自 Unsplash

请关注我 Twitter、Medium 或 GitHub。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。