在我们以前的练习中，我们使用Typescript构建了浏览器扩展。这涉及一系列步骤，包括创建一个Vite项目和自定义以满足浏览器扩展的特定要求。尽管该过程不是特别冗长或复杂，但我们可以通过使用节点CLI（命令行接口）自动化它来进一步简化它。如果您是CLI的新手，请让我介绍我创建的一个！

创建一个节点项目

自然，第一步是初始化并设置我们的节点项目。使用以下命令为我们的代码创建文件夹并生成基本软件包。

mkdir create-browser-extension-vite && cd create-browser-extension-vite NPM Init-是的

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

接下来，我决定修改生成的软件包。json以包括“类型”：“模块”。有了这一点，我们将告知节点将项目中的.js文件解释为ES模块，而不是commonjs模块。这是更新的软件包。进行一些调整后。

{ “名称”：“ create-browser-extension-vite”， “版本”：“ 1.0.0”， “脚本”：{ “ test”：“ echo \”错误：未指定的测试\“ && exit 1” }，， “ PublishConfig”：{ “访问”：“公共” }，， “关键字”：[ “ CLI”， “创建项目” ]，， “作者”： ””， “许可证”：“ ISC”， “描述”：“使用Vite创建浏览器扩展程序的CLI工具”， “类型”：“模块” }

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

第一步

首先创建一个名为[

的新文件夹中创建一个名为 ＃！/usr/bin/env节点 console.log（“ Hello World”）;
此文件将充当您的命令的入口点，并确保它可以在您的计算机上直接在计算机上直接ran

在全球安装后，将以下字段添加到package.json。这是给出的

#!/usr/bin/env node

console.log("hello world");

“ bin”：“ bin/create-project”

现在是时候测试我们到目前为止构建的内容了。首先，我们通过运行本地安装软件包：

NPM链接 create-browser-extension-vite //执行CLI

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

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

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

处理用户输入

#!/usr/bin/env node

console.log("hello world");

让我们迈出迈向目标！该CLI的目的是用单个命令生成功能齐全的打字稿浏览器扩展程序。为此，CLI将接受几个可选参数。

[2

名称

：如果提供，将创建一个带有指定名称的文件夹。否则，当前文件夹将包含项目。

：如果指定，将为该项目初始化git存储库。

：如果指定，将自动安装项目依赖项。

是
• ：跳过所有提示并使用默认设置生成项目。
的第一步是创建一个新文件SRC/CLI.JS，该文件将处理所有用于收集用户首选项的逻辑。该新模块将从当前
• 调用。 ＃！/usr/bin/env节点 从“ ../src/cli.js”导入{cli}; CLI（Process.ARGV）;
• 要简化收集用户首选项的过程，我们将使用两个有用的库：
• ARG：一个有力的参数解析器，用于处理命令行输入。
@询问器/提示：用于创建优雅和交互式命令行接口的库。

从“ arg”导入arg; 从“@询问器/提示”导入{escrence}; 异步函数提示formissingOptions（options）{ if（options.skipprompts）{ 返回选项； } 返回 { ...选项， git： options.git || （等待确认（{消息：“初始化git存储库？”}），），）， }; } 函数parseargumentsIntooptions（rawargs）{ const args = arg（ { “ - git”：布尔人， “ - 助手”：布尔， “ - 是的”：布尔， “ - 安装”：布尔， “ -g”：“ - git”， “ -y”：“ - 是的”， “ -i”：“ - 安装”， }，， { argv：rawargs.slice（2）， } ）； 返回 { skipprompts：args [“ - 是”] ||错误的， git：args [“ - git”] ||错误的， runinstall：args [“ - install”] ||错误的， projectName：args ._ [0]， }; } 导出异步函数cli（args）{ 令options = parseargumentsIntooptions（args）; 选项=等待提示formissingOptions（options）; console.log（options）; }
我会留给您添加一个额外的选项，以显示基本的帮助消息。这将涉及引入由-help或-h参数控制的新用户偏好。如果提供了此参数，则CLI应显示一个简单的手册，以说明命令的用法。您可以在下面链接的存储库中参考我的解决方案。

创建项目

#!/usr/bin/env node

console.log("hello world");

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

文件夹结构应该看起来像这样，您可以在我的github存储库中找到这些文件的内容。如果您对它们的创建方式感到好奇，请查看我以前的帖子，在这里我讨论使用Typescript构建浏览器扩展程序。 [2
我们的代码将利用模板文件夹中的文件来生成用户的新浏览器扩展程序，以下软件包将在实现这一目标时特别有用：

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

NCP：促进文件的递归复制。
粉笔：添加终端字符串样式。
execa：简化运行的外部命令，例如git。

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);
}

LIST：允许在为用户提供干净的进度概述时定义任务列表。

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

从“ ./main.js”导入{createProject}; ... 导出异步函数cli（args）{ 令options = parseargumentsIntooptions（args）; 选项=等待提示formissingOptions（options）; 等待CreateProject（选项）; }

从“粉笔”导入粉笔； 从“ NCP”导入NCP； 从“路径”导入路径； 从“ util”导入{promisify}; 从“ execa”导入{execa}; 从“ LIST”进口； 从“ pkg-install”导入{projectInstall}; const copy = promisify（ncp）; 异步函数copyTemplateFiles（options）{ 返回副本（options.templatedirectory，options.targetDirectory，{ Clobber：false， }）; } 异步函数initgit（options）{ const结果=等待execa（“ git”，[“ init”]，{ CWD：options.targetDirectory， }）; if（result.failed）{ 返回Promise.Repject（新错误（“无法初始化Git”））; } 返回; } 导出异步函数createProject（options）{ 选项= { ...选项， targetDirectory：options.projectName || process.cwd（）， }; const currentfileurl = import.meta.url; const templatedir =路径。溶解（ new URL（CurrentFileurl）.pathname， “../../模板” ）； options.templatedIrectory = templatedir; const任务= new LIST（[ { 标题：“复制项目文件”， 任务：（）=> copyTemplateFiles（options）， }，， { 标题：“初始化git”， 任务：（）=> initgit（options）， 已启用：（）=> options.git， }，， { 标题：“安装依赖项”， 任务：（）=> ProjectInstall（{ CWD：options.targetDirectory， }）， skip ：（）=> ！options.runinstall ？ “通过 - 安装以自动安装依赖关系” ： 不明确的， }，， ）; 等待Tasks.run（）; console.log（“ ready％s project”，chalk.green.bold（“ done”））; 返回true; }

上面的代码利用LIST执行生成新项目所需的一系列操作，从使用NCP复制文件到设置GIT存储库。还请注意，我们如何使用Prosisify将NCP的基于回调的复制方法转换为基于承诺的功能，从而使代码更可读和可维护。 就是这样！这些是我遵循的步骤来创建新的CLI工具，这是我将用于简化新浏览器扩展名的创建的步骤。您也可以使用它！因为我已经在NPM上发布了它，以供任何人生成自己的扩展。

参考

如何用node.js

npm install ncp chalk execa pkg-install listr