👩‍👩‍👧‍👦 👍🏾 💭 बूटस्ट्रैप 4 के लिए कस्टम घटक बनाना 🚫 💾 🎇

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

और जावास्क्रिप्ट फ्रेमवर्क कोड कैसे विकसित हो रहा है यह भी एक विचार के लिए उपयोगी है। JQuery प्लगइन्स की वास्तुकला अभी भी उपयोग में है, लेकिन संस्करण 4 से इसे रोलअप द्वारा पैकेज में लपेटा गया है, बाबुल 6 का उपयोग करके परिवर्तित किए गए ES6 वर्गों में। jQuery शायद जल्द ही नहीं होगा - उस पर और बाद में - लेकिन अब के लिए, अपने खुद के BsMultiSelect प्लगइन बनाने के उदाहरण पर, Boostrap 4 के रूप में एक ही स्टैक पर, फ्रेमवर्क की विकास विशेषताओं का खुलासा किया जाएगा।

क्यों " हर प्रोग्रामर को अपना लिखना चाहिए ... "

" केवल सुधारने से काम बिगड़ जाता है ।" यह समझने की आवश्यकता है कि नए बूटस्ट्रैप को क्या मिला, इसके घटकों को नए स्टैक में स्थानांतरित करना और उच्च-क्रम वाले घटकों को बनाना अब कितना आसान है। सब कुछ सरल प्रतीत हो रहा था: गठबंधन .form-control , .badge और .dropdown-menu और आप आसानी से एक बहु ... प्राप्त कर सकते हैं।

द्वार से वास्तुकला का संघर्ष

परिणामस्वरूप BsMultiSelect प्लगइन सीधे जेएस बूटस्ट्रैप.जेएस कोड का उपयोग नहीं करता है, लेकिन इसकी निर्भरता, popper.js (वेनिला पॉप-अप फ्रेमवर्क) का उपयोग करता है। ऐसा इसलिए है क्योंकि bootstrap.js से ड्रॉपडाउन घटक को DOM में इनिशियलाइज़ेशन के दौरान तथाकथित टॉगल एलिमेंट खोजने की आवश्यकता है (विशेष स्थिति में यह एक बटन है जो मेन्यू को खोलता है), यदि यह नहीं मिलता है, तो यह एक एरर के साथ क्रैश हो जाता है (जब से मैं सीधे js बनाता हूं तो मेरे पास "बटन" हैं) बिल्कुल नहीं)। निष्कर्ष: "HTML ओवर जेएस" के तहत तेज किए गए घटकों को जेएस से सीधे (या निस्संदेह) नहीं बनाया जा सकता है। निष्कर्ष संख्या दो: आपको कस्टम घटकों को प्रोग्राम करने की आवश्यकता है ताकि "HTML ओवर जेएस" घटक के तहत, हमेशा "शुद्ध जेएस" का हल्का घटक हो। मेरे पास यह MulitSelect.js न केवल कोड के बल्कि बूटस्ट्रैप शैलियों के भी पूरी तरह से मंजूरी दे दी है। MulitSelect.js BsMulitSelect.js के लिए समान भूमिका निभाता है, जैसा कि dropdown.js के लिए popper.js करता है।

Popper.js के बारे में दो शब्द

महान पुस्तकालय - एक समारोह। DropDown.js दोहराता है लेकिन इसे पूरी तरह से सीमित इंटरफ़ेस प्रदान करता है (फिर से, क्योंकि "HTML ओवर JS" में संपूर्ण API की आवश्यकता नहीं है)। पॉपर के पास हमसे ज्यादा खुला मुद्दा है। मुझे निराशा हुई कि IE11 के तहत यह क्रोम के तहत घटनाओं को प्रकाशित नहीं करता है ।

IIFE से कक्षाओं में संक्रमण के बारे में

मानक jQuery प्लगइन बॉयलरप्लेट IIFE के अंदर निर्माण कार्य को परिभाषित करने के लिए है। अब यह IIFE के अंदर एक वर्ग है। उद्घाटन: ईएस 6 लैम्ब्डा के साथ निजी तरीकों का संघर्ष करने के लिए पुराने कार्यात्मक तरीके, इसलिए उन्हें बूटस्ट्रैप में "छोड़ दिया गया"। सभी विधियाँ सार्वजनिक हैं, जबकि छद्म-निजी विधियाँ _ के साथ उपसर्ग हैं। underscrore। मैं समझता हूं कि मैं गलत हूं, लेकिन मैं अपने सम्मेलनों का पालन करता हूं - "बड़े अक्षर वाले सार्वजनिक तरीके"। बाकी सभी चीजों में, BsMultiSelect ने "मानक" ड्रॉपडाउन.जेएस के समझौते को अपनाया, अर्थात। मैं उसे मांस के साथ बॉयलरप्लेट के रूप में प्रतिनिधित्व करना चाहूंगा।

हालाँकि, एक और अंतर है, क्योंकि वहाँ रोलअप है, मैं फ़ाइलों को मारा ..

 import $ from 'jquery' import AddToJQueryPrototype from './AddToJQueryPrototype' import MultiSelect from './MultiSelect' // ... ( (window, $) => { AddToJQueryPrototype('BsMultiSelect', (element, optionsObject, onDispose) => { // ... return new MultiSelect(element, optionsObject, onDispose, facade, window, $); }, $); } )(window, $)

नया समझौता: प्लगइन को कंस्ट्रक्टर प्रकाशित करना चाहिए - ताकि आईआईएफई के अंदर कंस्ट्रक्टर खो न जाए। हां, एक आईआईएफई रहना चाहिए - किसी ने खिड़की, $ और पॉपर निर्भरता (जो "मॉड्यूल में नहीं कर सकते हैं") को मानक तरीके से परिभाषित करने के काम को हटा दिया।

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

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

Eslint, स्टाइललिंट अक्सर बाहर नहीं आ सकता है, लेकिन नए नियमों को देखने की कोई इच्छा नहीं है। सभी पहलुओं में, यह उपलब्धि मुझे और परेशान करती है।

संगठन कोड और रोलअप

बूटस्ट्रैप का ES6 पुनर्वितरण कोड दो संस्करणों में रोलअप द्वारा पैक किया गया है: स्टैंडअलोन बूटस्ट्रैप.जेएस और बंडल बूटस्ट्रैप.बंडले.जेएस - बाद वाले में popper.js शामिल हैं।

Rollup.config.js के लेखक ने मेरे लिए विदेशी प्रवृत्ति की है। स्टैंडअलोन या बंडल के आवश्यक संस्करण के आधार पर पुश और पॉप के माध्यम से यह सभी कॉन्फ़िगरेशन परिवर्तन , विस्तृत रूप से और डराने वाला लगता है, सौभाग्य से, प्लग-इन लिखने के लिए आपको केवल एक प्रकार के बंडल "स्टैंडअलोन" की आवश्यकता होती है और मुझे यह साबित करने की आवश्यकता नहीं है कि मैं बेहतर कर सकता हूं।

बूटस्ट्रैप का स्टैंडअलोन संस्करण भी पैकेज के मुख्य क्षेत्र में इंगित किया गया है अर्थात्। npm निर्भरताएँ उसी फ़ाइल से हल होती हैं जिसे उपयोगकर्ता <script> माध्यम से लोड करते हैं। यह एक अस्पष्ट समाधान नहीं है, लेकिन मेरे BsMultiSelect प्लगइन ने उसी पथ का अनुसरण किया है। इस मामले में, बाबेल हेल्पर्स को प्लगइन में शामिल किया जा सकता है, इस तथ्य के बावजूद कि वे बूटस्ट्रैप.जेएस में भी शामिल हैं। दोहराव किसी तरह सही नहीं है ...

मजे की बात यह है कि बूटस्ट्रैप में जेएसपीएम के तहत एक समानांतर विन्यास है - देशी ब्राउज़र ईएस मॉड्यूल लोडर और इसका मुख्य क्षेत्र पहले से ही साफ रीमोटेड कोड है, 12 घटक जो बंडल नहीं हैं, लेकिन जेएस / डिस्ट निर्देशिका में अलग से संग्रहीत किए जाते हैं। यहाँ, प्रत्येक फ़ाइल में babel हैल्पर शामिल है। Jspm अब एक चौराहे पर है, इसलिए BsMultiselect बनाकर इसे अनदेखा करें।

और अभी तक यह पारखी लोगों से पूछना दिलचस्प है, क्या jspm सभी 12 बार डुप्लिकेट किए गए सहायक सहायकों को ब्राउज़र में उठाने जा रहा है?

रोलअप का एक बड़ा प्लस खोजा गया है - इसके पैकेज वेबपेक के विपरीत पठनीय हैं।

Bootsrap 4 में Babel 6 और BsMultiSelect Babel 7 प्लगइन का उपयोग किया गया है

BsMultiSelect आसानी से अपडेट किए गए रोलअप-बैबल-प्लगइन (बीटा में भी) का उपयोग करके बैबेल 7 बीटा में चला गया। नए @babel/preset-env बैबेल @babel/preset-env (ट्रांसपिलर का कॉन्फ़िगरेशन जिस पर कोड चलेगा ") के कारण यह अब बैबेल 7 में जाने लायक है । अकेले इंटरनेट का उपयोग करना, यह समझना काफी मुश्किल हो गया कि ईएस 6 प्रीसेट कैसे काम करता है, वे एक लंबे विकास के माध्यम से चले गए और बहुत सारे पुराने विन्यास जमा हो गए हैं। बाबेल 7 + @babel/preset-env बाबेल @babel/preset-env तुरंत दांव लगाने के लिए बेहतर है

फिर भी, बैबेल की बीटा त्रुटियों को लंबे समय तक इंतजार नहीं करना पड़ा: [... नोडलिस्ट] को नोडलिस्ट.कॉनकैट () में तान दिया गया था। मुझे लंबे समय तक समझ में नहीं आया, कोड को जक्विरी कॉल में अनुवाद करना (यह अभी भी आवश्यक है, लेकिन उस पर बाद में) ने समस्या को हल किया। पूछें: "तब सभी बबेल पर क्यों आप उसके साथ सौदा नहीं करते हैं?", जवाब: "आयात और भेड़ का बच्चा।"

व्यावहारिक पहलू

बूटस्ट्रैप 4 और इसके प्लगइन (किसी भी js कोड की तरह) में ब्राउज़र को डाउनलोड करने के लिए दो विकल्प हैं: स्क्रिप्ट / शैली ("पेज" बनाएं) के माध्यम से , और असेंबली नोड / वेबपैक के माध्यम से ("एप्लिकेशन बनाएं", इसलिए मैं इन दोनों को जारी रखूंगा सिद्धांत रूप में, बहुत अलग स्थितियों और निरूपित: "पृष्ठ" और "आवेदन")।
पृष्ठ के लिए और आवेदन के लिए, एक ही बूटस्ट्रैप "वितरण फ़ाइल" का उपयोग किया जाएगा। यह एक स्पष्ट और एकमात्र समाधान नहीं है (उदाहरण के लिए, jspm और mocha परीक्षणों के लिए अलग-अलग कोड का उपयोग किया जाता है), लेकिन अपना खुद का प्लगइन बनाते समय, इस सम्मेलन का पालन करने के अलावा कुछ नहीं बचा है, इसकी इष्टतमता की उम्मीद है।

दो अलग-अलग डाउनलोड विकल्पों के लिए एक ही कोड का उपयोग करके दो जरूरतों को पूरा करने के बीच संतुलन खोजना: "पेज" और "एप्लिकेशन" प्लग-इन डेवलपर का सामना करना पड़ रहा मुख्य वास्तुशिल्प कार्य है।

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

SASS बूटस्ट्रैप 4 स्टाइल वेरिएबल्स तक पहुंच

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

एक स्व-प्रकाशित प्लगइन के लिए, SASS चरों की पहुँच नहीं है।

मौजूदा सीएसएस कक्षाएं / चयनकर्ता - BsMutliSelect के लिए सभी आवश्यक शैलियों को कवर नहीं करते हैं, उदाहरण के लिए, आपको ul.form-control लिए min-height आवश्यकता होती है, जब bootstrap.css में input.form-control लिए ऊंचाई के साथ केवल एक css चयनकर्ता होता है - आप इसे लागू नहीं कर सकते ul । अन्य मौजूदा वर्ग / चयनकर्ता बहुत अधिक शानदार शैली लाते हैं: क्या होगा यदि आप असाइन करना चाहते हैं, उदाहरण के लिए, एक वर्ग .form-control आवंटित किए बिना किसी तत्व के लिए रंग- .form-control ? यह काम नहीं करेगा क्योंकि वहाँ कोई ऐसा वर्ग नहीं है, जिसमें .input-color , जिसमें चर $ इनपुट-रंग को हर चीज़ से "अलग" प्रकाशित किया जाएगा।

इसके अलावा बूटस्ट्रैप टीम के निर्णयों का पालन करना संभव नहीं है: उनके पास ऐसी कोई समस्या नहीं है, अगर उन्हें जरूरत है - वे वांछित चर के साथ एक सीएसएस वर्ग / चयनकर्ता बनाएं और उस पर काम करें। यदि आप बहस करना चाहते हैं, तो आपको मार्क ओटो के साथ समझाना होगा, बीएस टीम में सीएसएस चयनकर्ताओं में कॉस्मेटिक परिवर्तनों के लिए भी असामान्य रूप से उच्च स्तर का निर्णय लिया जाता है, अगर अनुरोध "प्रस्ताव" श्रेणी में आते हैं।

मैं निम्नलिखित समाधान का प्रस्ताव करता हूं।

एक पृष्ठ के लिए (एक script माध्यम से प्लग-इन बढ़ाकर) आपको चर की दुर्गमता के साथ ऊपर रखना होगा। लेकिन सीएसएस से निपटने की पेशकश करना आवश्यक नहीं है - दुर्गम चर को जेएस मापदंडों के माध्यम से अनुकूलित करने की पेशकश की जा सकती है, क्योंकि उनमें से कई नहीं हैं (और उन सभी को किसी भी योजना द्वारा नहीं बदला गया है)। BsMultiSelect के लिए, समस्याग्रस्त थे: विकलांग रंग, इनपुट रंग, नियंत्रण छाया (आदि केवल 10 शैलियों, उनमें से ज्यादातर शायद ही कभी योजनाओं को बदलते हैं) ...

एक के लिए, यह उन सभी शैलियों की घोषणा है जिन पर प्लगइन निर्भर करता है ...

 $("select[multiple='multiple']").bsMultiSelect({ selectedPanelDefMinHeight: 'calc(2.25rem + 2px)', // default size selectedPanelLgMinHeight: 'calc(2.875rem + 2px)', // LG size selectedPanelSmMinHeight: 'calc(1.8125rem + 2px)', // SM size selectedPanelDisabledBackgroundColor: '#e9ecef', // disabled background selectedPanelFocusBorderColor: '#80bdff', // focus border selectedPanelFocusBoxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)', // foxus shadow selectedPanelFocusValidBoxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)', // valid foxus shadow selectedPanelFocusInvalidBoxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)', // invalid foxus shadow inputColor: '#495057', // color of keyboard entered text selectedItemContentDisabledOpacity: '.65' // btn disabled opacity used });

लेकिन एसएएसएस और कलेक्टर का उपयोग करते हुए एक आवेदन के लिए, आप अपने आप को BsMultiSelect.scss कॉपी करने की पेशकश कर सकते हैं, और अपने _variables.scss के लिए पथ को सही कर सकते हैं। इस प्रकार, चर चर को "प्राप्त" करेगा।

CSS के माध्यम से सभी ...

  $("select[multiple='multiple']").bsMultiSelect({ useCss: true });

इन दो विधियों को स्पष्ट रूप से मेरे जेएस कोड में दो "एडेप्टर" के माध्यम से लिखा गया है। BsMultiSelect वास्तव में एक में दो प्लगइन्स है। एक जो जेएस वेरिएबल्स के माध्यम से शैलियों के साथ काम करता है, दूसरा इस सीएसएस काम को दर्शाता है।

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

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

जेएस के माध्यम से योजना के लिए अनुकूलन

 $("select[multiple='multiple']").bsMultiSelect({ selectedPanelFocusBoxShadow:"0px 0px 0px 0.2rem rgba(51,51,51,0.25)", selectedPanelFocusBorderColor:"#333", selectedPanelDisabledBackgroundColor: "#f7f7f9" });

यह वह अधिकतम है जो "मानक" सीएसएस कक्षाओं का उपयोग करके प्राप्त किया जा सकता है। .bage , .form-control , .form-control , आदि। लगभग सब कुछ योजना के अनुकूल है, लेकिन सब कुछ नहीं।

यह अफ़सोस की बात है, कि आप इन तीन मापदंडों से दूर नहीं हो सकते हैं, सभी स्कीमा शैली चर सीएसएस चयनकर्ताओं / वर्गों के माध्यम से सुलभ नहीं हैं (मैं झूठ बोल रहा हूं, आप छोड़ सकते हैं यदि आप BsMultiSlect.scss अपने आप को कॉपी कर सकते हैं और सर्किट चर ला सकते हैं, लेकिन यह पूरी तरह से संतुष्ट नहीं करता है , जैसे सभी निर्णय जो "अपने आप को कॉपी करें" शब्दों से शुरू होते हैं)।

यहां क्लिक करें: https://dashboardcode.imtqy.com/BsMultiSelect/indexsketchy.html

Polyfill'y

परिदृश्य में "मैं आवेदन के अंदर एक तदर्थ प्लगइन लिख रहा हूं" - आप बिना किसी समस्या के @babel/polyfill उपयोग करेंगे, और पॉलीफ़िल.आईओ डोम को पैच करें क्योंकि आपके आवेदन के अंदर यह पहले से ही है।

जब एक प्लगइन को एक बाहरी एनपीएम मॉड्यूल में ले जाया जाता है, तो सभी खुशी गायब हो जाती है क्योंकि बूटस्ट्रैप उपयोगकर्ताओं ने प्रलेखन में आवश्यक पॉलीफिल की लंबी सूची को खुश करने का फैसला नहीं किया है।

समाधान: वह सभी बाबेल स्थानांतरण नहीं करेंगे, लेकिन पॉलीफ़ाइल्स को छोड़ देंगे, ऐसा करने से रोकेंगे, अपने दाँत पीसेंगे, jQuery कॉल में परिवर्तित करेंगे (उदाहरण के लिए, Node.closest $ में .closest)। इस दृष्टिकोण को बूटस्ट्रैप 4 में ही अपनाया गया है और जाहिर है यह सूजन के खिलाफ लड़ाई है। आश्चर्य। jQuery एक पॉलीफ़िल है।

मैं सहमत हूं कि CanIUse.com और MDN.com पर नजर रखने के साथ बैबल के साथ प्रोग्रामिंग मजेदार नहीं है। और कोड अजीब है (मेरे लिए)।

यहां स्थिति को फिर से ऊपर से उजागर करना आवश्यक है। बूटस्ट्रैप दो jQuery और popper.js पुस्तकालयों का उपयोग करता है। Popper.js एक दोहरा वैनिला ढांचा है, इसमें कोई भी बाबेल, jQuery या बाहरी पॉलीफ़िल नहीं है, सभी अपने आप से। JQuery को पहले से ही बाबेल का उपयोग करके ग्रंट द्वारा पैक किया गया है, लेकिन किसी तरह जादुई रूप से अपने पॉलीफिल और हेल्पर के बिना। एक तृतीय-पक्ष बूटस्ट्रैप प्लगइन (जैसे BsMultiSelct) Babel 7 का उपयोग करता है। आपका उत्पाद अभी भी कुछ और उपयोग कर सकता है। कोई एकल पॉलीफ़ाइल प्लेटफ़ॉर्म नहीं है, कई कोड दोहराव की उम्मीद है, ब्राउज़र में एक ही निकटतम लोड के चार कार्यान्वयन हैं। लेकिन इसके बारे में कुछ नहीं किया जा सकता है।

यदि आप अपना स्वयं का प्लगइन बनाते समय पॉलीफ़ाइल्स का उपयोग नहीं करते हैं, तो आपको यह याद रखना होगा कि यदि एप्लिकेशन में इनलाइन स्क्रिप्ट्स हैं (यानी <script>$( function() {/*..*/}) </script> ) तो आपको केवल पॉलीफ़ाइल्स को समकालिक रूप से डाउनलोड करना होगा (अन्यथा इनलाइन कोड निष्पादन से पहले ही शुरू हो सकता है जब प्लगइन लोड होता है)। यानी उदाहरण के लिए वेबपैक- पॉलीफिल -इंजेक्टर (मेरे लिए ज्ञात सबसे अमीर पॉलीफिल इंजेक्टर) मुझे इसे नियंत्रित करने की आवश्यकता है ताकि यह पॉलीफिल्स को अतुल्यकालिक (डिफ़ॉल्ट व्यवहार) लोड करने का निर्णय न ले।

कोई jQuery नहीं

jQuery को कुछ विषाक्त लगता है, जो बैबल / ES6 के साथ प्रतिस्पर्धा और अस्पष्ट है, लेकिन यह हमेशा के लिए नहीं है। शाखा v4-whithout-jquery है , यह पहले से ही पूल अनुरोध में है, यह bootstrap-nojquery सी संस्करण 4.3 जारी करने की योजना बना रहा है। पहले, घटनाओं के नाम स्थान को jquery को अस्वीकार करने की सबसे बड़ी समस्या कहा जाता था, हालांकि यह स्पष्ट है कि आप उनके बिना लिख सकते हैं (BsMultiSelect बिना किए)। स्पष्ट रूप से निर्णय लिया गया।

यह भी घोषणा की गई थी कि संस्करण 4.3 से ब्राउज़र में मूल घटकों को अलग से लोड करना संभव होगा (केवल "एप्लिकेशन" परिदृश्य के लिए)। क्या मूल घटक " BsMultiSelect " की तरह बन जाएंगे ? नहीं। यदि बीएस टीम को कुछ एसएएस चर की आवश्यकता होती है, तो वे अपने लिए सीएसएस कक्षाएं / चयनकर्ता बनाएंगे और जेएस ("कार्यात्मक सीएसएस") से उन पर काम करेंगे। कस्टम सुविधाएँ निर्माता उपलब्ध नहीं हैं।

5 वीं संस्करण में sass से पोस्ट-सीएसएस https://github.com/twbs/bootstrap/projects/11 पर संभावित संक्रमण मौलिक रूप से कुछ भी नहीं बदलता है। या सब कुछ बदल देता है: "HTML पर JS"।

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

परिणाम

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

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

बूटस्ट्रैप 4 के लिए कस्टम घटक बनाना