в нашем предыдущем упражнении мы построили расширение браузера с помощью TypeScript. Это включало серию шагов, в том числе создание проекта Vite и настройка его для удовлетворения конкретных требований расширений браузера. Хотя процесс не был особенно длительным или сложным, мы можем упростить его, автоматизируя его с помощью Node CLI (интерфейс командной строки). Если вы новичок в CLI, позвольте мне пройти вас через тот, который я создал!

] Создать проект узла

, естественно, первый шаг - инициализация и настроить наш проект узла. Используйте следующие команды, чтобы создать папку для нашего кода и сгенерировать базовый файл package.json:

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

Далее я решил изменить сгенерированный пакет. При этом мы сообщим 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"
}

] Первые шаги

начнем с создания файла с именем create-project в новой папке с именем bin :
]

#!/usr/bin/env node

console.log("hello world");

Этот файл будет действовать как точка входа для вашей команды и убедиться, что он может быть REN напрямую на вашем компьютере, как только пакет установлен во всем мире, добавьте следующее поле в Package.json:

"bin": "bin/create-project"

теперь пришло время проверить то, что мы построили до сих пор. Сначала мы устанавливаем пакет локально, работая:
]

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

, однажды связанная, у вас будет новая команда CLI под названием Create-Browser-Extension-Vite, которая в настоящее время печатает на консоли «Hello World».

и это все, что нужно, чтобы создать базовый CLI! Отсюда вы можете использовать всю мощность экосистемы узла, чтобы построить все, что вы можете себе представить.

] Обработка пользовательского ввода

давайте сделаем еще один шаг к нашей цели! Цель этого CLI - генерировать полностью функциональное расширение браузера TypeScript с помощью одной команды. Для этого CLI примет несколько дополнительных параметров.

]
• ] name : если предоставлена, будет создана папка с указанным именем. В противном случае текущая папка будет содержать проект.
]
• ] git : если указано, репозиторий GIT будет инициализирован для проекта.
]
• ] install : если указано, зависимости проекта будут установлены автоматически.
]
• ] Да : пропускает все подсказки и генерирует проект с настройками по умолчанию.

первый шаг - создать новый файл, src/cli.js, который будет обрабатывать всю логику для сбора пользовательских предпочтений. Этот новый модуль будет вызван из текущего create-project file:
]

#!/usr/bin/env node

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

cli(process.argv);

, чтобы упростить процесс сбора пользовательских предпочтений, мы будем использовать две полезные библиотеки:

npm install @inquirer/prompts arg

]
• ] ARG: мощный анализатор аргумента для обработки входов командной строки.
]
• ] @Inquirer/Подсказки: библиотека для создания элегантных и интерактивных интерфейсов командной строки.
]

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 должен отобразить простое руководство, объясняющее использование команды. Вы можете ссылаться на мое решение в репозитории, связанном ниже.

] Создание проекта

на этом этапе проект будет создан на основе предпочтений, выбранных на предыдущем этапе. Мы начнем с создания папки с именем шаблона и копирования в него файлов, которые составляют сгенерированный проект.

структура папок должна выглядеть так, и вы можете найти содержимое этих файлов в моем репозитории GitHub. Если вам интересно, как они были созданы, ознакомьтесь с моим предыдущим постом, где я обсуждаю создание расширения браузера с TypeScript.

Наш код будет использовать файлы в папке шаблона для создания нового расширения пользователя, и следующие пакеты будут особенно полезны для выполнения этого:
]

npm install ncp chalk execa pkg-install listr

]
• ] NCP: облегчает рекурсивное копирование файлов.
]
• ] Мел: добавляет стиль терминальной строки.
]
• ] EXECA: упрощает запуск внешних команд, таких как GIT.
• ] PKG-Install: автоматически запускает либо установку пряжи, либо установку NPM на основе предпочтений пользователя.
]
• ] LIST: позволяет определять список задач, предоставляя обзор чистого прогресса для пользователя.

мы начнем с создания нового файла, 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. Также обратите внимание, как мы использовали Speakify для преобразования метода копирования на основе обратного вызова в функцию, основанную на обещаниях, что делает код более читаемым и поддерживаемым.

и это все! Это те шаги, которые я выполнил, чтобы создать свой новый инструмент CLI, который я буду использовать для оптимизации создания моих новых расширений браузера. Вы тоже можете использовать это! Потому что я опубликовал его на NPM, чтобы кто -либо мог генерировать свои собственные расширения.

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

] Ссылки

как построить CLI с node.js