在之前的练习中，我们使用 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 将接受几个可选参数。
- name：如果提供，将创建具有指定名称的文件夹。否则，当前文件夹将包含该项目。
- git：如果指定，将为项目初始化一个 git 存储库。
- install：如果指定，将自动安装项目依赖项。
- yes：跳过所有提示并使用默认设置生成项目。
第一步是创建一个新文件 src/cli.js，它将处理收集用户首选项的所有逻辑。这个新模块将从当前的 create-project 文件中调用：
#!/usr/bin/env node import { cli } from "../src/cli.js"; cli(process.argv);
为了简化收集用户偏好的过程，我们将使用两个有用的库：
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 构建浏览器扩展。
我们的代码将利用模板文件夹中的文件来生成用户的新浏览器扩展，以下包在实现此目的时特别有用：
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
参考
如何使用 node.js 构建 cli
