في تمريننا السابق ، قمنا ببناء امتداد متصفح باستخدام TypeScript. تضمن ذلك سلسلة من الخطوات ، بما في ذلك إنشاء مشروع Vite وتخصيصه لتلبية المتطلبات المحددة لتمديدات المتصفح. على الرغم من أن العملية لم تكن طويلة أو معقدة بشكل خاص ، إلا أنه يمكننا تبسيطها بشكل أكبر عن طريق أتمتةها باستخدام عقدة CLI (واجهة سطر الأوامر). إذا كنت جديدًا على Clis ، اسمحوا لي أن أسير لك من خلال الشخص الذي قمت بإنشائه!

إنشاء مشروع عقدة

بطبيعة الحال ، فإن الخطوة الأولى هي تهيئة وإعداد مشروع العقدة الخاص بنا. استخدم الأوامر التالية لإنشاء مجلد للرمز الخاص بنا وإنشاء ملف package.json الأساسي:

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

بعد ذلك ، قررت تعديل الحزمة التي تم إنشاؤها لتضمين "النوع": "الوحدة النمطية". مع هذا ، سنقوم بإبلاغ Node بتفسير ملفات .js في المشروع كوحدات ES بدلاً من وحدات CommonJS. إليك الحزمة المحدثة. 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"
}

الخطوات الأولى

لنبدأ بإنشاء ملف يسمى إنشاء project في مجلد جديد اسمه bin :

#!/usr/bin/env node

console.log("hello world");

سيكون هذا الملف بمثابة نقطة إدخال لأمرك ولتأكد من أنه يمكن تشغيله مباشرة على جهاز الكمبيوتر الخاص بك بمجرد تثبيت الحزمة على مستوى العالم ، أضف الحقل التالي إلى الحزمة. ]

"bin": "bin/create-project"

"bin": "bin/create-project"

حان الوقت لاختبار ما قمنا بإنشائه حتى الآن. أولاً ، نقوم بتثبيت الحزمة محليًا عن طريق التشغيل:

رابط NPM إنشاء متصفح-تمديد-Vite // تنفيذ CLI

"bin": "bin/create-project"

بمجرد ربطك ، سيكون لديك أمر CLI جديد يسمى Create-Browser-Extension-Vite ، والذي يطبع حاليًا "Hello World" إلى وحدة التحكم.

وهذا كل ما يتطلبه الأمر لإنشاء CLI أساسي! من هنا ، يمكنك الاستفادة من القوة الكاملة للنظام الإيكولوجي للعقدة لبناء أي شيء يمكنك تخيله.

معالجة مدخلات المستخدم

دعونا نأخذ خطوة أخرى نحو هدفنا! الهدف من هذا CLI هو إنشاء امتداد متصفح TypeScript يعمل بكامل طاقته باستخدام أمر واحد. لإنجاز هذا ، سوف يقبل CLI العديد من المعلمات الاختيارية.

• name : إذا تم توفيره ، فسيتم إنشاء مجلد يحمل الاسم المحدد. خلاف ذلك ، سيحتوي المجلد الحالي على المشروع.
• git : إذا تم تحديدها ، فسيتم تهيئة مستودع GIT للمشروع.
• تثبيت : في حالة تحديد ، سيتم تثبيت تبعيات المشروع تلقائيًا.
• نعم : يتخطى جميع المطالبات وإنشاء المشروع بإعدادات افتراضية.

الخطوة الأولى هي إنشاء ملف جديد ، SRC/CLI.JS ، والذي سيتعامل مع جميع المنطق لجمع تفضيلات المستخدم. سيتم استدعاء هذه الوحدة الجديدة من الملف الحالي

إنشاء ملف :

#!/usr/bin/env node استيراد {cli} من "../src/cli.js" ؛ CLI (process.argv) ؛

"bin": "bin/create-project"

لتبسيط عملية جمع تفضيلات المستخدم ، سنستخدم مكتبتين مفيدين:

]

npm install @inquirer/prompts arg

Arg: محلل قوي للسيجة للتعامل مع مدخلات سطر الأوامر.

• @requirer/مطالبات: مكتبة لإنشاء واجهات سطر أوامر أنيقة وتفاعلية.
استيراد Arg من "Arg" ؛ استيراد {تأكيد} من "@requirer/prodes" ؛ دالة async promportFormissingOptions (خيارات) { if (Options.skipprompts) { خيارات العودة ؛ } يعود { ...خيارات، جيت: Options.git || (انتظر تأكيد ({الرسالة: "تهيئة مستودع GIT؟"})) ،) ، } ؛ } وظيفة preseargumentIntiPtions (Rawargs) { const args = arg ( { "-git": منطقية ، "-help": منطقية ، "-yes": منطقية ، "-التثبيت": منطقية ، "-g": "-git" ، "-y": "-yes" ، "-i": "-التثبيت" ، } ، { Argv: Rawargs.slice (2) ، } ) ؛ يعود { Skipprompts: args ["-نعم"] || خطأ شنيع، GIT: args ["-git"] || خطأ شنيع، RunInstall: args ["-تثبيت"] || خطأ شنيع، ProjectName: args ._ [0] } ؛ } تصدير وظيفة ASYNC CLI (args) { دع الخيارات = parseargumentsIntooptions (args) ؛ الخيارات = Await ProperformissingOptions (الخيارات) ؛ console.log (خيارات) ؛ }

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

إنشاء المشروع

في هذه الخطوة ، سيتم إنشاء المشروع بناءً على التفضيلات المحددة في المرحلة السابقة. سنبدأ بإنشاء مجلد اسمه القالب والنسخ فيه الملفات التي ستشكل المشروع الذي تم إنشاؤه.

يجب أن تبدو بنية المجلد هكذا ، ويمكنك العثور على محتوى هذه الملفات في مستودع github الخاص بي. إذا كنت مهتمًا بكيفية إنشائها ، تحقق من مشاركتي السابقة ، حيث أناقش بناء امتداد المتصفح مع TypeScript.

سيستخدم الكود الخاص بنا الملفات الموجودة في مجلد القالب لإنشاء امتداد المتصفح الجديد للمستخدم وستكون الحزم التالية مفيدة بشكل خاص في تحقيق ذلك:

NPM تثبيت NCP Chalk Execa PKG-Install Lister

npm install @inquirer/prompts arg

NCP: يسهل النسخ العودية للملفات.

• الطباشير: يضيف تصميم السلسلة الطرفية.
• execa: يبسط تشغيل الأوامر الخارجية مثل git.
• PKG-Install: تلقائيًا يؤدي إلى تثبيت الغزل أو تثبيت NPM استنادًا إلى تفضيل المستخدم.
• LIST: يسمح بتحديد قائمة بالمهام مع تقديم نظرة عامة على التقدم النظيفة للمستخدم.
سنبدأ بإنشاء ملف جديد ، src/main.js ، لاحتواء الرمز الذي ينشئ المشروع عن طريق نسخ الملفات من مجلد القالب.

استيراد {createProject} من "./main.js" ؛ ... تصدير وظيفة ASYNC CLI (args) { دع الخيارات = parseargumentsIntooptions (args) ؛ الخيارات = Await ProperformissingOptions (الخيارات) ؛ في انتظار CreateProject (خيارات) ؛ }

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

وهذا كل شيء! هذه هي الخطوات التي اتبعتها لإنشاء أداة CLI الجديدة ، تلك التي سأستخدمها لتبسيط إنشاء ملحقات متصفحي الجديدة. يمكنك استخدامه أيضا! لأنني نشرته على NPM لأي شخص لإنشاء ملحقاته الخاصة.

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

مراجع

كيفية بناء cli مع node.js