创建 CLI 来搭建扩展-js教程-PHP中文网

创建 CLI 来搭建扩展

花韻仙語

发布： 2024-11-20 22:42:01

转载

1126人浏览过

在之前的练习中，我们使用 typescript 构建了一个浏览器扩展。这涉及一系列步骤，包括创建 vite 项目并对其进行定制以满足浏览器扩展的特定要求。虽然该过程并不是特别漫长或复杂，但我们可以通过使用 node cli（命令行界面）实现自动化来进一步简化它。如果您是 cli 新手，请让我引导您完成我创建的 cli！

创建节点项目

当然，第一步是初始化和设置我们的 node 项目。使用以下命令为我们的代码创建一个文件夹并生成一个基本的 package.json 文件：

mkdir create-browser-extension-vite && cd create-browser-extension-vite
npm init --yes

登录后复制

接下来，我决定修改生成的 package.json 以包含“type”：“module”。这样我们将通知 node 将项目中的 .js 文件解释为 es 模块而不是 commonjs 模块。这是经过一些调整后更新的 package.json。

{
  "name": "create-browser-extension-vite",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"error: no test specified\" && exit 1"
  },
  "publishconfig": {
    "access": "public"
  },
  "keywords": [
      "cli",
    "create-project"
  ],
  "author": "",
  "license": "isc",
  "description": "a cli tool to create browser extensions with vite",
  "type": "module"
}

登录后复制

第一步

让我们首先在名为 bin 的新文件夹中创建一个名为 create-project 的文件：

#!/usr/bin/env node

console.log("hello world");

登录后复制

此文件将充当您的命令的入口点，并确保在全局安装软件包后可以直接在您的计算机上运行，请将以下字段添加到 package.json：

"bin": "bin/create-project"

登录后复制

现在是时候测试我们迄今为止构建的内容了。首先，我们通过运行以下命令在本地安装软件包：

npm link
create-browser-extension-vite // execute the cli

登录后复制

链接后，您将拥有一个名为 create-browser-extension-vite 的新 cli 命令，该命令目前仅将“hello world”打印到控制台。

这就是创建基本 cli 所需的全部！从这里，您可以利用 node 生态系统的全部力量来构建您可以想象的任何东西。

处理用户输入

让我们向目标再迈进一步！此 cli 的目标是使用单个命令生成功能齐全的 typescript 浏览器扩展。为了实现这一点，cli 将接受几个可选参数。

创建 CLI 来搭建扩展

name：如果提供，将创建具有指定名称的文件夹。否则，当前文件夹将包含该项目。
git：如果指定，将为项目初始化一个 git 存储库。
install：如果指定，将自动安装项目依赖项。
yes：跳过所有提示并使用默认设置生成项目。

第一步是创建一个新文件 src/cli.js，它将处理收集用户首选项的所有逻辑。这个新模块将从当前的 create-project 文件中调用：

#!/usr/bin/env node

import { cli } from "../src/cli.js";

cli(process.argv);

登录后复制

为了简化收集用户偏好的过程，我们将使用两个有用的库：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

npm install @inquirer/prompts arg

登录后复制

arg：一个强大的参数解析器，用于处理命令行输入。
@inquirer/prompts：用于创建优雅的交互式命令行界面的库。

import arg from "arg";
import { confirm } from "@inquirer/prompts";

async function promptformissingoptions(options) {
  if (options.skipprompts) {
    return options;
  }

  return {
    ...options,
    git:
      options.git ||
      (await confirm({ message: "initialize a git repository?" })),
  };
}

function parseargumentsintooptions(rawargs) {
  const args = arg(
    {
      "--git": boolean,
      "--help": boolean,
      "--yes": boolean,
      "--install": boolean,
      "-g": "--git",
      "-y": "--yes",
      "-i": "--install",
    },
    {
      argv: rawargs.slice(2),
    }
  );

  return {
    skipprompts: args["--yes"] || false,
    git: args["--git"] || false,
    runinstall: args["--install"] || false,
    projectname: args._[0],
  };
}

export async function cli(args) {
  let options = parseargumentsintooptions(args);
  options = await promptformissingoptions(options);
  console.log(options);
}

登录后复制

我将让您添加一个额外的选项来显示基本帮助消息。这将涉及引入由 --help 或 -h 参数控制的新用户首选项。如果提供此参数，cli 应显示一个简单的手册来解释该命令的用法。您可以在下面链接的存储库中参考我的解决方案。

创建项目

在此步骤中，将根据上一阶段选择的首选项创建项目。我们将首先创建一个名为 template 的文件夹，并将构成生成项目的文件复制到其中。

文件夹结构应该如下所示，您可以在我的 github 存储库中找到这些文件的内容。如果您对它们是如何创建的感到好奇，请查看我之前的文章，其中我讨论了使用 typescript 构建浏览器扩展。

创建 CLI 来搭建扩展

我们的代码将利用模板文件夹中的文件来生成用户的新浏览器扩展，以下包在实现此目的时特别有用：

npm install ncp chalk execa pkg-install listr

登录后复制

ncp：促进文件的递归复制。
chalk：添加终端字符串样式。
execa：简化运行 git 等外部命令。
pkg-install：根据用户的偏好自动触发yarn install或npm install。
listr：允许定义任务列表，同时为用户提供清晰的进度概述。

我们将首先创建一个新文件 src/main.js，以包含通过从模板文件夹复制文件来生成项目的代码。

import { createproject } from "./main.js";

...

export async function cli(args) {
  let options = parseargumentsintooptions(args);
  options = await promptformissingoptions(options);
  await createproject(options);
}

登录后复制

import chalk from "chalk";
import ncp from "ncp";
import path from "path";
import { promisify } from "util";
import { execa } from "execa";
import Listr from "listr";
import { projectInstall } from "pkg-install";

const copy = promisify(ncp);

async function copyTemplateFiles(options) {
  return copy(options.templateDirectory, options.targetDirectory, {
    clobber: false,
  });
}

async function initGit(options) {
  const result = await execa("git", ["init"], {
    cwd: options.targetDirectory,
  });
  if (result.failed) {
    return Promise.reject(new Error("Failed to initialize git"));
  }
  return;
}

export async function createProject(options) {
  options = {
    ...options,
    targetDirectory: options.projectName || process.cwd(),
  };

  const currentFileUrl = import.meta.url;
  const templateDir = path.resolve(
    new URL(currentFileUrl).pathname,
    "../../template"
  );
  options.templateDirectory = templateDir;

  const tasks = new Listr([
    {
      title: "Copy project files",
      task: () => copyTemplateFiles(options),
    },
    {
      title: "Initialize git",
      task: () => initGit(options),
      enabled: () => options.git,
    },
    {
      title: "Install dependencies",
      task: () =>
        projectInstall({
          cwd: options.targetDirectory,
        }),
      skip: () =>
        !options.runInstall
          ? "Pass --install to automatically install dependencies"
          : undefined,
    },
  ]);

  await tasks.run();
  console.log("%s Project ready", chalk.green.bold("DONE"));
  return true;
}

登录后复制

上面的代码利用 listr 执行生成新项目所需的一系列操作，从使用 ncp 复制文件到设置 git 存储库。另请注意我们如何使用 promisify 将 ncp 的基于回调的复制方法转换为基于 promise 的函数，使代码更具可读性和可维护性。

就是这样！这些是我创建新 cli 工具时遵循的步骤，我将使用该工具来简化新浏览器扩展的创建。你也可以用它！因为我已将其发布在 npm 上，供任何人生成自己的扩展。

https://github.com/ivaneffable/create-browser-extension-vite