अपने ब्राउज़र में डेवलपर कंसोल खोलें। यदि आप \\\"हैलो वर्ल्ड\\\" देखते हैं, तो आप जानते हैं कि यह ठीक से लोड हो रहा है।

ब्राउज़र अब ईसीएमएस्क्रिप्ट मॉड्यूल का समर्थन करते हैं। आप अन्य फ़ाइलों को उनके दुष्प्रभावों के लिए आयात कर सकते हैं:

import \\\"./some-other-script.js\\\";

या उनके निर्यात के लिए

import { add, multiply } \\\"./my-math-lib.js\\\";

बहुत बढ़िया है ना? अधिक जानकारी के लिए उपरोक्त एमडीएन गाइड देखें।

संकुल

आप शायद पहिए का दोबारा आविष्कार नहीं करना चाहते, इसलिए आपका प्रोजेक्ट संभवतः कुछ तृतीय-पक्ष पैकेजों का उपयोग करेगा। इसका मतलब यह नहीं है कि अब आपको पैकेज मैनेजर का उपयोग शुरू करने की आवश्यकता है।

मान लें कि हम डेटा सत्यापन के लिए सुपरस्ट्रक्चर का उपयोग करना चाहते हैं। हम न केवल अपने (स्थानीय) फ़ाइल सर्वर से, बल्कि किसी भी URL से मॉड्यूल लोड कर सकते हैं। esm.sh npm पर उपलब्ध लगभग सभी पैकेजों के लिए आसानी से मॉड्यूल प्रदान करता है।

जब आप https://esm.sh/superstruct पर जाते हैं तो आप देख सकते हैं कि आपको नवीनतम संस्करण पर पुनः निर्देशित किया गया है। आप इस पैकेज को अपने कोड में इस प्रकार शामिल कर सकते हैं:

import { assert } from \\\"https://esm.sh/superstruct\\\";

यदि आप सुरक्षित रहना चाहते हैं, तो आप संस्करणों को पिन कर सकते हैं।

प्रकार

मैं आपके बारे में नहीं जानता, लेकिन टाइपस्क्रिप्ट ने मुझे बिगाड़ दिया (और मुझे आलसी बना दिया)। टाइप चेकर की मदद के बिना सादा जावास्क्रिप्ट लिखना रस्सी पर लिखने जैसा लगता है। सौभाग्य से, हमें टाइप चेकिंग भी नहीं छोड़नी पड़ेगी।

अब एनपीएम को खत्म करने का समय आ गया है (भले ही हम इसके द्वारा प्रदान किया गया कोई भी कोड शिप नहीं करेंगे)।

npm init --yesnpm install typescript

आप जावास्क्रिप्ट कोड पर टाइपस्क्रिप्ट कंपाइलर का उपयोग ठीक से कर सकते हैं! इसके लिए प्रथम श्रेणी का समर्थन है। एक jsconfig.json बनाएं:

{  \\\"compilerOptions\\\": {    \\\"strict\\\": true,    \\\"checkJs\\\": true,    \\\"allowJs\\\": true,    \\\"noImplicitAny\\\": true,    \\\"lib\\\": [\\\"ES2022\\\", \\\"DOM\\\"],    \\\"module\\\": \\\"ES2022\\\",    \\\"target\\\": \\\"ES2022\\\"  },  \\\"include\\\": [\\\"**/*.js\\\"],  \\\"exclude\\\": [\\\"node_modules\\\"]}

अब चलाएँ

npm run tsc --watch -p jsconfig.json

और अपने कोड में एक प्रकार की त्रुटि करें। टाइपस्क्रिप्ट कंपाइलर को शिकायत करनी चाहिए:

/** @type {number} **/const num = \\\"hello\\\";

वैसे, जो टिप्पणी आप ऊपर देख रहे हैं वह JSDoc है। आप इस तरह से अपने जावास्क्रिप्ट को प्रकारों के साथ एनोटेट कर सकते हैं। हालाँकि यह टाइपस्क्रिप्ट का उपयोग करने की तुलना में थोड़ा अधिक क्रियात्मक है, और आपको इसकी आदत बहुत जल्दी पड़ जाती है। यह बहुत शक्तिशाली भी है, जब तक आप पागलपन भरे टाइप के लेख नहीं लिख रहे हैं (जो आपको अधिकांश परियोजनाओं के लिए नहीं लिखना चाहिए) तो आपको कोई परेशानी नहीं होगी।

यदि आपको एक जटिल प्रकार (सहायक) की आवश्यकता है, तो आप हमेशा .d.ts फ़ाइल में कुछ टाइपस्क्रिप्ट जोड़ सकते हैं।

क्या JSDoc बड़ी जावास्क्रिप्ट परियोजनाओं में फंसे लोगों के लिए धीरे-धीरे टाइपस्क्रिप्ट में स्थानांतरित होने में सक्षम होने के लिए एक कदम मात्र है? मुझे ऐसा नहीं लगता! टाइपस्क्रिप्ट टीम JSDoc टाइपस्क्रिप्ट में बेहतरीन सुविधाएँ जोड़ना जारी रखती है, जैसे कि आगामी टाइपस्क्रिप्ट रिलीज़ में। वीएस कोड में स्वत: पूर्णता भी बढ़िया काम करती है।

मानचित्र आयात करें

हमने सीखा कि बिल्ड टूल के बिना अपने प्रोजेक्ट में बाहरी पैकेज कैसे जोड़ें। हालाँकि, यदि आप अपने कोड को कई मॉड्यूल में विभाजित करते हैं, तो पूरा यूआरएल बार-बार लिखना थोड़ा कठिन हो सकता है।

हम अपने Index.html के मुख्य भाग में एक आयात मानचित्र जोड़ सकते हैं:

अब हम इस पैकेज को आसानी से आयात कर सकते हैं

import {} from \\\"superstruct\\\"

एक 'सामान्य' प्रोजेक्ट की तरह। एक अन्य लाभ यह है कि यदि आप पैकेज को स्थानीय रूप से स्थापित करते हैं तो प्रकारों की पूर्णता और पहचान अपेक्षा के अनुरूप काम करेगी।

npm install --save-dev superstruct

ध्यान दें कि आपके नोड_मॉड्यूल निर्देशिका में संस्करण का उपयोग नहीं किया जाएगा। आप इसे हटा सकते हैं, और आपका प्रोजेक्ट चलता रहेगा।

एक युक्ति जो मैं उपयोग करना पसंद करता हूं वह है:

      \\\"cdn/\\\": \\\"https://esm.sh/\\\",

मेरे आयात मानचित्र पर। फिर esm.sh के माध्यम से उपलब्ध किसी भी प्रोजेक्ट को केवल आयात करके उपयोग किया जा सकता है। जैसे:

import Peer from \\\"cdn/peerjs\\\";

यदि आप इस प्रकार के आयात के विकास के लिए नोड_मॉड्यूल से प्रकार निकालना चाहते हैं, तो आपको अपने jsconfig.json के कंपाइलरऑप्शंस में निम्नलिखित जोड़ना होगा:

    \\\"paths\\\": {      \\\"cdn/*\\\": [\\\"./node_modules/*\\\", \\\"./node_modules/@types/*\\\"]    },

तैनाती

अपने प्रोजेक्ट को तैनात करने के लिए, सभी फ़ाइलों को एक स्थिर फ़ाइल होस्ट में कॉपी करें और आपका काम हो गया! यदि आपने कभी किसी पुराने जावास्क्रिप्ट प्रोजेक्ट पर काम किया है, तो आप बिल्ड टूलिंग को अपडेट करने का दर्द जानते हैं जो 1-2 साल पुराना भी नहीं है। इस प्रोजेक्ट सेटअप के साथ आपका भी यही हश्र नहीं होगा।

परिक्षण

यदि आपकी जावास्क्रिप्ट ब्राउज़र एपीआई पर निर्भर नहीं है, तो आप केवल टेस्ट रनर का उपयोग कर सकते हैं जो Node.js के साथ आता है। लेकिन आप अपना खुद का टेस्ट रनर क्यों नहीं लिखते जो सीधे ब्राउज़र में चलता है?

/** @type {[string, () => Promise | void][]} */const tests = [];/** * * @param {string} description * @param {() => Promise | void} testFunc */export async function test(description, testFunc) {  tests.push([description, testFunc]);}export async function runAllTests() {  const main = document.querySelector(\\\"main\\\");  if (!(main instanceof HTMLElement)) throw new Error();  main.innerHTML = \\\"\\\";  for (const [description, testFunc] of tests) {    const newSpan = document.createElement(\\\"p\\\");    try {      await testFunc();      newSpan.textContent = `✅ ${description}`;    } catch (err) {      const errorMessage =        err instanceof Error && err.message ? ` - ${err.message}` : \\\"\\\";      newSpan.textContent = `❌ ${description}${errorMessage}`;    }    main.appendChild(newSpan);  }}/** * @param {any} val */export function assert(val, message = \\\"\\\") {  if (!val) throw new Error(message);}

अब एक फ़ाइल बनाएं example.test.js.

import { test, assert } from \\\"@/test.js\\\";test(\\\"1 1\\\", () => {  assert(1   1 === 2);});

और एक फ़ाइल जहां आप अपने सभी परीक्षण आयात करते हैं:

import \\\"./example.test.js\\\";console.log(\\\"This should only show up when running tests\\\");

इसे पृष्ठ लोड पर चलाएँ:

await import(\\\"@/test/index.js\\\"); // file that imports all tests(await import(\\\"@/test.js\\\")).runAllTests();

और आपको एक आदर्श टीडीडी सेटअप मिला। परीक्षणों के केवल एक भाग को चलाने के लिए आप कुछ .test.js आयात पर टिप्पणी कर सकते हैं, लेकिन परीक्षण निष्पादन गति केवल तभी एक समस्या बननी शुरू होनी चाहिए जब आपने बहुत सारे परीक्षण जमा कर लिए हों।

फ़ायदे

आप ऐसा क्यों करेंगे? खैर, अमूर्तता की कम परतों का उपयोग करने से आपके प्रोजेक्ट को डीबग करना आसान हो जाता है। \\\"प्लेटफ़ॉर्म का उपयोग करें\\\" का मूलमंत्र भी है। आपके द्वारा सीखे गए कौशल अन्य परियोजनाओं में बेहतर ढंग से स्थानांतरित होंगे। एक और फायदा यह है कि जब आप 10 वर्षों में इस तरह से बनाई गई परियोजना पर लौटते हैं, तो यह अभी भी काम करेगा और आपको 8 वर्षों से खराब पड़े निर्माण उपकरण को पुनर्जीवित करने की कोशिश करने के लिए पुरातत्व करने की आवश्यकता नहीं है। एक ऐसा अनुभव जिससे कई वेब डेवलपर, जिन्होंने विरासती परियोजनाओं पर काम किया है, परिचित होंगे।

कुछ और विचारों के लिएplainvanillaweb.com देखें।

","image":"http://www.luping.net/uploads/20240807/172301184466b313046f19c.jpg","datePublished":"2024-08-07T14:24:03+08:00","dateModified":"2024-08-07T14:24:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > बिना (बिल्ड) टूलींग के वेब विकास

बिना (बिल्ड) टूलींग के वेब विकास

2024-08-07 को प्रकाशित
ब्राउज़ करें:849

Web Development Without (Build) Tooling

एक नया वेब प्रोजेक्ट शुरू करते समय जहां जावास्क्रिप्ट का उपयोग किया जाएगा, अक्सर पहली चीज जो हम करते हैं वह बिल्ड और डेवलपर टूलिंग सेट करना है। उदाहरण के लिए, वाइट, जो आजकल लोकप्रिय है। आप शायद नहीं जानते होंगे कि सभी जावास्क्रिप्ट (वेब) परियोजनाओं के लिए जटिल बिल्ड टूलिंग की आवश्यकता नहीं होती है। वास्तव में, जैसा कि मैं इस लेख में दिखाऊंगा, अब इसके बिना जाना पहले से कहीं अधिक आसान हो गया है।

index.html फ़ाइल के साथ एक नया प्रोजेक्ट बनाएं।


  
  
  
    

Hello world

यदि आप वीएस कोड का उपयोग कर रहे हैं, तो लाइव पूर्वावलोकन एक्सटेंशन इंस्टॉल करें। इसे चलाने के लिए। यह लाइव रीलोड वाला एक सरल फ़ाइल सर्वर है। आप किसी भी फ़ाइल सर्वर का उपयोग कर सकते हैं, पायथन एक अंतर्निहित सर्वर के साथ आता है:

python3 -m http.server

मुझे लाइव पूर्वावलोकन पसंद है, क्योंकि यह फ़ाइल में परिवर्तन करने के बाद स्वचालित रूप से पृष्ठ को ताज़ा करता है।

अब आपको ब्राउज़र से अपनी Index.html फ़ाइल तक पहुंचने में सक्षम होना चाहिए और "हैलो वर्ल्ड" देखना चाहिए।

अगला, एक Index.js फ़ाइल बनाएं:

console.log("Hello world");

export {};

इसे अपने Index.html में शामिल करें:

अपने ब्राउज़र में डेवलपर कंसोल खोलें। यदि आप "हैलो वर्ल्ड" देखते हैं, तो आप जानते हैं कि यह ठीक से लोड हो रहा है।

ब्राउज़र अब ईसीएमएस्क्रिप्ट मॉड्यूल का समर्थन करते हैं। आप अन्य फ़ाइलों को उनके दुष्प्रभावों के लिए आयात कर सकते हैं:

import "./some-other-script.js";

या उनके निर्यात के लिए

import { add, multiply } "./my-math-lib.js";

बहुत बढ़िया है ना? अधिक जानकारी के लिए उपरोक्त एमडीएन गाइड देखें।

संकुल

आप शायद पहिए का दोबारा आविष्कार नहीं करना चाहते, इसलिए आपका प्रोजेक्ट संभवतः कुछ तृतीय-पक्ष पैकेजों का उपयोग करेगा। इसका मतलब यह नहीं है कि अब आपको पैकेज मैनेजर का उपयोग शुरू करने की आवश्यकता है।

मान लें कि हम डेटा सत्यापन के लिए सुपरस्ट्रक्चर का उपयोग करना चाहते हैं। हम न केवल अपने (स्थानीय) फ़ाइल सर्वर से, बल्कि किसी भी URL से मॉड्यूल लोड कर सकते हैं। esm.sh npm पर उपलब्ध लगभग सभी पैकेजों के लिए आसानी से मॉड्यूल प्रदान करता है।

जब आप https://esm.sh/superstruct पर जाते हैं तो आप देख सकते हैं कि आपको नवीनतम संस्करण पर पुनः निर्देशित किया गया है। आप इस पैकेज को अपने कोड में इस प्रकार शामिल कर सकते हैं:

import { assert } from "https://esm.sh/superstruct";

यदि आप सुरक्षित रहना चाहते हैं, तो आप संस्करणों को पिन कर सकते हैं।

प्रकार

मैं आपके बारे में नहीं जानता, लेकिन टाइपस्क्रिप्ट ने मुझे बिगाड़ दिया (और मुझे आलसी बना दिया)। टाइप चेकर की मदद के बिना सादा जावास्क्रिप्ट लिखना रस्सी पर लिखने जैसा लगता है। सौभाग्य से, हमें टाइप चेकिंग भी नहीं छोड़नी पड़ेगी।

अब एनपीएम को खत्म करने का समय आ गया है (भले ही हम इसके द्वारा प्रदान किया गया कोई भी कोड शिप नहीं करेंगे)।

npm init --yes
npm install typescript

आप जावास्क्रिप्ट कोड पर टाइपस्क्रिप्ट कंपाइलर का उपयोग ठीक से कर सकते हैं! इसके लिए प्रथम श्रेणी का समर्थन है। एक jsconfig.json बनाएं:

{
  "compilerOptions": {
    "strict": true,
    "checkJs": true,
    "allowJs": true,
    "noImplicitAny": true,
    "lib": ["ES2022", "DOM"],
    "module": "ES2022",
    "target": "ES2022"
  },
  "include": ["**/*.js"],
  "exclude": ["node_modules"]
}

अब चलाएँ

npm run tsc --watch -p jsconfig.json

और अपने कोड में एक प्रकार की त्रुटि करें। टाइपस्क्रिप्ट कंपाइलर को शिकायत करनी चाहिए:

/** @type {number} **/
const num = "hello";

वैसे, जो टिप्पणी आप ऊपर देख रहे हैं वह JSDoc है। आप इस तरह से अपने जावास्क्रिप्ट को प्रकारों के साथ एनोटेट कर सकते हैं। हालाँकि यह टाइपस्क्रिप्ट का उपयोग करने की तुलना में थोड़ा अधिक क्रियात्मक है, और आपको इसकी आदत बहुत जल्दी पड़ जाती है। यह बहुत शक्तिशाली भी है, जब तक आप पागलपन भरे टाइप के लेख नहीं लिख रहे हैं (जो आपको अधिकांश परियोजनाओं के लिए नहीं लिखना चाहिए) तो आपको कोई परेशानी नहीं होगी।

यदि आपको एक जटिल प्रकार (सहायक) की आवश्यकता है, तो आप हमेशा .d.ts फ़ाइल में कुछ टाइपस्क्रिप्ट जोड़ सकते हैं।

क्या JSDoc बड़ी जावास्क्रिप्ट परियोजनाओं में फंसे लोगों के लिए धीरे-धीरे टाइपस्क्रिप्ट में स्थानांतरित होने में सक्षम होने के लिए एक कदम मात्र है? मुझे ऐसा नहीं लगता! टाइपस्क्रिप्ट टीम JSDoc टाइपस्क्रिप्ट में बेहतरीन सुविधाएँ जोड़ना जारी रखती है, जैसे कि आगामी टाइपस्क्रिप्ट रिलीज़ में। वीएस कोड में स्वत: पूर्णता भी बढ़िया काम करती है।

मानचित्र आयात करें

हमने सीखा कि बिल्ड टूल के बिना अपने प्रोजेक्ट में बाहरी पैकेज कैसे जोड़ें। हालाँकि, यदि आप अपने कोड को कई मॉड्यूल में विभाजित करते हैं, तो पूरा यूआरएल बार-बार लिखना थोड़ा कठिन हो सकता है।

हम अपने Index.html के मुख्य भाग में एक आयात मानचित्र जोड़ सकते हैं:

अब हम इस पैकेज को आसानी से आयात कर सकते हैं

import {} from "superstruct"

एक 'सामान्य' प्रोजेक्ट की तरह। एक अन्य लाभ यह है कि यदि आप पैकेज को स्थानीय रूप से स्थापित करते हैं तो प्रकारों की पूर्णता और पहचान अपेक्षा के अनुरूप काम करेगी।

npm install --save-dev superstruct

ध्यान दें कि आपके नोड_मॉड्यूल निर्देशिका में संस्करण का उपयोग नहीं किया जाएगा। आप इसे हटा सकते हैं, और आपका प्रोजेक्ट चलता रहेगा।

एक युक्ति जो मैं उपयोग करना पसंद करता हूं वह है:

      "cdn/": "https://esm.sh/",

मेरे आयात मानचित्र पर। फिर esm.sh के माध्यम से उपलब्ध किसी भी प्रोजेक्ट को केवल आयात करके उपयोग किया जा सकता है। जैसे:

import Peer from "cdn/peerjs";

यदि आप इस प्रकार के आयात के विकास के लिए नोड_मॉड्यूल से प्रकार निकालना चाहते हैं, तो आपको अपने jsconfig.json के कंपाइलरऑप्शंस में निम्नलिखित जोड़ना होगा:

    "paths": {
      "cdn/*": ["./node_modules/*", "./node_modules/@types/*"]
    },

तैनाती

अपने प्रोजेक्ट को तैनात करने के लिए, सभी फ़ाइलों को एक स्थिर फ़ाइल होस्ट में कॉपी करें और आपका काम हो गया! यदि आपने कभी किसी पुराने जावास्क्रिप्ट प्रोजेक्ट पर काम किया है, तो आप बिल्ड टूलिंग को अपडेट करने का दर्द जानते हैं जो 1-2 साल पुराना भी नहीं है। इस प्रोजेक्ट सेटअप के साथ आपका भी यही हश्र नहीं होगा।

परिक्षण

यदि आपकी जावास्क्रिप्ट ब्राउज़र एपीआई पर निर्भर नहीं है, तो आप केवल टेस्ट रनर का उपयोग कर सकते हैं जो Node.js के साथ आता है। लेकिन आप अपना खुद का टेस्ट रनर क्यों नहीं लिखते जो सीधे ब्राउज़र में चलता है?

/** @type {[string, () => Promise | void][]} */
const tests = [];

/**
 *
 * @param {string} description
 * @param {() => Promise | void} testFunc
 */
export async function test(description, testFunc) {
  tests.push([description, testFunc]);
}

export async function runAllTests() {
  const main = document.querySelector("main");
  if (!(main instanceof HTMLElement)) throw new Error();
  main.innerHTML = "";

  for (const [description, testFunc] of tests) {
    const newSpan = document.createElement("p");

    try {
      await testFunc();
      newSpan.textContent = `✅ ${description}`;
    } catch (err) {
      const errorMessage =
        err instanceof Error && err.message ? ` - ${err.message}` : "";
      newSpan.textContent = `❌ ${description}${errorMessage}`;
    }
    main.appendChild(newSpan);
  }
}

/**
 * @param {any} val
 */
export function assert(val, message = "") {
  if (!val) throw new Error(message);
}

अब एक फ़ाइल बनाएं example.test.js.

import { test, assert } from "@/test.js";

test("1 1", () => {
  assert(1   1 === 2);
});

और एक फ़ाइल जहां आप अपने सभी परीक्षण आयात करते हैं:

import "./example.test.js";

console.log("This should only show up when running tests");

इसे पृष्ठ लोड पर चलाएँ:

await import("@/test/index.js"); // file that imports all tests
(await import("@/test.js")).runAllTests();

और आपको एक आदर्श टीडीडी सेटअप मिला। परीक्षणों के केवल एक भाग को चलाने के लिए आप कुछ .test.js आयात पर टिप्पणी कर सकते हैं, लेकिन परीक्षण निष्पादन गति केवल तभी एक समस्या बननी शुरू होनी चाहिए जब आपने बहुत सारे परीक्षण जमा कर लिए हों।

फ़ायदे

आप ऐसा क्यों करेंगे? खैर, अमूर्तता की कम परतों का उपयोग करने से आपके प्रोजेक्ट को डीबग करना आसान हो जाता है। "प्लेटफ़ॉर्म का उपयोग करें" का मूलमंत्र भी है। आपके द्वारा सीखे गए कौशल अन्य परियोजनाओं में बेहतर ढंग से स्थानांतरित होंगे। एक और फायदा यह है कि जब आप 10 वर्षों में इस तरह से बनाई गई परियोजना पर लौटते हैं, तो यह अभी भी काम करेगा और आपको 8 वर्षों से खराब पड़े निर्माण उपकरण को पुनर्जीवित करने की कोशिश करने के लिए पुरातत्व करने की आवश्यकता नहीं है। एक ऐसा अनुभव जिससे कई वेब डेवलपर, जिन्होंने विरासती परियोजनाओं पर काम किया है, परिचित होंगे।

कुछ और विचारों के लिएplainvanillaweb.com देखें।

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/louwers/web-development-without-tooling-flk?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए [email protected] से संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3