Logo

菜单

发布于 2026-01-06 0 阅读
0

创建您专属的NPM名片！第一部分：如何制作您自己的NPM名片

创建您自己的 NPM 卡！第一部分

如何制作自己的 NPM 名片

如何制作自己的 NPM 名片

在本系列文章的两部分中，我将介绍创建 NPM Business 风格名片所需的步骤，该名片将通过简单的 NPX 命令显示在终端中。

这篇文章的灵感来源于 Ridermansb 的一个仓库。他的仓库在这里。他的仓库包含更多构建和脚本相关的内容。我们这里只关注如何让你的 npm 名片准备就绪！

我的代码仓库链接在这里。

假设

本教程假设您已拥有 GitHub 帐户，并且了解如何将 NPM 包安装到项目中。我还假设您熟悉 Node.js 以及命令行操作。虽然步骤并不难，但对于一些“简单”的步骤，我不会赘述。

创建项目

目录

在您选择的目录中，创建项目目录。我将目录命名为我的包名。我建议您使用自己的名字作为目录/包名。毕竟，这相当于您的 npm 名片。

输入命令后，mkdir yourname && cd yourname您就可以创建并进入您的新目录了。

Git 初始化

输入以下命令初始化 Git 仓库git init：

添加 Git 远程仓库

你有GitHub账号吗？

如果您有 GitHub 帐户，请创建一个新的仓库并复制 Git URL。它应该是您新仓库的 URL，.git末尾带有 `.git` 字样。它看起来会像这样，https://github.com/cdthomp1/cameronthompson.git但会包含您的用户名和仓库名称。
复制完成后，输入 `git git url` git remote add origin your/repo/url。它看起来会像这样：git remote add origin https://github.com/cdthomp1/cameronthompson.git

还没有GitHub账号？

如果您还没有 GitHub 账号，请阅读这篇GitHub 入门教程。该教程将引导您了解 GitHub 的基本概念、如何创建仓库和分支、提交代码以及如何使用 PR。完成教程后，请返回此处继续执行上述步骤。

NPM 初始化

要为项目安装所需的包或其他包，我们需要初始化配置package.json文件。创建和填写配置文件的最简单方法package.json是在项目目录下的终端中运行npm init命令。如果您之前做过类似的事情，应该会很熟悉。对于 NPM 新手，npm init系统会询问一些项目详情。您可以参考我下面的回答，可以照搬我的答案，也可以根据自己的情况进行修改。这完全取决于您。

有关 package.json 的更多信息，请点击此处。

开放代码

如果你的 VS Code 已添加到系统路径，则可以通过输入以下命令在当前目录中打开 VS Code。code .

创建 Index.js

创建一个名为 index.js 的新文件。我们的代码将放在这里。

以下是名片的代码。我使用了几个插件包来辅助名片的样式设计和功能添加。插件包的链接如下：

您可以通过执行以下操作来安装上述所有软件包。npm install boxen chalk clear inquirer open

以下代码包含我参与的各个平台的链接。我还添加了我的网站链接和一段关于我的简短介绍。如果您找到了其他想要使用的控制台样式包，可以为您的卡片带来不同的外观和风格，请随意使用！当然，如果您参与了以下未列出的其他平台，也请务必添加！打造属于您自己的专属卡片！

无论你决定用什么方式制作卡片，都要将代码添加到你index.js之前创建的文件中。

#!/usr/bin/env node

"use strict";

const boxen = require("boxen");
const chalk = require("chalk");
const inquirer = require("inquirer");
const clear = require("clear");
const open = require("open");

clear();

const prompt = inquirer.createPromptModule();

// Questions after the card 
const questions = [
    {
        type: "list",
        name: "action",
        message: "What you want to do?",
        choices: [
            {
                name: `Send me an ${chalk.green.bold("email")}?`,
                value: () => {
                    open("mailto:camthomp96@gmail.com");
                    console.log("\nDone, see you soon.\n");
                }
            },
            {
                name: "Just quit.",
                value: () => {
                    console.log("Good Bye!\n");
                }
            }
        ]
    }
];

// Data for the card
const data = {
    name: chalk.bold.green("        Cameron Thompson"),
    work: `${chalk.white("Student Software Developer")} ${chalk
        .hex("#2b82b2")
        .bold("BYU-I")}`,
    blog: chalk.gray("https://dev.to/") + chalk.whiteBright("cdthomp1"),
    twitter: chalk.gray("https://twitter.com/") + chalk.cyan("DeveloperCam"),
    github: chalk.gray("https://github.com/") + chalk.green("cdthomp1"),
    linkedin: chalk.gray("https://linkedin.com/in/") + chalk.blue("cameron-thompson96"),
    web: chalk.cyan("https://cameronthompson.io"),
    npx: chalk.red("npx") + " " + chalk.white("cameronthompson"),

    labelWork: chalk.white.bold("       Work:"),
    labelBlog: chalk.white.bold("     Blog:"),
    labelTwitter: chalk.white.bold("    Twitter:"),
    labelGitHub: chalk.white.bold("     GitHub:"),
    labelLinkedIn: chalk.white.bold("   LinkedIn:"),
    labelWeb: chalk.white.bold("        Web:"),
    labelCard: chalk.white.bold("       Card:")
};

// Build the card
const me = boxen(
    [
        `${data.name}`,
        ``,
        `${data.labelWork}  ${data.work}`,
        `${data.labelBlog}  ${data.blog}`,
        `${data.labelTwitter}  ${data.twitter}`,
        `${data.labelGitHub}  ${data.github}`,
        `${data.labelLinkedIn}  ${data.linkedin}`,
        `${data.labelWeb}  ${data.web}`,
        ``,
        `${data.labelCard}  ${data.npx}`,
        ``,
        `${chalk.italic(
            "I'm curious, enthusiastic and student most of the time."
        )}`,
        `${chalk.italic("The rest of the time I experiment with my code,")}`,
        `${chalk.italic("to bring my ideas to life.")}`
    ].join("\n"),
    {
        margin: 1,
        float: 'center',
        padding: 1,
        borderStyle: "single",
        borderColor: "green"
    }
);

// Print the card
console.log(me);

// Optional tip to help users use the links
const tip = [
    `Tip: Try ${chalk.cyanBright.bold(
        "cmd/ctrl + click"
    )} on the links above`,
    '',
].join("\n");

// Show the tip 
console.log(tip);

// Ask the Inquirer questions. 
prompt(questions).then(answer => answer.action());
Enter fullscreen mode Exit fullscreen mode

添加 README.md

一个好的 NPM 包应该有一个 README 文件。一个优秀的 NPM 包应该有一个优秀的 README 文件。创建一个 README 文件，并填写以下信息：你的包是什么，它的功能是什么，如何运行它，以及其他有助于用户充分利用该包的信息。

编辑 package.json 文件

由于我们的软件包将是一个可执行文件，而不是一个库，我们需要在package.json文件中添加一个“bin”字段，并填入我们选择的命令名称。因为这相当于我们的名片，所以命令名称应该与我们相关（例如我的全名、GitHub 个人资料名称，或者任何有助于区分你身份的信息）。

以下是我为我的

  "bin": {
    "cameronthompson": "index.js"
  },
Enter fullscreen mode Exit fullscreen mode

现在我的package.json文件看起来是这样的：

{
  "name": "cameronthompson",
  "version": "0.0.1",
  "description": "My personal NPM business card",
  "main": "index.js",
  "bin": {
    "cameronthompson": "index.js"
  },
  "dependencies": {
    "boxen": "^4.2.0",
    "chalk": "^4.1.0",
    "clear": "^0.1.0",
    "inquirer": "^7.3.3",
    "open": "^7.3.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cdthomp1/cameronthompson.git"
  },
  "keywords": [
    "NPM",
    "Business",
    "Card",
    "Node"
  ],
  "author": "Cameron Thompson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/cdthomp1/cameronthompson/issues"
  },
  "homepage": "https://github.com/cdthomp1/cameronthompson#readme"
}
Enter fullscreen mode Exit fullscreen mode

这将确保当有人输入时npx <pacakagename>，我们的代码将作为可执行文件运行。

有关该bin领域的更多信息，请点击此处阅读。

在第二部分中，我将介绍如何在本地测试软件包，以及如何设置 NPM 帐户以便发布软件包！第二部分很快就会发布，请关注我，以便在发布时收到通知！

文章来源：https://dev.to/cdthomp1/create-your-own-npm-card-ejp
掌握 Angular 结构指令 -...
Python网络爬虫入门