हमारे पिछले अभ्यास में, हमने टाइपस्क्रिप्ट का उपयोग करके एक ब्राउज़र एक्सटेंशन का निर्माण किया। इसमें चरणों की एक श्रृंखला शामिल थी, जिसमें एक VITE प्रोजेक्ट बनाना और ब्राउज़र एक्सटेंशन की विशिष्ट आवश्यकताओं को पूरा करने के लिए इसे अनुकूलित करना शामिल है। जबकि प्रक्रिया विशेष रूप से लंबी या जटिल नहीं थी, हम इसे नोड सीएलआई (कमांड लाइन इंटरफ़ेस) के साथ स्वचालित करके इसे और सरल बना सकते हैं। यदि आप CLIS के लिए नए हैं, तो मुझे मेरे द्वारा बनाए गए एक के माध्यम से चलने दें!

एक नोड प्रोजेक्ट बनाएं

] हमारे कोड के लिए एक फ़ोल्डर बनाने के लिए निम्न आदेशों का उपयोग करें और एक मूल पैकेज उत्पन्न करें। JSON फ़ाइल:

] npm init -yes

] इसके साथ हम प्रोजेक्ट में .js फ़ाइलों की व्याख्या करने के लिए नोड को सूचित करेंगे। कुछ समायोजन करने के बाद यहाँ अद्यतन पैकेज है।

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

{{ "नाम": "ब्राउज़र-एक्सटेंशन-वाइट बनाएं", "संस्करण": "1.0.0", "स्क्रिप्ट": { "परीक्षण": "इको \" त्रुटि: कोई परीक्षण निर्दिष्ट नहीं \ "&& निकास 1" }, "PublishConfig": { "एक्सेस": "पब्लिक" }, "कीवर्ड": [ "सीएलआई", "बनाओ-प्रोजेक्ट" ], "लेखक": "", "लाइसेंस": "isc", "विवरण": "एक सीएलआई टूल विट के साथ ब्राउज़र एक्सटेंशन बनाने के लिए", "प्रकार": "मॉड्यूल" }

पहले कदम

{
  "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 नोड कंसोल.लॉग ("हैलो वर्ल्ड");

] ]

"बिन": "बिन/क्रिएट-प्रोजेक्ट" अब यह परीक्षण करने का समय है कि हमने अब तक क्या बनाया है। सबसे पहले, हम पैकेज को स्थानीय रूप से चलाकर स्थापित करते हैं:

एनपीएम लिंक बनाएँ-ब्राउज़र-एक्सटेंशन-वाइट // सीएलआई निष्पादित करें

#!/usr/bin/env node

console.log("hello world");

और यह सब एक मूल सीएलआई बनाने के लिए लेता है! यहां से, आप कुछ भी बनाने के लिए नोड पारिस्थितिकी तंत्र की पूरी शक्ति का लाभ उठा सकते हैं जिसकी आप कल्पना कर सकते हैं। संभालना उपयोगकर्ता इनपुट

आइए हमारे लक्ष्य की ओर एक और कदम उठाएं! इस सीएलआई का उद्देश्य एकल कमांड के साथ एक पूरी तरह से कार्यात्मक टाइपस्क्रिप्ट ब्राउज़र एक्सटेंशन उत्पन्न करना है। इसे पूरा करने के लिए, सीएलआई कई वैकल्पिक मापदंडों को स्वीकार करेगा।

"bin": "bin/create-project"

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

नाम

: यदि प्रदान किया गया है, तो निर्दिष्ट नाम वाला एक फ़ोल्डर बनाया जाएगा। अन्यथा, वर्तमान फ़ोल्डर में परियोजना होगी।

]

]

]

] यह नया मॉड्यूल वर्तमान

से बनाया जाएगा

फ़ाइल:

फ़ाइल:

#!/usr/bin/env नोड आयात {cli} से "../src/cli.js"; cli (process.argv);
• उपयोगकर्ता वरीयताओं को इकट्ठा करने की प्रक्रिया को सुव्यवस्थित करने के लिए, हम दो उपयोगी पुस्तकालयों का उपयोग करेंगे:
]
• ARG: कमांड-लाइन इनपुट्स को संभालने के लिए एक शक्तिशाली तर्क पार्सर।
• @पूछताछ/संकेत: सुरुचिपूर्ण और इंटरैक्टिव कमांड-लाइन इंटरफेस बनाने के लिए एक पुस्तकालय।
"arg" से आयात arg; आयात {पुष्टि} "@inquerrer/संकेत" से; Async फ़ंक्शन PromptForMissingOptions (विकल्प) { if (options.skipprompts) { वापसी विकल्प; } वापस करना { ... विकल्प, git: options.git || (पुष्टि करें ({संदेश: "एक git रिपॉजिटरी को इनिशियलाइज़ करें?"}),),), }; } फ़ंक्शन parseargumentsintooptions (rawargs) { const args = arg ( { "-गिट": बूलियन, "-हेल्प": बूलियन, "-हाँ": बूलियन, "-इंस्टॉल": बूलियन, "-g": "--गिट", "-y": "--हाँ", "-i": "-इंस्टॉल", }, { argv: rawargs.slice (2), } ); वापस करना { SkipPrompts: args ["-हाँ"] || असत्य, git: args ["-git"] || असत्य, RunInstall: args ["-इंस्टॉल"] || असत्य, प्रोजेक्टनाम: args ._ [0], }; } निर्यात async फ़ंक्शन CLI (args) { विकल्प = parseargumentsintooptions (args); विकल्प = ATTIMATEMENTFormissingOptions (विकल्प) की प्रतीक्षा करें; कंसोल.लॉग (विकल्प); }
• मैं इसे एक बुनियादी सहायता संदेश प्रदर्शित करने के लिए एक अतिरिक्त विकल्प जोड़ने के लिए इसे छोड़ दूंगा। इसमें -हेल्प या -एच पैरामीटर द्वारा नियंत्रित एक नई उपयोगकर्ता वरीयता को शामिल करना शामिल होगा। यदि यह पैरामीटर प्रदान किया जाता है, तो CLI को कमांड के उपयोग की व्याख्या करते हुए एक सरल मैनुअल प्रदर्शित करना चाहिए। आप नीचे दिए गए रिपॉजिटरी में मेरे समाधान का उल्लेख कर सकते हैं।
परियोजना बनाना

इस चरण में, परियोजना पिछले चरण में चयनित वरीयताओं के आधार पर बनाई जाएगी। हम टेम्पलेट नाम का एक फ़ोल्डर बनाकर शुरू करेंगे और उसमें उन फाइलों को कॉपी कर रहे हैं जो उत्पन्न प्रोजेक्ट बनाएगी। ] यदि आप इस बारे में उत्सुक हैं कि वे कैसे बनाए गए हैं, तो मेरी पिछली पोस्ट देखें, जहां मैं टाइपस्क्रिप्ट के साथ एक ब्राउज़र एक्सटेंशन बनाने पर चर्चा करता हूं।

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

]

NCP: फ़ाइलों की पुनरावर्ती नकल की सुविधा देता है।

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

चाक: टर्मिनल स्ट्रिंग स्टाइल जोड़ता है।

• Execa: git जैसे बाहरी कमांड चलाने को सरल करता है।
• PKG-Install: स्वचालित रूप से ट्रिगर या तो यार्न इंस्टॉल या एनपीएम उपयोगकर्ता की प्राथमिकता के आधार पर इंस्टॉल करता है।

Listr: उपयोगकर्ता के लिए एक स्वच्छ प्रगति अवलोकन प्रदान करते समय कार्यों की एक सूची को परिभाषित करने की अनुमति देता है।

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

]

] ... निर्यात async फ़ंक्शन CLI (args) { विकल्प = parseargumentsintooptions (args); विकल्प = ATTIMATEMENTFormissingOptions (विकल्प) की प्रतीक्षा करें; CreateProject (विकल्प) का इंतजार; }

"चाक" से आयात चाक; "NCP" से NCP आयात करें; "पथ" से आयात पथ; "उपयोग" से आयात {प्रॉमिसिफाई}; "Execa" से आयात {Execa}; "Listr" से Listr आयात करें; आयात {pkg-install "से प्रोजेक्टइनस्टॉल}; const कॉपी = प्रॉमिसिफाई (NCP); ASYNC फ़ंक्शन COPYTEMPLATEFILES (विकल्प) { रिटर्न कॉपी (options.templatedirectory, options.targetDirectory, { क्लोबर: गलत, }); } async फ़ंक्शन initgit (विकल्प) { const result = actait execa ("git", ["init"], { CWD: विकल्प। targetDirectory, }); if (result.failed) { रिटर्न प्रॉमिस। } वापस करना; } निर्यात async फ़ंक्शन CreateProject (विकल्प) { विकल्प = { ... विकल्प, TargetDirectory: options.projectName || process.cwd (), }; const currentfileurl = import.meta.url; const templatedir = path.resolve ( नया URL (currentfileurl) .pathname, "../../template" ); विकल्प। templatedirectory = templatedir; const कार्य = नया listr ([[ { शीर्षक: "कॉपी प्रोजेक्ट फाइलें", कार्य: () => copytemplatefiles (विकल्प), }, { शीर्षक: "इनिशियलाइज़ गिट", कार्य: () => initgit (विकल्प), सक्षम: () => options.git, }, { शीर्षक: "निर्भरता स्थापित करें", कार्य: () => ProjectInstall ({ CWD: विकल्प। targetDirectory, }), छोड़ें: () => ! ? "पास -स्वचालित रूप से निर्भरता स्थापित करने के लिए इंस्टॉल करें" : अपरिभाषित, }, ]); tasks.run () का इंतजार; Console.log ("%s प्रोजेक्ट रेडी", chalk.green.bold ("किया")); सच लौटें; }

] यह भी ध्यान दें कि हमने एनसीपी के कॉलबैक-आधारित कॉपी विधि को एक वादा-आधारित फ़ंक्शन में बदलने के लिए कैसे प्रॉमिस किया है, जिससे कोड अधिक पठनीय और बनाए रखने योग्य है।

और यह है! ये वे चरण हैं जिनका मैंने अपना नया सीएलआई टूल बनाने के लिए पालन किया, जिसका उपयोग मैं अपने नए ब्राउज़र एक्सटेंशन के निर्माण को सुव्यवस्थित करने के लिए कर रहा हूं। आप इसका उपयोग भी कर सकते हैं! क्योंकि मैंने इसे अपने स्वयं के एक्सटेंशन उत्पन्न करने के लिए किसी के लिए NPM पर प्रकाशित किया है।

]

संदर्भ

नोड के साथ एक सीएलआई का निर्माण कैसे करें