이전 연습에서는 TypeScript를 사용하여 브라우저 확장을 구축했습니다. 여기에는 vite 프로젝트 생성 및 브라우저 확장의 특정 요구 사항을 충족하도록 사용자 정의하는 등 일련의 단계가 포함되었습니다. 프로세스가 특히 길거나 복잡하지는 않지만 노드 CLI (명령 줄 인터페이스)로 자동화하여 더 단순화 할 수 있습니다. CLIS를 처음 사용한다면 내가 만든 것을 안내해 드리겠습니다!

노드 프로젝트를 만듭니다

자연스럽게 첫 번째 단계는 노드 프로젝트를 초기화하고 설정하는 것입니다. 다음 명령을 사용하여 코드 용 폴더를 작성하고 기본 package.json 파일을 생성합니다.

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

다음으로, 나는 "type": "module"을 포함하도록 생성 된 package.json을 수정하기로 결정했습니다. 이를 통해 프로젝트의 .js 파일을 CommonJS 모듈이 아닌 ES 모듈로 해석하도록 노드를 알려줍니다. 조정 한 후 업데이트 된 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"
}

첫 단계

#!/usr/bin/env 노드 Console.log ( "Hello World"); 이 파일은 귀하의 명령의 진입 점 역할을하며 컴퓨터에서 직접 가 직접 실행되도록하기 위해 패키지가 전 세계적으로 설치되면 다음 필드를 Package.json에 추가합니다. ]]

"bin": "bin/create-project"

#!/usr/bin/env node

console.log("hello world");

이제 지금까지 우리가 만든 것을 테스트 할 시간입니다. 먼저, 우리는 다음을 실행하여 로컬로 패키지를 설치합니다 :

npm 링크 Create-Browser-Extension-Vite // CLI를 실행합니다

링크 된 후에는 Create-Browser-Extension-Vite라는 새로운 CLI 명령이 있으며 현재는 "Hello World"를 콘솔에 인쇄합니다.

"bin": "bin/create-project"

그리고 그게 기본 CLI를 만드는 데 필요한 전부입니다! 여기에서 노드 생태계의 전체 힘을 활용하여 상상할 수있는 모든 것을 구축 할 수 있습니다.

사용자 입력 처리

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

name

: 제공된 경우 이름이 지정된 폴더가 생성됩니다. 그렇지 않으면 현재 폴더에는 프로젝트가 포함됩니다.

git

: 지정되면 프로젝트에 대한 git 저장소가 초기화됩니다.

• 설치 : 지정된 경우 프로젝트 종속성이 자동으로 설치됩니다.
• 예 : 모든 프롬프트를 건너 뛰고 기본 설정으로 프로젝트를 생성합니다.
• 첫 번째 단계는 새 파일 인 src/cli.js를 만드는 것입니다.이 파일은 사용자 기본 설정을 수집하기위한 모든 논리를 처리합니다. 이 새 모듈은 현재 create-project
파일에서 호출됩니다 :
• #!/usr/bin/env 노드 "../src/cli.js"에서 {cli} 가져 오기; CLI (process.argv);

사용자 기본 설정 수집 프로세스를 간소화하려면 두 가지 유용한 라이브러리를 사용합니다.

npm install @atipirer/prompts arg

#!/usr/bin/env node

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

cli(process.argv);

@ativerer/prompts : 우아하고 대화식 명령 줄 인터페이스를 만드는 라이브러리.

npm install @inquirer/prompts arg

|| 거짓, git : args

|| 거짓, runinstall : args
• || 거짓, ProjectName : args ._ [0], }; } 내보내기 비동기 기능 CLI (Args) { 옵션 = parseargumentsIntOoot (Args); 옵션 = PromptOrmissingOptions (옵션)를 기다립니다. Console.log (옵션); }
• 기본 도움말 메시지를 표시하기위한 추가 옵션을 추가하기 위해 남겨 드리겠습니다. 여기에는 -HELP 또는 -H 매개 변수로 제어되는 새로운 사용자 기본 설정이 포함됩니다. 이 매개 변수가 제공되면 CLI는 명령의 사용법을 설명하는 간단한 매뉴얼을 표시해야합니다. 아래 링크 된 저장소에서 내 솔루션을 참조 할 수 있습니다.

프로젝트 만들기

"bin": "bin/create-project"

이 단계에서 프로젝트는 이전 단계에서 선택한 환경 설정에 따라 만들어집니다. 템플릿이라는 폴더를 만들고 생성 된 프로젝트를 구성하는 파일을 복사하는 것으로 시작합니다.

폴더 구조는 다음과 같아야하며 GitHub 저장소에서 이러한 파일의 내용을 찾을 수 있습니다. 그들이 어떻게 만들어 졌는지 궁금한 점이 있다면 이전 게시물을 확인하십시오. 여기서 TypeScript를 사용하여 브라우저 확장에 대해 논의하십시오.

당사 코드는 템플릿 폴더의 파일을 사용하여 사용자의 새로운 브라우저 확장을 생성하고 다음 패키지는 다음과 같이 특히 유용합니다.

NPM NCP Chalk Execa Pkg Install List를 설치하십시오

NCP : 파일의 재귀 복사를 용이하게합니다.

npm install ncp chalk execa pkg-install listr

execa : git과 같은 외부 명령을 실행하는 것을 단순화합니다.
PKG Install : 사용자의 선호도에 따라 원사 설치 또는 NPM 설치를 자동으로 트리거합니다.
LIST : 사용자에게 깨끗한 진행 개요를 제공하면서 작업 목록을 정의 할 수 있습니다.
• 템플릿 폴더에서 파일을 복사하여 프로젝트를 생성하는 코드를 포함하기 위해 새 파일 SRC/main.js를 만들어 시작합니다.
import {createproject}에서 "./main.js"; ... 내보내기 비동기 기능 CLI (Args) { 옵션 = parseargumentsIntOoot (Args); 옵션 = PromptOrmissingOptions (옵션)를 기다립니다. CreateProject (옵션)를 기다리고 있습니다. }

"Chalk"에서 Chalk 가져 오기; "NCP"에서 NCP 가져 오기; "경로"에서 가져 오기 경로; "util"에서 {promisify} 가져 오기; "execa"에서 {execa} 가져 오기; "LIST"에서 LIST를 가져 오기; "pkg-install"에서 {projectInstall} 가져 오기; const copy = promisify (NCP); 비동기 함수 CopyTemplateFiles (옵션) { 반환 사본 (Options.TempleatedIrectory, Options.TargetDirectory, { clobber : 거짓, }); } 비동기 기능 initgit (옵션) { const result = await execa ( "git",
, { CWD : 옵션 .TargetDirectory, }); if (result.failed) { return promise.reject (새 오류 ( "git 초기화 실패"); } 반품; } 내보내기 비동기 기능 CreateProject (옵션) { 옵션 = { ... 옵션, TargetDirectory : 옵션 .projectname || process.cwd (), }; const currentfileurl = import.meta.url; const templeatedir = path.resolve ( New URL (currentFileUrl) .PathName, "../../주형" ); 옵션 .templeatedirectory = templeatedir; const tasks = new list ([[ { 제목 : "프로젝트 파일 복사", 작업 : () => CopyTemplateFiles (옵션), }, { 제목 : "git 초기화", 작업 : () => initgit (옵션), enabled : () => 옵션 .git, }, { 제목 : "의존성 설치", 작업 : () => ProjectInstall ({ CWD : 옵션 .TargetDirectory, }), 건너 뛰기 : () => ! 옵션. runinstall ? "통과 -종속성을 자동으로 설치하려면 설치" : 한정되지 않은, }, ]); await tasks.run (); console.log ( "%s project ready", chalk.green.bold ( "done")); 진실을 반환하십시오. }

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

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

참조

node.js로 CLI를 구축하는 방법