如何创建和发布 npm 模块

介绍

在本教程中，您将创建自己的 npm 包并将其发布到 npm 存储库。

通过这样做，您将了解：

如何创建 npm 包
如何在发布之前在本地安装以测试其功能
如何使用 ES6 import 语法或 Node.js require 语句安装和使用已发布的包
如何管理包的语义版本
如何使用新版本更新软件包并再次发布

准确地说，您将构建一个包，它将返回指定用户名的 GitHub 存储库列表，并按每个存储库的星号排序。

先决条件

您需要以下内容来完成本教程：

Git 版本控制的有效安装
Node.js 已在本地安装，您可以按照本页的说明进行操作

本教程已使用 Node v13.14.0、npm v6.14.4 和 axios v0.20.0 进行验证

步骤 1 — 初始设置

创建一个名为的新文件夹github-repos-search并初始化一个package.json文件

mkdir github-repos-search
cd github-repos-search
npm init -y

通过从文件夹运行以下命令将当前项目初始化为 git 存储库github-repos-search：

git init .

创建一个.gitignore文件来排除该文件夹。在文件node_modules中添加以下内容.gitignore

node_modules

安装axios将用于调用 GitHub API 的包。

npm install axios@0.20.0

你的package.json遗嘱现在看起来是这样的：

{
  "name": "github-repos-search",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "axios": "^0.20.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在文件中package.json，name 的值为github-repos-search。因此，发布到 npm 仓库后的包名称将变为github-repos-search。此外，该名称在 npm 仓库中必须是唯一的，因此首先请通过来检查该 npm 仓库是否已存在https://www.npmjs.com/package/<your_repository_name_from_package_json>。否则，如果该名称已存在，则在将包发布到 npm 仓库时会出错。

第 2 步 — 编写代码

创建一个名为的新文件index.js并在其中添加以下内容：

const axios = require('axios');
const getRepos = async ({
  username = 'myogeshchavan97',
  page = 1,
  per_page = 30
} = {}) => {
  try {
    const repos = await axios.get(
      `https://api.github.com/users/${username}/repos?page=${page}&per_page=${per_page}&sort=updated`
    );
    return repos.data
      .map((repo) => {
        return {
          name: repo.name,
          url: repo.html_url,
          description: repo.description,
          stars: repo.stargazers_count
        };
      })
      .sort((first, second) => second.stars - first.stars);
  } catch (error) {
    return [];
  }
};

getRepos().then((repositories) => console.log(repositories));

我们先来了解一下代码。

您已经创建了一个接受具有、和属性getRepos的可选对象的函数。usernamepageper_page
然后使用对象解构语法从对象中获取这些属性。
将对象传递给函数是可选的，因此如果对象未传递给函数，我们将其初始化为默认值，如下所示：

{
  username = 'myogeshchavan97',
  page = 1,
  per_page = 30
} = {}

赋值空对象的原因是为了避免在对象未传递{}时解构时出错。查看我之前的文章，详细了解解构。username
然后在函数内部，通过传递所需的参数来调用 GitHub API，以获取按更新日期排序的指定用户的存储库。

const repos = await axios.get(
      `https://api.github.com/users/${username}/repos?page=${page}&per_page=${per_page}&sort=updated`
    );

在这里，您使用 async/await 语法，因此该getRepos函数被声明为异步。
map然后使用 Array方法从响应中仅选择必需的字段

repos.data
  .map((repo) => {
    return {
      name: repo.name,
      url: repo.html_url,
      description: repo.description,
      stars: repo.stargazers_count
    };
  })

然后按星级降序对结果进行排序，因此列表中的第一个元素将具有最高的星级

.sort((first, second) => second.stars - first.stars);

如果有任何错误，您将在 catch 块中返回一个空数组。
由于该getRepos函数被声明为async，您将得到一个承诺，因此您可以使用.then处理程序来获取函数调用的结果getRepos并打印到控制台。

getRepos().then((repositories) => console.log(repositories));

步骤 3 — 执行代码

现在，通过从命令行执行以下命令来运行 index.js 文件：

node index.js

您将看到包含前 30 个存储库的以下输出：

在文件中，您没有提供用户名，因此默认显示我的存储库。
让我们将其更改为以下代码：

getRepos({
  username: 'gaearon'
}).then((repositories) => console.log(repositories));

通过执行命令再次运行该文件node index.js，您将看到以下输出：

您可以选择传递page和per_page属性来更改响应以获取前 50 个存储库。

getRepos({
  username: 'gaearon',
  page: 1,
  per_page: 50
}).then((repositories) => console.log(repositories));

现在，您知道该功能已正常运行。让我们导出此模块，以便您可以getRepos从任何其他文件调用此方法。

因此从文件中删除以下代码

getRepos({
  username: 'gaearon',
  page: 1,
  per_page: 50
}).then((repositories) => console.log(repositories));

并添加以下行

module.exports = { getRepos };

在这里，您将getRepos函数作为对象的属性导出，因此以后如果您想导出任何其他函数，您可以轻松地将其添加到对象中。

所以上面这行代码等同于

module.exports = { getRepos: getRepos };

步骤 4 — 使用 require 语句测试创建的 npm 包

现在，您已完成 npm 包的创建，但在将其发布到 npm 存储库之前，您需要确保在使用require或import语句时它能够正常工作。

有一个简单的方法可以检查这一点。在文件夹内部的命令行中执行以下命令github-repos-search：

npm link

执行npm link命令会在全局 npm 文件夹内为当前包创建一个符号链接node_modules（与安装全局 npm 依赖项的文件夹相同）

所以现在您可以在任何项目中使用您创建的 npm 包。

现在，在您的桌面上创建一个新文件夹，例如，使用任意名称test-repos-library-node并初始化一个package.json文件，以便您可以确认该包已正确安装：

cd ~/Desktop
mkdir test-repos-library-node
cd test-repos-library-node
npm init -y

如果您还记得的话，我们的包文件中的名称属性package.json是github-repos-search这样的，所以您需要使用相同的名称来要求包。

现在，从文件夹内部执行以下命令test-repos-library-node以使用您创建的包：

npm link github-repos-search

创建一个名为的新文件index.js并在其中添加以下代码：

const { getRepos } = require('github-repos-search');

getRepos().then((repositories) => console.log(repositories));

在这里，您已直接从文件夹导入了包node_modules（这仅仅是因为您使用 npm link 链接了它才成为可能）

现在，通过从命令行执行来运行该文件：

node index.js

您将看到显示正确的输出：

这证明当你在 npm 存储库上发布 npm 包时，任何人都可以通过安装它并使用 require 语句来使用它。

步骤 5 — 使用 import 语句测试创建的 npm 包

您已使用 require 语句验证了包的有效性。让我们使用 ES6 import 语句来验证一下。

通过从桌面文件夹执行以下命令来创建一个新的 React 项目：

cd ~/Desktop
npx create-react-app test-repos-library-react

现在，从文件夹内部执行以下命令test-repos-library-react以使用您创建的包：

npm link github-repos-search

现在，打开src/App.s文件并将其替换为以下内容：

import { getRepos } from 'github-repos-search';
import React from 'react';
import './App.css';

function App() {
  getRepos().then((repositories) => console.log(repositories));

  return (
    <div className="App">
      <h2>Open browser console to see the output.</h2>
    </div>
  );
}
export default App;

通过从终端执行以下命令来启动 React 应用程序：

yarn start

如果您检查浏览器控制台，您将看到预期的输出：

这证明当你在 npm 存储库上发布 npm 包时，任何人都可以通过安装它并使用 import 语句来使用它。

第 6 步 — 发布到 npm 仓库

现在，您已验证该包运行正常。
是时候将其发布到 npm 仓库了。

切换回github-repos-search创建 npm 包的项目文件夹。

让我们在package.json文件中添加一些元数据来显示有关包的更多信息

这是最终package.json文件：

{
  "name": "github-repos-search",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "homepage": "https://github.com/myogeshchavan97/github-repos-search",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/myogeshchavan97/github-repos-search.git"
  },
  "dependencies": {
    "axios": "^0.20.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "github",
    "repos",
    "repositories",
    "sort",
    "stars"
  ],
  "author": "Yogesh Chavan <myogeshchavan97@gmail.com>",
  "license": "ISC"
}