कोणीय क्लि 6: आपको इसकी आवश्यकता क्यों है और इसका उपयोग कैसे करें

सभी को नमस्कार!

सितंबर 2016 में कोणीय संस्करण 2.0.0 जारी किया गया था। और तुरंत इस ढांचे पर अनुप्रयोगों के निर्माण और निर्माण के लिए बड़ी संख्या में दृष्टिकोण दिखाई दिए। इंटरनेट पर आप हर स्वाद के लिए कोणीय बीज पा सकते हैं।

हमने अपना स्वयं का कोणीय बीज भी बनाया: हमने एक सामान्य प्रोजेक्ट-टेम्प्लेट बनाया, सभी टीमों को एक ही एप्लिकेशन संरचना का उपयोग करने के लिए फ्रंट-एंड विकसित करने के लिए बाध्य किया।

छह महीने बाद, मार्च 2017 में, कोणीय क्लस्टर संस्करण (cli - कमांड-लाइन इंटरफ़ेस) 1.0.0 जारी किया गया था। एक आधार के रूप में लिया गया यह विचार, बस उत्कृष्ट है: एंगुलर 2+ पर विकासशील अनुप्रयोगों के दृष्टिकोण को व्यवस्थित करने के लिए। एप्लिकेशन की संरचना को मानकीकृत करें, एप्लिकेशन के भीतर इकाइयां बनाएं और एप्लिकेशन की असेंबली को स्वचालित करें। इन कार्यों को एंगुलर क्लाई द्वारा हल किया जा सकता है, जो आपके समय की काफी बचत करता है।

लेख में मैं दिखाऊंगा कि कोणीय क्ली 6 में कैसे अपग्रेड किया जाए

कस्टम परियोजना संरचना के साथ विकास के कुछ फायदे हैं:

• आवेदन पर पूर्ण नियंत्रण;
• अपने आवेदन की सभी विशेषताओं को ध्यान में रखते हुए webpack / gulp / अन्य सभी चीजों को कॉन्फ़िगर करने की क्षमता।

इसके नुकसान भी हैं:

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

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

लेखन के समय, वेबपैक 4 एकीकरण के साथ छठा संस्करण जारी किया गया था। नवाचारों के बारे में बहुत सारी जानकारी है, मैं केवल कुछ सुधारों का उल्लेख करूंगा:

• एक घटक पुस्तकालय का स्वत: निर्माण;
• एनजी-अपडेट की उपस्थिति, जो एंगुलर क्ली पर परियोजनाओं के लिए समर्थन को और भी आसान बनाती है;
• वेबपैक 4 के साथ एकीकरण, और इसलिए, अंतिम बंडलों का एक छोटा आकार, विधानसभा समय का एक महत्वपूर्ण त्वरण आदि, आप यहां अपडेट की पूरी सूची देख सकते हैं;
• स्कैमेटिक्स का उपयोग करके कोणीय क्लि का लचीला विन्यास।

मुझे कहना होगा कि कोणीय क्ली के छठे संस्करण में बहुत सारे कीड़े हैं। मैं उनमें से कुछ के बारे में बताऊंगा। उनमें से कुछ कोणीय क्लि के साथ जुड़े हुए हैं, कुछ वेबपैक 4 के साथ। उदाहरण के लिए, कुछ लोकप्रिय वेबपैक लोडर वर्तमान में कलेक्टर के चौथे संस्करण का समर्थन नहीं करते हैं। मुझे यकीन है कि ये अस्थायी कठिनाइयाँ हैं।

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

संक्रमण के लिए तैयारी कर रहा है

1. नोड.जेएस > = 8.9 का संस्करण स्थापित करें
2. हम npm i -g कोणीय / cli निष्पादित करते हैं (विश्व स्तर पर कोणीय-cli स्थापित करें जो एनजी का उपयोग करके कंसोल में कमांड निष्पादित करने के लिए)।
3. हम प्रोजेक्ट के साथ डायरेक्टरी में जाते हैं और एनजी रन करते हैं <अपना प्रोजेक्ट नाम> (आइए प्रोजेक्ट को कॉल करें: कोणीय-क्ली-प्रोजेक्ट, उदाहरण कमांड: एनजी न्यू कोणीय-क्ली-प्रोजेक्ट - एक फ़ोल्डर जिसे कोणीय-क्लि-प्रोजेक्ट कहा जाता है, वर्तमान निर्देशिका में दिखाई देगा)।

तैयारी का परिणाम:



न केवल कोणीय क्ली पर परियोजना की संरचना के बारे में और पढ़ें।

अगला, हम आरामदायक विकास के लिए बुनियादी सेटिंग्स करेंगे।

क्लि सेटअप

1) हम गाइड के अनुसार एचएमआर कनेक्ट करते हैं (हम पृष्ठ को फिर से लोड किए बिना कोड में परिवर्तन लागू करते हैं)। इसके अलावा package.json में स्क्रिप्ट्स और --open फ्लैग के लिए hmr जोड़ें ताकि हम ब्राउज़र में सोर्स पेज न खोलें:



उपरोक्त गाइड के माध्यम से एचएमआर को कॉन्फ़िगर करते समय ए 6 क्ली में लेख लिखने के समय, आपको निम्नलिखित त्रुटियों का सामना करना पड़ सकता है:

ए) जब एचएमआर कॉन्फ़िगरेशन को कोणीय.जॉन में जोड़ते हैं

… "configurations": { "hmr": { "hmr": true, "fileReplacements": [{ "src": "src/environments/environment.ts", "replaceWith": "src/environments/environment.hmr.ts" }] }, … 

क्षमा करें, आपको एक त्रुटि मिली है:
"स्कीमा सत्यापन निम्नलिखित त्रुटियों के साथ विफल रहा:
डेटा पथ में "" अतिरिक्त गुण नहीं होना चाहिए (फाइलआरप्लेमेंट्स) "।

इसे ठीक करने के लिए, यह करें:

 … "configurations": { "hmr": { "hmr": true, "browserTarget": "angular-cli-project:build:hmr" }, … 

अंतर यह है कि आपको "ब्राउज़रटार्गेट" निर्दिष्ट करना चाहिए : "कोणीय-क्ली-प्रोजेक्ट: बिल्ड: एचएमआर" , जहां ब्राउज़रटार्ग संपत्ति का मूल्य <प्रोजेक्ट-नाम>: बिल्ड: एचएमआर शामिल है ।

इसके अलावा, HMR पर्यावरण का प्रतिस्थापन सेवा में नहीं, बल्कि वास्तुविद / निर्माण में किया जाना चाहिए:

 … "architect": { "build": { … "configurations": { "hmr": { "fileReplacements": [ { "src": "src/environments/environment.ts", "replaceWith": "src/environments/environment.hmr.ts" } ] }, … 

b) src / main.ts में ERROR त्रुटि : 'मॉड्यूल' नाम नहीं मिल रहा है जो निम्नानुसार तय किया गया है: tsconfig.app.json में हम "टाइप": [] को हटाते हैं।

2. प्रीप्रोसेसर कनेक्ट करें :

Angular.json में, जोड़ें:

 … "projects": { … "prefix": "app", "schematics": { "@schematics/angular:component": { "styleext": "less" } } … 

यदि आपकी शैलियाँ परिसंपत्ति फ़ोल्डर में हैं और Base.less या scss में आयात द्वारा संयोजित हैं, और आउटपुट को .css फ़ाइल की आवश्यकता है, तो "extractCss" जोड़ें : angular.json के लिए सही :



इसके अलावा एचएमआर मोड में वर्तमान में आयात के माध्यम से आयात की जाने वाली वैश्विक कम फाइलों में अपडेट करने से काम नहीं चलेगा। इस समस्या को हल करने के लिए, अस्थायी रूप से कम-लोडर@3.0.0 स्थापित करें ।

3. हम ऑटोप्रिफ़र कनेक्ट करते हैं । निर्दिष्ट करें कि कौन से ब्राउज़र को पैकेज में उपसर्गों की आवश्यकता है ।

 … "browserslist": [ "last 2 versions", "IE 10", "IE 11" ], … 

4. gulp और svgstore का उपयोग करके आइकन प्रसंस्करण जोड़ें , खासकर जब से चौथे संस्करण का gulp आखिरकार बाहर आ गया। Npm i gulp@4.0.0 gulp-injection gulp-rename gulp-svgmin gulp-svgstore --SD चलाएं और एक छोटा सा गुलपाइल बनाएं। js ( अंतिम एप्लिकेशन देखें)।

हम विस्तार से - सभी प्रश्न कृपया, टिप्पणी में गुलप पर नहीं रहेंगे।

SVG डालने के लिए index.html संकेतन में निर्दिष्ट करें:

 <div style="height: 0; width: 0; overflow: hidden; opacity: 0;position: absolute; top: 0;left: 0;"> <!-- inject:svg --><!-- endinject --> </div> 

पैकेज को संशोधित करें । कार्य एसवीजी जोड़कर:

 … "scripts": { ... "svg": "gulp svg", ... … 

अब हम इस तरह से अपने टेम्पलेट में SVG का उपयोग कर सकते हैं:

 <svg> <use href='#icon-check'/> </svg> 

5) वेबपैक-बंडल-एनालाइजर स्थापित करें

कमांड चलाकर : npm i webpack-bundle-analyzer –-SD ।

Angular.json में "आंकड़ेजोन" जोड़ें : सच :

 "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { ... "statsJson": true, ... 

अब हम देख सकते हैं कि हमारे बंडल में वास्तव में क्या है। इसे किसी तरह से स्वचालित करने के लिए, रिपोर्ट स्क्रिप्ट को package.json में जोड़ें:

 … "scripts": { ... "report": "webpack-bundle-analyzer dist/stats.json" ... … 

वेबपैक-बंडल-विश्लेषक का उपयोग करने का एक उदाहरण:



मूल कार्यक्षमता सेट करना पूर्ण हो गया है।

अब हमारे कस्टम कोणीय एप्लिकेशन को खोलें और मॉड्यूल, चित्र, शैली आदि को तैयार किए गए टेम्पलेट में कॉपी करें। मैं लेख के अंतिम मसौदे से सब कुछ कॉपी करूंगा।

हम कमांड निष्पादित करते हैं : npm hmr चलाते हैं और rxjs से कुछ त्रुटियां प्राप्त करते हैं, जो पांचवें से छठे संस्करण में माइग्रेट हो गए। अगला गाइड उन्हें ठीक करने में मदद करेगा।

अंतिम आवेदन ।

हम कमांड निष्पादित करते हैं: npm रन बिल्ड और परिणाम प्राप्त करें:



PS जैसा कि आप देख सकते हैं, बंडल आकार अभी भी काफी बड़ा है, हालांकि, इसमें रूटिंग, rxjs, आदि शामिल हैं। हालांकि, कोणीय टीम ने 2.7 Kb का नया रेंडर इंजन आइवी और हैलो वर्ल्ड एप्लीकेशन आकार की घोषणा की। इसके लिए तत्पर हैं।

आपका ध्यान के लिए धन्यवाद।