En nuestro ejercicio anterior, construimos una extensión del navegador usando TypeScript. Esto implicó una serie de pasos, incluida la creación de un proyecto VITE y la personalización para cumplir con los requisitos específicos de las extensiones del navegador. Si bien el proceso no fue particularmente largo o complejo, podemos simplificarlo aún más al automatizarlo con una CLI de nodo (interfaz de línea de comandos). ¡Si eres nuevo en clis, déjame guiarte a través de la que he creado!

Crear un proyecto de nodo

Naturalmente, el primer paso es inicializar y configurar nuestro proyecto de nodo. Use los siguientes comandos para crear una carpeta para nuestro código y generar un archivo básico de paquete.json:

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

A continuación, decidí modificar el paquete generado.json para incluir "tipo": "módulo". Con esto informaremos al nodo para interpretar archivos .js en el proyecto como módulos ES en lugar de módulos comunesjs. Aquí está el paquete actualizado.json después de hacer algunos ajustes.

{
  "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"
}

Pinitos

comencemos creando un archivo llamado create-project en una nueva carpeta llamada bin :

#!/usr/bin/env node

console.log("hello world");

Este archivo actuará como el punto de entrada para su comando y para asegurarse de que pueda ser ejecutarse directamente en su computadora Una vez que el paquete esté instalado a nivel mundial, agregue el siguiente campo al paquete.json:

"bin": "bin/create-project"

Ahora es el momento de probar lo que hemos construido hasta ahora. Primero, instalamos el paquete localmente ejecutando:

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

Una vez vinculado, tendrá un nuevo comando CLI llamado Create-Browser-Extension-Vite, que actualmente solo imprime "Hello World" en la consola.

¡y eso es todo lo que se necesita para crear una CLI básica! Desde aquí, puede aprovechar toda la potencia del ecosistema del nodo para construir cualquier cosa que pueda imaginar.

Manejo de la entrada del usuario

¡Demos otro paso hacia nuestro objetivo! El objetivo de esta CLI es generar una extensión de navegador TypeScript totalmente funcional con un solo comando. Para lograr esto, la CLI aceptará varios parámetros opcionales.

• nombre : si se proporciona, se creará una carpeta con el nombre especificado. De lo contrario, la carpeta actual contendrá el proyecto.
• git : si se especifica, se inicializará un repositorio de git para el proyecto.
• install : si se especifica, las dependencias del proyecto se instalarán automáticamente.
• sí : omita todas las indicaciones y genera el proyecto con configuración predeterminada.

El primer paso es crear un nuevo archivo, src/cli.js, que manejará toda la lógica para recopilar las preferencias del usuario. Este nuevo módulo se invocará desde el archivo actual create-project :

#!/usr/bin/env node

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

cli(process.argv);

Para agilizar el proceso de recopilación de preferencias del usuario, usaremos dos bibliotecas útiles:

npm install @inquirer/prompts arg

• Arg: Un poderoso analgésico para manejar entradas de línea de comandos.
• @indirer/indicaciones: una biblioteca para crear interfaces de línea de comandos elegantes e interactivas.

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

Te dejaré que agregue una opción adicional para mostrar un mensaje de ayuda básico. Esto implicará la introducción de una nueva preferencia de usuario controlada por el parámetro --help o -h. Si se proporciona este parámetro, la CLI debe mostrar un manual simple que explica el uso del comando. Puede consultar mi solución en el repositorio vinculado a continuación.

Creando el proyecto

En este paso, el proyecto se creará en función de las preferencias seleccionadas en la etapa anterior. Comenzaremos creando una carpeta llamada plantilla y copiando en ella los archivos que compensarán el proyecto generado.

La estructura de la carpeta debe verse así, y puede encontrar el contenido de estos archivos en mi repositorio de GitHub. Si tiene curiosidad sobre cómo se crearon, consulte mi publicación anterior, donde hablo de la construcción de una extensión del navegador con TypeScript.

Nuestro código utilizará los archivos en la carpeta de plantilla para generar la nueva extensión del navegador del usuario y los siguientes paquetes serán particularmente útiles para lograr esto:

npm install ncp chalk execa pkg-install listr

• NCP: facilita la copia recursiva de los archivos.
• Chalk: agrega estilo String String Styling.
• EXECA: simplifica la ejecución de comandos externos como git.
• PKG-Install: desencadena automáticamente la instalación del hilo o la instalación de NPM en función de la preferencia del usuario.
• LISTR: Permite definir una lista de tareas al tiempo que proporciona una descripción general de progreso para el usuario.

Comenzaremos creando un nuevo archivo, src/main.js, para contener el código que genera el proyecto copiando los archivos de la carpeta de plantilla.

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

El código anterior utiliza LISTR para ejecutar la serie de acciones necesarias para generar el nuevo proyecto, desde copiar archivos con NCP para configurar el repositorio Git. También tenga en cuenta cómo utilizamos Promisify para convertir el método de copia basado en la devolución de llamada de NCP en una función basada en la promesa, haciendo que el código sea más legible y mantenible.

¡y eso es todo! Estos son los pasos que seguí para crear mi nueva herramienta CLI, la que usaré para optimizar la creación de las nuevas extensiones de mi navegador. ¡Puedes usarlo también! Porque lo he publicado en NPM para que cualquiera genere sus propias extensiones.

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

Referencias

cómo construir una cli con node.js