क्लिक के एक जोड़े में एन्जिल्स के लिए एक खुला स्रोत परियोजना बनाएँ

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

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

पुस्तकालय के लिए कोणीय कार्यक्षेत्र कैसे व्यवस्थित करें

यहां हमारे पास एक खाली कार्यशाला है। हम स्वयं पुस्तकालय के लिए और डेमो के लिए आवेदन में एक पुस्तकालय उत्पन्न कर सकते हैं। एक सुविधाजनक परियोजना संरचना प्राप्त करें:



डेमो के अलावा, आप जोड़ सकते हैं, उदाहरण के लिए, e2e परीक्षणों के साथ एक आवेदन जो आपके पुस्तकालय का उपयोग करेगा और उस पर परीक्षण चलाएगा।

कार्यक्षेत्रों के लिए धन्यवाद, हम एक जगह से कई पुस्तकालयों का प्रबंधन कर सकते हैं:

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

डेमो कस्टमाइज़ करें

डेमो भी कार्यक्षेत्र का हिस्सा है, लेकिन एप्लिकेशन प्रकार के साथ। पुस्तकालय के लिए डेमो का पहला नियम यह है कि इसे वर्तमान संस्करण के साथ कुछ ऑनलाइन आईडीई में आसानी से चलना चाहिए।

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

हम सभी ऑनलाइन IDE के लिए इस समस्या को तुरंत हल कर देंगे। हम अपने angular.json और package.json को डेमो के साथ प्रोजेक्ट फ़ोल्डर में रखते हैं, जैसे कि हम एक स्वतंत्र प्रोजेक्ट स्थापित कर रहे हैं:

angular.json

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", ... "projects": { "demo": { "architect": { "build": { ..., "options": { ... "tsConfig": "tsconfig.demo.json", } ... 

tsconfig.demo.json

 { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [], "paths": {} } } 

टीएस कॉन्फ़िगरेशन समान रहता है, लेकिन एक खाली वस्तु पर पथ को पुनर्परिभाषित किया जाता है ताकि परियोजना सामान्य कार्यक्षेत्र के आधार पर बिना शुरू हो जाए।

package.json

 ... “dependencies”: { ... “your-library-name”: “latest” } ... 

यह पता चला है कि अब हमारा डेमो एप्लिकेशन दो भिन्नताओं में शुरू हो सकता है।

पहला विकल्प विकास के लिए एक डेमो है

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

दूसरा विकल्प ऑनलाइन आईडीई में देखने के लिए एक डेमो है

हम प्रोजेक्ट को डेमो से फ़ोल्डर से शुरू करते हैं। फिर स्थानीय पैकेज। Json और angular.json का उपयोग किया जाएगा: डेमो स्वतंत्र रूप से शुरू होगा और NPM के साथ हमारे पुस्तकालय के नवीनतम संस्करण को स्थापित करेगा।

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

https://stackblitz.com/github/[User|Organization]/[Repository]/tree/master/projects/demo
https://codesandbox.io/s/github/[User|Organization]/[Repository]/tree/master/projects/demo


टर्नकी समाधान

हमने पहले ही एक पूर्ण स्टार्टर को इकट्ठा कर लिया है और इसे गीथूब पर रख दिया है ।

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


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

इसमें CODE_OF_CONDUCT.md सम्‍मिलित और भरा हुआ है, साथ ही गितुब पर मुद्दों और पूल अनुरोधों के लिए टेम्प्लेट। आपको कुछ भी शामिल करने की आवश्यकता नहीं है, गितुब उन्हें खुद से उठाएगा।

इस स्टार्टर के आधार पर, दो लाइब्रेरी पहले ही बनाई जा चुकी हैं:

• ng-dompurify (गीथूब, हब पर लेख )।
• एनजी-पॉलीमॉर्फियस ( गीथूब , हब पर लेख )।

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