हम एक आधुनिक वेब एप्लिकेशन बनाते हैं। परियोजना और काम के लिए तैयारी के साथ परिचित। भाग 1

लेखों की इस श्रृंखला में, हम एप्लिकेशन के क्लाइंट भाग बनाने के पूर्ण चक्र से गुजरेंगे और आधुनिक प्रौद्योगिकी स्टैक का उपयोग करते हुए घटकों की एक छोटी सी लाइब्रेरी लिखेंगे।

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

परियोजना के साथ परिचित

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

लेख को कई भागों में विभाजित किया जाएगा ताकि हम परियोजना के प्रत्येक चरण की विस्तार से जांच कर सकें।

शुरुआत हो रही है

आरंभ करने के लिए, हमें अपनी परियोजना के लिए GitHub पर एक भंडार बनाने की आवश्यकता है:



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

अब नए रिपॉजिटरी को क्लोन करें। GitHub SSH या HTTPS का उपयोग करके क्लोनिंग का सुझाव देता है। मैं आमतौर पर दूसरी विधि का उपयोग करता हूं।

git clone https://github.com/Alexandrshy/react-ant.git 

यदि आप सफल अनपैकिंग के बारे में संदेश देखते हैं, तो क्लोनिंग सफल रही।

हमें पासवर्ड को तुरंत कैश करने की भी आवश्यकता है, अगर आप अगली बार ऐसा नहीं करते हैं तो आप git push, git fetch, git clone करने की कोशिश करते हैं, आपको एक यूजरनेम और पासवर्ड दर्ज करना होगा ( इस पर अधिक )।

 git config --global credential.helper osxkeychain 

चलिए package.json फ़ाइल बनाने के लिए आगे बढ़ते हैं। ऐसा करने के लिए, कमांड चलाएँ:

 npm init -y 

रिपॉजिटरी में कमांड चलाने के बाद, आप पैकेज को देख सकते हैं। कुछ भरे हुए फ़ील्ड्स के साथ फ़ाइल को देखें, मेरा ऐसा दिखता है:

 { "name": "react-ant", "version": "1.0.0", "description": "A set of light React components ", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/Alexandrshy/react-ant.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com/Alexandrshy/react-ant/issues" }, "homepage": "https://github.com/Alexandrshy/react-ant#readme" } 

हम तुरंत छोटे परिवर्तन करेंगे:

  "keywords": [ "react", "css", "UI" ], "author": { "name": "Alex", "email": "alexandrshy@gmail.com", "url": "https://github.com/Alexandrshy" }, "license": "MIT", 

मुझे लगता है कि यहां सब कुछ स्पष्ट है, लेकिन अधिक विस्तृत कॉन्फ़िगरेशन के लिए, आपको इस दस्तावेज़ की आवश्यकता हो सकती है।

जैसा कि हम प्रोजेक्ट पर काम करते हैं, हम package.json कॉन्फ़िगरेशन पर लौट आएंगे। लेकिन अब पहला काम करने का समय आ गया है।

 git status git add package.json git commit -m "Init npm package" git push 

संक्षेप में, हमने क्या किया: हमने परिवर्तनों के इतिहास की जांच की, संशोधित पैकेज को सूचीबद्ध किया। एक सरल और स्पष्ट प्रतिबद्ध संदेश के साथ प्रतिबद्ध, और फिर हमारे परिवर्तनों को एक दूरस्थ भंडार में डाल दिया। अब package.json और नई प्रतिबद्धताओं के बारे में जानकारी हमारे भंडार में दिखाई दी है। Git के साथ काम करने के लिए आप IDE या GUI का उपयोग कर सकते हैं, लेकिन मैं कंसोल में सब कुछ करने में अधिक सहज हूं।

लिंटर

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

ESLint स्थापित करें:

 npm i -D eslint 

कॉन्फ़िगरेशन फ़ाइल सेट करें:

 ./node_modules/.bin/eslint --init 

आप ESLint को मैन्युअल रूप से कॉन्फ़िगर कर सकते हैं या पूर्वनिर्धारित नियम सेट का उपयोग कर सकते हैं। मुझे Airbnb का गाइड पसंद है। मैंने निम्नलिखित सेटिंग्स का उपयोग किया:

 ? How would you like to use ESLint? To check syntax, find problems, and enforce code style ? What type of modules does your project use? JavaScript modules (import/export) ? Which framework does your project use? React ? Does your project use TypeScript? Yes ? Where does your code run? Browser ? How would you like to define a style for your project? Use a popular style guide ? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript) ? What format do you want your config file to be in? JavaScript 

चूंकि हमने टाइपस्क्रिप्ट का उपयोग करने की योजना बनाई है, इसलिए मैंने तुरंत इस आइटम को संवाद बॉक्स में चुना, जिसके कारण मुझे मॉड्यूल 'टाइपस्क्रिप्ट' त्रुटि नहीं मिली, जो कि तार्किक है क्योंकि हमने अभी तक टाइपस्क्रिप्ट स्थापित नहीं किया है, चलो इसे अभी ठीक करें:

 npm i typescript npm i -D @typescript-eslint/parser 

इंस्टॉलेशन के बाद, आपको एस्लिंट आर्क कॉन्फ़िगरेशन फ़ाइल दिखाई देगी। यह पहले से ही कॉन्फ़िगर है, लेकिन अगर विकास के दौरान आप कुछ नियमों को जोड़ना या बदलना चाहते हैं, तो यह आपकी सहायता के लिए आएगा।

ESLint का परीक्षण करने के लिए, एक index.ts फ़ाइल बनाएँ और वहाँ निम्न कोड सहेजें:

 var a console .log('a = ' + a) a = 100 

और चेक चलाएं:

 ./node_modules/.bin/eslint index.ts 

महान, एक 5-लाइन कोड में 7 त्रुटियां और 1 चेतावनी है। और तुरंत ESLint मुझे इन त्रुटियों को स्वचालित रूप से ठीक करने की पेशकश करता है, आइए इसे करने का प्रयास करें:

 ./node_modules/.bin/eslint index.ts --fix 

और हमें यह कोड, त्रुटियों के बिना और कंसोल का उपयोग करने के बारे में एक चेतावनी के साथ मिलता है:

 var a; console .log(`a = ${a}`); a = 100; 

जैसा कि आप स्वचालित फिक्स कार्यों को देख सकते हैं, त्रुटियों को ठीक कर दिया गया है, लेकिन कोड अभी भी बहुत बदसूरत दिखता है। कोड स्वरूपण के लिए, मेरी राय में सबसे अच्छा उपकरण Prettier है । आइए इसे हमारी परियोजना में जोड़ें:

 npm i -D prettier-eslint npm i -D prettier-eslint-cli 

 "scripts": { "format": "prettier-eslint '**/*.{js,ts,tsx}' --write" }, 

मैंने --लेखक विकल्प जोड़ा ताकि सभी स्वरूपित फ़ाइलें अधिलेखित हो जाएं। परिणाम की जाँच करें:

 npm run format 

index.ts

 let a; console.log(`a = ${a}`); a = 100; 

सब कुछ बढ़िया काम करता है। आप कीबोर्ड के शॉर्टकट का उपयोग करके या परिवर्तनों को सहेजते समय अपनी IDE के लिए फ़ाइलों को प्रारूपित करने के लिए प्लग इन भी स्थापित कर सकते हैं। अब स्क्रिप्ट को package.json में जोड़ें:

 "scripts": { "eslint": "./node_modules/.bin/eslint '**/*.{js,ts,tsx}'", "eslint:fix": "npm run eslint -- --fix", "format": "prettier-eslint '**/*.{js,ts,tsx}' --write" }, 

नया प्रोजेक्ट शुरू करते समय आदर्श विकल्प सभी लिंटर्स को तुरंत कॉन्फ़िगर करना है, क्योंकि यदि आप उन्हें किसी मौजूदा प्रोजेक्ट में लागू करने का प्रयास करते हैं, तो आप बड़ी संख्या में त्रुटियों को देख सकते हैं और उन्हें ठीक करने में बहुत अधिक समय लगेगा यदि आपने शुरू में अपने कोड की गुणवत्ता का ध्यान रखा था।

परिवर्तन सहेजें:

 git add . git commit -m "Added ESLint and Prettier" git push 

पूर्व-प्रतिबद्ध हुक

हमने ESLint और Prettier को कॉन्फ़िगर किया और स्क्रिप्ट को मैन्युअल रूप से चलाने के लिए बनाया, लेकिन ऐसा करने से पहले यह स्वचालित रूप से करना अच्छा होगा। इसके लिए हम Git हुक का उपयोग कर सकते हैं। हस्की पैकेज आपको `गिट कम` निष्पादित करने से पहले स्क्रिप्ट चलाने की अनुमति देता है, और लिंट-स्टेज पैकेज आपको विशिष्ट फ़िल्टर के खिलाफ केवल अनुक्रमित फ़ाइलों की जांच करने की अनुमति देता है।

 npm i -D husky lint-staged 

चलिए package.json पर वापस जाते हैं और निम्नलिखित कोड जोड़ते हैं:

  "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx|ts|tsx)": [ "npm run eslint:fix", "npm run format", "git add" ] }, 

अब, प्रत्येक कमिट से पहले, हम सभी संशोधित js और ts फ़ाइलों के लिए एक ESLint और Prettier चेक चलाएंगे और फॉर्मेट करने के बाद इन फाइलों को हमारी कमेटी में शामिल करेंगे।

फिर से index.ts फ़ाइल का परीक्षण करें:

 var a; console .log(`a = ${a}`); a = 100; 

केवल इस एक पर हम तुरंत इस फ़ाइल को सूचीबद्ध करते हैं और प्रतिबद्ध करते हैं:

 git add index.ts git commit -m "Testing pre-commit hook" 

यदि आप index.ts फाइल को अभी चेक करते हैं, तो आप देखेंगे कि कोड फॉर्मेट हो गया है। परिवर्तनों को सहेजने से पहले, फ़ाइल की जाँच की जाएगी और यदि आवश्यक हो तो स्वरूपित किया जाएगा। यह आपको उन फ़ाइलों की शुद्धता के बारे में सुनिश्चित करने की अनुमति देता है जो आपके भंडार में आते हैं।

## निष्कर्ष

हमें सभी परिवर्तनों को सहेजना होगा। इससे पहले, .gitignore फ़ाइल बनाएँ जहाँ हम node_modules लिखते हैं , हमें अपने भंडार में जाने के लिए निर्भरता फ़ोल्डर की आवश्यकता नहीं है। हम index.ts फ़ाइल को हटा भी सकते हैं, हमें भविष्य में इसकी आवश्यकता नहीं होगी।

 git add . git commit -m "Added husky and lint-staged" git push 

आप कार्य का पूरा परिणाम रिपॉजिटरी में देख सकते हैं। परियोजना की वर्तमान स्थिति मास्टर शाखा है, और प्रत्येक लेख के लिए मैं एक अलग शाखा बनाऊंगा।

हम यहां रुकेंगे, आप सभी का ध्यान आकर्षित करने के लिए, आपको निम्नलिखित भागों में देखेंगे।

संदर्भ

npm प्रलेखन
ESLint आधिकारिक वेबसाइट
खूबसूरत-eslint
खूबसूरत-eslint-CLI
VSCode के लिए Prettier एक्सटेंशन
कर्कश
एक प्रकार का वृक्ष मंचन