如何使用 ES6 构建、测试和发布 Node 模块

过去几周，我在Twitch上直播开发随机代码生成器，玩得不亦乐乎。截至撰写本文时，我已经向 GitHub 上的应用程序仓库合并了 70 多个 pull request。这让我想到——如果人们可以在自己的应用程序中使用同样的搞笑随机代码，在网络上创造更多欢乐，那会怎么样呢？

在@whitep4nth3r/random-code之前，我从未真正构建或发布过 Node 模块，而Alec Mather 的这篇博文对我理解相关概念非常有帮助。我学到的最重要的一点是，如果我们想用 ES6 编写 Node 模块的代码，我们需要一种方法将代码从 ES6 转译为 ES5，以便它能与任何人的代码兼容。

我并不打算在这篇文章中重新编写教程，而是把整个过程记录下来，方便以后自己参考。随着时间的推移，我感觉自己会越来越擅长构建和发布 Node 模块！

如果您想从头到尾观看这个过​​程，请观看 YouTube 上的这段五分钟快速视频，其中展示了我学习如何创建我的第一个 node 模块并将其发布到 npm——在 Twitch 上直播！

让我们一步一步地学习如何创建、构建和发布用 ES6 编写的包到 npm。

先决条件

请确保您的计算机上已安装 Node.js 和 npm。

在 npm 上创建一个帐户

您需要此帐户才能发布您的软件包。请在此处注册。

通过终端登录 npm。

npm login在终端中运行命令，并输入您的用户名、密码和电子邮件地址。这将确保您稍后可以通过命令行界面 (CLI) 发布您的软件包。

设置您的项目

为你的项目创建一个新目录，用于存放你的 npm 包的代码。导航到该目录。对于非作用域模块（不带 @scope-name 前缀），运行命令npm init。这将为你的项目创建 package.json 文件。

我的第一个 Node 模块决定创建一个作用域公共包，这样它就能包含我的品牌名称。要初始化一个作用域模块，请运行 `node -m` npm init --scope=@scope-name。按照终端中的说明配置你的项目。点击此处了解更多关于作用域公共包的信息。

mkdir my-new-npm-package
cd my-new-npm-package
npm init
# or for scoped packages
npm init --scope=@scope-name

这是通过 CLI 为@whitep4nth3r /random-code 创建的 package.json 文件。

{
  "name": "@whitep4nth3r/random-code",
  "version": "1.0.0",
  "description": "Need some code for your project? We've got you covered. Choose your language. Choose how much code. BÄM! You got code.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "random"
  ],
  "author": "whitep4nth3r",
  "license": "MIT"
}

在新项目的根目录下，创建以下目录：

• src— 我们将在这里存储 ES6 代码文件
• dist— 我们将把转译后的 ES5 代码存储在这里。

在文件夹内src创建一个index.js文件。该文件将导出此目录中的所有 ES6 代码。

最后，在项目根目录创建一个index.js文件，并添加这行代码。

module.exports = require("./dist");

这是应用程序的入口点，正如mainpackage.json 文件中的相应字段所指定的那样。它会指示所有使用该 Node 模块的代码加载dist目录中的所有内容，其中包含我们转译后的 ES5 代码。

目前为止，你的项目结构应该是这样的：

![alt="VS Code 中的文件夹树截图，显示了 dist 目录、src 目录（其中包含 index.js）以及根目录下的 inside.js 和 package.json"]o( https://images.ctfassets.net/56dzm01z6lln/4pIbMqfR6ltok2SRUEyPGn/a5d9ab4f652d4a6b306049894a895a03/folder_structure.png )

在 src 目录中编写一些 ES6 代码

这部分我帮不了你——不过尽情发挥吧！确保你想从src目录中导出的每个函数index.js都以 `export` 为前缀。你可以参考 GitHub 上 random-code node 模块的对应文件。

此时，您可能需要为您的 node 模块包创建一个 git 仓库，以确保您的辛勤工作得到版本控制。

使用 Babel 将你的 ES6 代码转译为 ES5。

我们需要安装两个开发依赖项，才能将 ES6 代码转译为 ES5。

在终端中运行：

npm install --save-dev @babel/cli @babel/core @babel/preset-env

接下来，在项目根目录下添加一个.babelrc文件，并添加以下几行代码：

{
  "presets": ["@babel/preset-env"]
}

接下来，将以下构建命令添加到您的 package.json 文件中。

"scripts": {
  "build": "babel src -d dist"
}

现在，当你运行npm run build`babel` 时，它会将目录中的所有代码src从 ES6 转译为 ES5，并将其放入dis`t` 目录中。请确保npm run build每次想在不同的目录或项目中本地测试代码时都运行 `babel`。

等等，我可以在本地测试我的 npm 包吗？当然可以！方法如下。

发布前请测试您的 Node 模块。

我们可以使用该方法npm link在不发布 npm 包的情况下测试其功能。

在你的 Node 模块项目目录中，运行以下命令：

npm link

在现有项目目录或您希望测试此 npm 包的新目录中（假设项目已有 package.json 文件），运行以下命令：

npm link my-new-npm-package
# or for scoped projects
npm link @scope-name/my-new-npm-package 

现在您可以像导入已发布到 npm 的 Node 模块一样导入它，例如：

import { getLanguages, generateRandomCode } from "@whitep4nth3r/random-code";

发布你的新节点模块

当你测试完新的节点模块并且对结果满意后，就可以发布它了！

在 npm 包目录的根目录下，确保您已按照上述说明通过 CLI 登录到 npm，然后在终端中运行以下命令：

# for unscoped packages
npm publish
# for scoped packages
npm publish --access public

每次发布时，请确保将 package.json 中的版本号递增。

就是这样！

在 npm 上查看 @whitep4nther/random-code node 模块。

npm 生态系统是分发实用可复用代码块的绝佳途径。通过学习如何构建包并将其发布到 npm，我感觉我的 Web 开发技能得到了显著提升。祝你创建第一个 npm 包一切顺利！

如果你在 npm 上试用了 random-code 包，我很想听听你的使用体验！来 Twitch 上跟我打个招呼吧！

记住，要创造东西，学习知识，热爱你所做的事情。