Em nosso exercício anterior, criamos uma extensão do navegador usando o TypeScript. Isso envolveu uma série de etapas, incluindo a criação de um projeto vite e a personalização para atender aos requisitos específicos das extensões do navegador. Embora o processo não tenha sido particularmente demorado ou complexo, podemos simplificá -lo ainda mais, automatizando -o com uma CLI do nó (interface da linha de comando). Se você é novo no CLIS, deixe -me orientá -lo através do que eu criei!

Crie um projeto de nó

naturalmente, o primeiro passo é inicializar e configurar nosso projeto de nó. Use os seguintes comandos para criar uma pasta para o nosso código e gerar um arquivo básico Package.json:

! NPM INIT -Ies

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

Em seguida, decidi modificar o package.json gerado para incluir "type": "Module". Com isso, informaremos o Node para interpretar os arquivos .js no projeto como módulos ES, em vez de módulos Commonjs. Aqui está o package.json atualizado depois de fazer alguns ajustes.

{ "Nome": "Create-Browser-Extension-Vite", "versão": "1.0.0", "Scripts": { "Teste": "Echo \" Erro: nenhum teste especificado \ "&& sai 1" }, "PublishConfig": { "Acesso": "público" }, "Palavras -chave": [ "CLI", "Create-Project" ], "Autor": "", "Licença": "ISC", "Descrição": "Uma ferramenta da CLI para criar extensões de navegador com vite", "Tipo": "módulo" }

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

Primeiros passos

Vamos começar criando um arquivo chamado

create-project em uma nova pasta chamada bin :

#!/usr/bin/Env node console.log ("Hello World");

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

Este arquivo atuará como o ponto de entrada para o seu comando e para garantir que ele possa ser

executado diretamente no seu computador Depois que o pacote for instalado globalmente, adicione o seguinte campo ao package.json:

"Bin": "Bin/Create-Project"

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

agora é hora de testar o que criamos até agora. Primeiro, instalamos o pacote localmente em execução:

link npm Criar navegador-Extensão-Vite // Execute a CLI

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

Uma vez vinculado, você terá um novo comando da CLI chamado Create-Browser-Extension-Vite, que atualmente apenas imprime "Hello World" no console.

e isso é o suficiente para criar uma CLI básica! A partir daqui, você pode aproveitar todo o poder do ecossistema do nó para construir qualquer coisa que possa imaginar.

Manuseio de entrada do usuário

Vamos dar outro passo em direção ao nosso objetivo! O objetivo desta CLI é gerar uma extensão de navegador de texto digital totalmente funcional com um único comando. Para conseguir isso, a CLI aceitará vários parâmetros opcionais.

• nome : se fornecido, uma pasta com o nome especificada será criada. Caso contrário, a pasta atual conterá o projeto.
• git : se especificado, um repositório Git será inicializado para o projeto.
• Install : se especificado, as dependências do projeto serão instaladas automaticamente.
• Sim : ignora todos os pedidos e gera o projeto com configurações padrão.

A primeira etapa é criar um novo arquivo, src/cli.js, que lidará com toda a lógica para coletar preferências do usuário. Este novo módulo será chamado do atual

crie-project arquivo:

#!/usr/bin/Env node importar {cli} de "../src/cli.js"; CLI (process.argv);

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

Para otimizar o processo de coleta de preferências do usuário, usaremos duas bibliotecas úteis:

npm install @inquirer/solicita arg

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

Arg: Um poderoso analisador de argumentos para lidar com entradas da linha de comando.
@inquirer/avisos: uma biblioteca para criar interfaces elegantes e interativas da linha de comando.

importar arg de "arg"; importar {Confirm} de "@inquirer/slots"; Função ASYNC PromptFormissingOptions (Opções) { if (options.skippompts) { opções de retorno; } retornar { ... opções, git: options.git || (aguarde confirmar ({mensagem: "Inicialize um repositório Git?"}),), }; } Função ParSeargumentsIntions (RawArgs) { const args = arg ( { "--Git": booleano, "--help": booleano, "-yes": booleano, "--Install": booleano, "-g": "--git", "-y": "-yes", "-i": "-Instalação", }, { argv: rawargs.slice (2), } ); retornar { Skipprompts: args ["-sim"] || falso, git: args ["-git"] || falso, RunInstall: args ["-install"] || falso, ProjectName: args ._ [0], }; } exportar função assíncrona cli (args) { deixe opções = parseargumentsIntroopions (args); Opções = Aguarda PromptFormissingOptions (Opções); console.log (opções); }

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

deixarei para você adicionar uma opção extra para exibir uma mensagem de ajuda básica. Isso envolverá a introdução de uma nova preferência do usuário controlada pelo parâmetro --help ou -h. Se esse parâmetro for fornecido, a CLI deve exibir um manual simples, explicando o uso do comando. Você pode se referir à minha solução no repositório vinculado abaixo.

Criando o projeto

Nesta etapa, o projeto será criado com base nas preferências selecionadas no estágio anterior. Começaremos criando uma pasta denominada modelo e copiando nele os arquivos que compõem o projeto gerado.

A estrutura da pasta deve ficar assim e você pode encontrar o conteúdo desses arquivos no meu repositório do GitHub. Se você está curioso sobre como eles foram criados, confira meu post anterior, onde discuto a construção de uma extensão do navegador com o TypeScript.

Nosso código utilizará os arquivos na pasta do modelo para gerar a nova extensão do navegador do usuário e os pacotes a seguir serão particularmente úteis para realizar isso:

Instale o NCP Chalk Execa PKG-Install Lists

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

NCP: facilita a cópia recursiva de arquivos.
Chalk: adiciona estilo de sequência de terminais.
EXECA: simplifica a execução de comandos externos como o git.
PKG-Install: aciona automaticamente a instalação do fio ou a instalação do NPM com base na preferência do usuário.
Listr: permite definir uma lista de tarefas enquanto fornece uma visão geral de progresso limpa para o usuário.

Vamos começar criando um novo arquivo, src/main.js, para conter o código que gera o projeto copiando os arquivos da pasta de modelos.

import {createProject} de "./main.js"; ... exportar função assíncrona cli (args) { deixe opções = parseargumentsIntroopions (args); Opções = Aguarda PromptFormissingOptions (Opções); aguarda createproject (opções); }

import { createProject } from "./main.js";

...

export async function cli(args) {
  let options = parseArgumentsIntoOptions(args);
  options = await promptForMissingOptions(options);
  await createProject(options);
}

importar giz de "giz"; importar NCP do "NCP"; Importar caminho de "Path"; importar {promisify} de "util"; importação {Execa} de "Execa"; importar Lists de "Lists"; importar {ProjectInstall} de "PKG-Install"; const copy = promisify (ncp); Função assíncreada copyTemplateFiles (Opções) { Return Copy (Options.Templatedirectory, Options.TargetDirectory, { CLOBBER: FALSO, }); } Função assíncreada initgit (options) { const resultado = aguarda Execa ("git", ["init"], { CWD: options.targetDirectory, }); if (resultado.Failed) { return promey.reject (novo erro ("falhou em inicializar o git")); } retornar; } exportar função assíncroada createproject (options) { opções = { ... opções, TargetDirectory: Options.ProjectName || process.cwd (), }; const currentfileurl = import.meta.url; const modeatedir = path.resolve ( novo URL (currentFileurl) .PathName, "../../modelo" ); options.templateirectory = modelo; Const Tasks = New Lists ([ { Título: "Copiar arquivos de projeto", Tarefa: () => copyTemplateFiles (Opções), }, { Título: "Inicialize Git", tarefa: () => initgit (opções), ativado: () => options.git, }, { Título: "Instale dependências", Tarefa: () => ProjectInstall ({ CWD: options.targetDirectory, }), pular: () => ! options.runinstall ? "Passe -Instalar para instalar automaticamente dependências" : indefinido, }, ]); aguarda tarefas.run (); console.log ("%s Project Ready", chalk.green.Bold ("feito"); retornar true; }

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

O código acima utiliza o LISR para executar a série de ações necessárias para gerar o novo projeto, desde copiar arquivos com o NCP até a configuração do repositório Git. Observe também como usamos o Promisify para converter o método de cópia baseado em retorno de chamada do NCP em uma função baseada em promessa, tornando o código mais legível e sustentável.

e é isso! Essas são as etapas que segui para criar minha nova ferramenta da CLI, a que eu usarei para otimizar a criação das minhas novas extensões de navegador. Você também pode usá -lo! Porque eu o publiquei no NPM para qualquer um gerar suas próprias extensões.

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

Referências

como construir uma CLI com node.js