N

npm 创建包 JSon 创建你的第一个 npm 包

2025-05-28

npm 创建包 JSon创建你的第一个 npm 包

这个周末，我开始着手开发我的第一个 npm 包。我简直不敢相信自己写了这么久的代码，竟然从来没想过要创建自己的 npm 包，但现在终于可以开始使用了。我使用 Gridsome 和 Markdown 构建了我的新网站，你可以在这里阅读所有内容。我希望在 Markdown 文件中能够轻松地插入 Twitter 状态并嵌入推文。

我会在以后的博客文章中详细介绍 Gridsome 插件，但现在，我想先演示一下如何创建你的第一个 npm 包。在创建过程中，我学到了一些东西，想与大家分享。

先决条件

我假设你至少知道什么是 node 和 npm，并且之前写过 JavaScript。如果你对这两者都不了解，并且希望我写一些关于如何开始使用它们的文章，请告诉我。

在我们深入研究并开始编写一些代码之前，您需要做一些事情。

创建你的 npm 包

你要做的第一件事是创建一个新文件夹来存放你的 npm 包。在本例中，我将创建一个名为wrap-with-poo的新目录。是的，你没看错。

进入该文件夹并输入以下内容：

npm init
Enter fullscreen mode Exit fullscreen mode

这会询问你一系列问题，然后创建一个 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
Enter fullscreen mode Exit fullscreen mode

编写你的插件

接下来，在 Visual Studio Code 中打开此项目并创建 index.js 文件。创建此文件的原因是，在 package.json 文件中，您指定了这是项目的入口点。在 index.js 文件中添加以下代码：

module.exports = (str) => {
    return `💩${str}💩`;
}
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

NPM安装

在这个项目中，创建一个名为 app.js 的新文件。你将在这里使用新的 wrap-with-poo 包。通常，你会在这里通过运行以下命令来安装所需的 npm 包。

npm install wrap-with-poo
Enter fullscreen mode Exit fullscreen mode

问题在于你还没有发布你的新插件，所以它不在 npm 中。你需要一种在开发过程中在本地引用该包的方法。你可以使用包的绝对路径运行 npm install 。

npm install /Users/vega/dev/npm/wrap-with-poo
Enter fullscreen mode Exit fullscreen mode

这将更新你的 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"
  }
}
Enter fullscreen mode Exit fullscreen mode

如果您需要在包中测试预安装/后安装钩子，那么您可以使用这种方法。如果您不关心本地开发 NPM 项目的最佳方式，那么使用npm link是最好的。

NPM 链接

npm link 是一个允许你在项目和依赖项之间创建符号链接的命令。首先，你需要进入 wrap-with-poo 目录并运行以下命令。

npm link
Enter fullscreen mode Exit fullscreen mode

这将获取您的包并在 npm 全局文件夹中创建指向它的符号链接。

/用户/vega/.nvm/版本/node/v10.15.0/lib/node_modules/wrap-with-poo -> /用户/vega/dev/npm/wrap-with-poo

这意味着只需再简单一步，你的项目就可以在任何项目中使用。接下来你需要做的是进入项目 wrap-with-poo-testing 并运行以下命令。

npm link wrap-with-poo
Enter fullscreen mode Exit fullscreen mode

这将输出以下内容：/Users/vega/dev/npm/wrap-with-poo-testing/node_modules/wrap-with-poo -> /Users/vega/.nvm/versions/node/v10.15.0/lib/node_modules/wrap-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);
Enter fullscreen mode Exit fullscreen mode

并从集成终端运行以下命令

node app.js
Enter fullscreen mode Exit fullscreen mode

您将获得以下输出

💩This is a boring string💩
Enter fullscreen mode Exit fullscreen mode

发布源代码

现在我们知道项目已经运行正常，是时候将其公开供大家使用了。如果你还没有这样做，我建议你将项目添加到 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
Enter fullscreen mode Exit fullscreen mode

现在它已经在 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"
}
Enter fullscreen mode Exit fullscreen mode

发布 NPM 包

现在是时候将我们的项目发布到 npm 了，这样任何人都可以使用它。如果这是你第一次发布包，请在 wrap-with-poo 目录中打开终端并输入以下命令。

npm adduser
Enter fullscreen mode Exit fullscreen mode

这将要求您提供您的 npm 帐户信息，例如用户名、密码和电子邮件。

vega wrap-with-poo (master) $ npm adduser
Username: therealdanvega
Password:
Email: (this IS public) danvega@gmail.com
Logged in as therealdanvega on https://registry.npmjs.org/.
Enter fullscreen mode Exit fullscreen mode

现在您可以发布了，但有几件事需要记住。首先，每个 npm 包都必须有一个唯一的名称。我建议您去npm快速搜索一下您的包。我已经发布了 wrap-with-poo 这个包，所以您的包需要一个新的唯一名称。

接下来你需要知道的是，你的版本号很重要。我从 0.0.1 开始，然后逐步增加。发布特定版本后，就不能再发布相同的版本。最好将一些功能构建到一个版本中，然后再发布该版本。如果你运行

npm version
Enter fullscreen mode Exit fullscreen mode

它会告诉您当前的版本是什么。

{ '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' }
Enter fullscreen mode Exit fullscreen mode

如果一切看起来不错，您可以通过运行来发布新项目

npm publish
Enter fullscreen mode Exit fullscreen mode

这可能需要几秒钟，但如果一切顺利，您的包现在应该在 npm 上线了。

恭喜您发布了您的第一个 npm 包！！！

现在你可以进入任何已经有 package.json 的项目并输入以下内容

npm install wrap-with-poo
Enter fullscreen mode Exit fullscreen mode

并像我们在上面的测试示例中所做的那样使用它。

文档

我知道有些人说应该从一开始就创建文档，但我并不总是确定我的代码最终会是什么样子，所以我通常会等一段时间再写。在项目根目录中创建一个 README.md 文件，并添加一些关于项目的信息。

  • 你的 npm 包有什么作用？
  • 你为什么要创建它？
  • 如何安装它？
  • 有任何配置选项吗？

结论

正如我在本文开头所说，我简直不敢相信我这个周末就发布了我的第一个 npm 包。之前我从未真正想过要这么做，但看到它如此简单，我真的很兴奋。如果这是你的第一个 npm 包，请给我留言，或者等你的包上线后发推文给我！

祝你编程愉快！
Dan

本文最初发布在我的博客https://www.danvega.dev/blog上。如果您觉得这篇文章有趣，请考虑订阅我的新闻通讯或在Twitter上关注我。

文章来源：https://dev.to/therealdanvega/creating-your-first-npm-package-2ehf
Devto 翻译
PREV
启动并运行 VueJS 所需的一切。
NEXT
欢迎主题 - v55