在之前的练习中，我们使用 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);
为了简化收集用户偏好的过程，我们将使用两个有用的库：
系统特点：技术领先：系统基于被广泛使用的Windows平台开发，集百家之所长，技术领先、功能完备； 快速建店：只需简单设置，3分钟即可以建立一个功能完备的网上商城； 操作简便：软件操作界面由专业设计人员设计，采用人性化的布局，界面规范，操作简捷； 安装方便：只需传到您的虚拟空间即可； HTML编辑器：内置优秀的HTML在线编辑器； 可扩展性：软件构架灵活，考虑未来功能扩充之需要，具有较强的可扩展性
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
