這個週末我開始開發我的第一個 npm 包。我不敢相信我編寫程式碼已經有多久了，我從來沒有費心去建立自己的 npm 包，但我們來了。我使用 Gridsome 和 markdown 建立了我的最新網站，您可以在此處閱讀所有相關內容。在 Markdown 文件中，我想要一個簡單的方法來插入 Twitter 狀態並嵌入推文。

我將在以後的部落格文章中告訴您有關 Gridsome 插件的更多訊息，但現在，我想向您展示如何建立您的第一個 npm 包。我在做這件事的過程中學到了一些東西，我想與你們分享。

先決條件

我假設你至少知道什麼是 Node 和 npm，並且之前寫過 JavaScript。如果您對其中任何一個都不了解，並希望我寫一些有關這些入門的內容，請告訴我。

在我們深入並開始編寫一些程式碼之前，您需要一些東西。

• Visual Studio Code或您最喜歡的編輯器

• 節點和 NPM

• NPM帳戶

建立你的 npm 包

您要做的第一件事是建立一個新資料夾來保存您的 npm 套件。對於此範例，我將建立一個名為wrap-with-poo的新目錄。是的，你沒看錯。

進入該資料夾並輸入以下內容：

npm init

這會問你一堆問題，然後建立一個 package.json。如果您還不知道某些問題的答案，請不要擔心，您可以稍後再回來回答。

This utility will walk you through creating a package.json file.
It only covers the most common items and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterward to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (wrap-with-poop)
version: (0.1.0) 0.1.0
description: This package will take any string you give it and wrap it with the poop emjoi
entry point: (index.js)
test command:
git repository:
keywords: node,npm
author: Dan Vega
license: (ISC) MIT
About to write to /Users/vega/dev/npm/wrap-with-poop/package.json:

{
  "name": "wrap-with-poop",
  "version": "0.1.0",
  "description": "This package will take any string you give it and wrap it with the poop emjoi",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "node",
    "npm"
  ],
  "author": "Dan Vega",
  "license": "MIT"
}

Is this OK? (yes) yes

寫你的插件

接下來在 Visual Studio Code 中開啟專案並建立 index.js。您建立此文件的原因是您在 package.json 中說過這是您的入口點。在你的index.js中加入以下程式碼：

module.exports = (str) => {
    return `💩${str}💩`;
}

module.exports 物件允許我們組織一些相關的程式碼，然後將其公開為模組。這意味著當我們完成後，我們可以將此模組匯入到另一個應用程式中。在本例中，我們指派一個箭頭函數，這表示我們公開一個函數，該函數接受一個名為 str 的參數，並傳回用 poo 表情符號包裹的字串。這就是您需要對這個專案做的全部事情。這是一個非常簡單的包，但它將有助於完成一些事情。

npm 本機開發

現在您已經準備好了我們的包，您需要在另一個專案中測試它。在現實世界中，您應該針對它編寫一些單元測試，但我想將其保存到另一篇文章和截圖中。

接下來，建立一個名為「wrap-with-poo-testing」的新目錄（在套件外部）。您將再次需要執行 npm init 但這次您可以加入 -y 參數來跳過所有問題，這次它們不太重要。

npm init -y

Wrote to /Users/vega/dev/npm/wrap-with-poo/package.json:

{
  "name": "wrap-with-poop",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

NPM安裝

在此專案中建立一個名為 app.js 的新檔案。這是您將使用新的wrap-with-poo 套件的地方。通常，您可以透過執行以下命令來安裝所需的 npm 軟體包。

npm install wrap-with-poo

問題是你還沒有發布你的新插件，所以它不在 npm 中。您需要一種在開發時在本地引用該套件的方法。您可以使用套件的絕對路徑來執行 npm install。

npm install /Users/vega/dev/npm/wrap-with-poo

這會將您的 package.json 更新為如下所示

{
  "name": "npm",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "wrap-with-poo": "file:../wrap-with-poo"
  }
}

如果您需要測試套件中的安裝前/安裝後掛鉤，那麼您將需要使用此方法。如果您不關心本地開發 NPM 專案的最佳方法是使用npm link 。

NPM連結

npm link 是一個允許您在專案和依賴項之間建立符號連結的過程。首先，您需要進入目錄wrapper-with-poo並執行以下命令。

npm link

這將獲取您的套件並在 npm 全域資料夾中建立符號連結。

/Users/vega/.nvm/versions/node/v10.15.0/lib/node_modules/wrap-with-poo -> /Users/vega/dev/npm/wrap-with-poo

這意味著您的專案只需一個簡單的步驟即可在任何專案中使用。您需要做的下一件事是進入專案 wrap-with-poo-testing 並執行以下命令。

npm link wrap-with-poo

這將輸出以下內容： __/Users/vega/dev/npm/wrap-with-poo-testing/node_modules/wrap-with-poo -> /Users/vega/.nvm/versions/node/v10.15.0/lib /node_modules/wra

p-with-poo -> /Users/vega/dev/npm/wrap-with-poo__

這就是全部內容，無需安裝依賴項。您已準備好開始編寫一些程式碼來使用新插件。打開 app.js 並新增以下程式碼。

const poo = require('wrap-with-poo');
const boring = 'This is a boring string';
const fun = poo(boring);

console.log(fun);

並從集成終端執行以下命令

node app.js

你會得到以下輸出

💩This is a boring string💩

發布原始碼

現在我們知道我們的專案正在發揮作用，是時候將其公開供所有人使用了。如果您還沒有這樣做，我會將您的專案加入到 Github 或您喜歡的任何原始程式碼託管位置。

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/cfaddict/wrap-with-poo.git
git push -u origin master

現在它位於 Github 上，返回並在 package.json 中加入一個條目，以便每個人都知道在哪裡可以使用主頁鍵找到原始程式碼。

{
  "name": "wrap-with-poo",
  "version": "0.1.0",
  "description": "This package will wrap any string you give it with the poop emoji",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "node",
    "npm",
    "poop"
  ],
  "author": "Dan Vega",
  "license": "MIT",
  "homepage": "https://github.com/cfaddict/wrap-with-poo"
}

發布 NPM 包

現在是時候將我們的專案發佈到 npm 以便任何人都可以使用它了。如果這是您第一次發布包，請在wrap-with-poo 目錄中開啟終端，然後鍵入以下命令。

npm adduser

這將要求您提供 npm 帳戶訊息，例如使用者名稱、密碼和電子郵件。

vega wrap-with-poo (master) $ npm adduser
Username: therealdanvega
Password:
Email: (this IS public) [email protected]
Logged in as therealdanvega on https://registry.npmjs.org/.

現在您已準備好發布，但您需要記住一些事情。首先，每個 npm 套件必須有一個唯一的名稱。我會前往npm并快速搜尋你的包。我已經發布了套件wrapper-with-poo，所以你的套件需要一個新的唯一名稱。

接下來您需要知道的是您的版本號碼很重要。我從 0.0.1 開始，然後從那裡開始工作。發布特定版本後，您將無法再次發布相同版本。將許多功能建置到一個版本中然後發布是一個好主意。如果你跑

npm version

它會告訴您目前的版本是什麼。

{ 'wrap-with-poo': '0.1.0',
  npm: '6.7.0',
  ares: '1.15.0',
  cldr: '33.1',
  http_parser: '2.8.0',
  icu: '62.1',
  modules: '64',
  napi: '3',
  nghttp2: '1.34.0',
  node: '10.15.0',
  openssl: '1.1.0j',
  tz: '2018e',
  unicode: '11.0',
  uv: '1.23.2',
  v8: '6.8.275.32-node.45',
  zlib: '1.2.11' }

如果一切看起來都不錯，您可以透過執行來發布您的新專案

npm publish

這可能需要幾秒鐘，但如果一切順利，你的包包現在應該在 npm 上。

恭喜你發布了你的第一個 npm 包！！！

現在您可以進入任何已有 package.json 的專案並輸入以下內容

npm install wrap-with-poo

就像我們在上面的測試範例中所做的那樣使用它。

文件

我知道有些人說你應該從一開始就建立文件，但我並不總是確定我的程式碼最終會是什麼樣子，所以我通常會等待。在專案的根目錄中建立 README.md 並加入有關專案的一些資訊。

• 你的 npm 包是做什麼的？

• 你為什麼創造它。

• 你如何安裝它？

• 有任何配置選項嗎？

結論

正如我在本文開頭所說，我不敢相信我這個週末發布了我的第一個 npm 包。直到現在我才真正需要這樣做，但我真的很高興知道它是多麼容易。如果這是您的第一個 npm 軟體包，請在您的軟體包上線後給我留下一些評論或推文！

快樂編碼！

和

本文首先發佈在我的部落格：https://www.danvega.dev/blog 如果您覺得這篇文章有趣，請考慮訂閱我的電子報或在Twitter上關注我。

原文出處：https://dev.to/therealdanvega/creating-your-first-npm-package-2ehf