[譯] 建立併發佈一個小而美的 npm 包

時間 2019-11-08

標籤建立併發一個小而美的 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 Unsplashlinux

若是你已經寫過不少 npm 模塊，你就能夠跳過這部分。若是沒有的話，咱們先看下簡介。android

TL;DR

一個 npm 模塊只須要包含一個帶有 name 和 version 屬性的 package.json 文件。ios

Hey！

看看你。git

就像一隻懵懂無知的小象。github

你不是製做 npm 包的專家，但你很想學習它。web

全部的大象跺跺腳就能製做一個又一個的包，而後你會想：shell

「我無法與它們競爭啊。」npm

好吧，其實你是能夠的！json

不要再懷疑本身啦。

開始吧！

你不是大象

這是個比喻。

想過幼年大象被叫作什麼嗎？

你固然想過。一個幼年大象被叫作小牛。

我相信你

懷疑本身是存在的。

這致使了不少人作不出很酷的東西。

你以爲你作不出來，因此你啥都不作。可是，你又會轉頭崇拜那些有着很高成就的牛人。

太諷刺啦。

因此我將要展現給你一個多是最小的 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，增量規則以下：

MAJOR 版本號的變動說明新版本產生了不兼容低版本的 API 等，

MINOR 版本號的變動說明你在以向後兼容的方式添加功能，接下來

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"
  ]
}
複製代碼