[譯] 建立併釋出一個小而美的 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。