वेबपैक का उपयोग करके एक बीईएम परियोजना का निर्माण

लेख वेबपैक बंडलर का उपयोग करके बीईएम परियोजनाओं की विधानसभा पर ध्यान केंद्रित करेगा। मैं अनावश्यक संस्थाओं के साथ पाठकों को लोड किए बिना कॉन्फ़िगरेशन का एक उदाहरण दिखाऊंगा।

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

सिद्धांत की बिट

यदि यह BEM के बारे में आपकी पहली बार सुनवाई है और इसे स्वयं जानना चाहते हैं, तो दस्तावेज़ीकरण रखें।

बीईएम एक पद्धति है जिसका उपयोग किसी भी पैमाने की परियोजनाओं को व्यवस्थित करने के लिए किया जाता है। यांडेक्स ने इसे विकसित किया और पहले इसका उपयोग केवल अपनी सेवाओं के काम में किया, लेकिन बाद में इसे सार्वजनिक डोमेन में प्रकाशित किया गया।

BEM का अर्थ "ब्लॉक, एलीमेंट, मोडिफायर" है।

ब्लॉक एक स्वायत्त वास्तुकला के साथ एक इकाई है जिसका पुन: उपयोग किया जा सकता है। एक ब्लॉक में अपने स्वयं के तत्व शामिल हो सकते हैं।

एक तत्व एक ब्लॉक का एक अभिन्न हिस्सा है। एक आइटम केवल मूल ब्लॉक के अंदर उपयोग किया जा सकता है।

एक संशोधक एक इकाई है जो किसी ब्लॉक के प्रदर्शन, स्थिति या व्यवहार को बदलता है।

ये घटक कार्यप्रणाली को रेखांकित करते हैं। वे सुंदरता और सुविधाजनक कोड अलगाव प्रदान करते हैं। उनके उपकरण के बारे में अधिक विवरण प्रलेखन में लिखे गए हैं।

BEM प्रलेखन बड़े पैमाने पर लिखा गया है। हालांकि, एक "लेकिन" है: सामग्री में प्रवेश करने के लिए एक उच्च सीमा। यदि प्रलेखन के एक पृष्ठ को पढ़कर लेआउट की मूल बातों का पता लगाया जा सकता है, तो परियोजना को इकट्ठा करने का मुद्दा अधिक जटिल है।

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

मुझे आपको याद दिलाने दें: यह आगे माना जाता है कि पाठकों के पास बेसिक वेबपैक कौशल है। यदि आपने पहले उसके साथ काम नहीं किया है, तो मेरा सुझाव है कि आप पहले इस उपकरण से परिचित हों ।

बीईएम प्रलेखन परियोजनाओं की विधानसभा के लिए सिफारिशें प्रदान करता है। केवल दो विकल्पों को उदाहरण के रूप में पेश किया जाता है: एएनबी और गल्प का उपयोग करके विधानसभा।

ईएनबी एक उपयोगिता है जो विशेष रूप से बीईएम परियोजनाओं के निर्माण के लिए डिज़ाइन की गई है। वह बॉक्स के बाहर BEM संस्थाओं के साथ काम करने में सक्षम है। लेकिन कोड पर एक नज़र डालें। पहली नज़र में, वह एक अप्रशिक्षित डेवलपर को पदावनत कर सकता है:

const techs = { // essential fileProvider: require('enb/techs/file-provider'), fileMerge: require('enb/techs/file-merge'), // optimization borschik: require('enb-borschik/techs/borschik'), // css postcss: require('enb-postcss/techs/enb-postcss'), postcssPlugins: [ require('postcss-import')(), require('postcss-each'), require('postcss-for'), require('postcss-simple-vars')(), require('postcss-calc')(), require('postcss-nested'), require('rebem-css'), require('postcss-url')({ url: 'rebase' }), require('autoprefixer')(), require('postcss-reporter')() ], // js browserJs: require('enb-js/techs/browser-js'), // bemtree // bemtree: require('enb-bemxjst/techs/bemtree'), // bemhtml bemhtml: require('enb-bemxjst/techs/bemhtml'), bemjsonToHtml: require('enb-bemxjst/techs/bemjson-to-html') }, enbBemTechs = require('enb-bem-techs'), levels = [ { path: 'node_modules/bem-core/common.blocks', check: false }, { path: 'node_modules/bem-core/desktop.blocks', check: false }, { path: 'node_modules/bem-components/common.blocks', check: false }, { path: 'node_modules/bem-components/desktop.blocks', check: false }, { path: 'node_modules/bem-components/design/common.blocks', check: false }, { path: 'node_modules/bem-components/design/desktop.blocks', check: false }, 'common.blocks', 'desktop.blocks' ]; module.exports = function(config) { const isProd = process.env.YENV === 'production'; config.nodes('*.bundles/*', function(nodeConfig) { nodeConfig.addTechs([ // essential [enbBemTechs.levels, { levels: levels }], [techs.fileProvider, { target: '?.bemjson.js' }], [enbBemTechs.bemjsonToBemdecl], [enbBemTechs.deps], [enbBemTechs.files], // css [techs.postcss, { target: '?.css', oneOfSourceSuffixes: ['post.css', 'css'], plugins: techs.postcssPlugins }], // bemtree // [techs.bemtree, { sourceSuffixes: ['bemtree', 'bemtree.js'] }], // bemhtml [techs.bemhtml, { sourceSuffixes: ['bemhtml', 'bemhtml.js'], forceBaseTemplates: true, engineOptions : { elemJsInstances : true } }], // html [techs.bemjsonToHtml], // client bemhtml [enbBemTechs.depsByTechToBemdecl, { target: '?.bemhtml.bemdecl.js', sourceTech: 'js', destTech: 'bemhtml' }], [enbBemTechs.deps, { target: '?.bemhtml.deps.js', bemdeclFile: '?.bemhtml.bemdecl.js' }], [enbBemTechs.files, { depsFile: '?.bemhtml.deps.js', filesTarget: '?.bemhtml.files', dirsTarget: '?.bemhtml.dirs' }], [techs.bemhtml, { target: '?.browser.bemhtml.js', filesTarget: '?.bemhtml.files', sourceSuffixes: ['bemhtml', 'bemhtml.js'], engineOptions : { elemJsInstances : true } }], // js [techs.browserJs, { includeYM: true }], [techs.fileMerge, { target: '?.js', sources: ['?.browser.js', '?.browser.bemhtml.js'] }], // borschik [techs.borschik, { source: '?.js', target: '?.min.js', minify: isProd }], [techs.borschik, { source: '?.css', target: '?.min.css', minify: isProd }] ]); nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']); }); }; 

ईएनबी कॉन्फिगर कोड स्पष्ट रूप से उन लोगों के लिए जटिल होगा जो सिर्फ बीईएम का उपयोग करना शुरू कर रहे हैं।

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

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

अभ्यास

इससे पहले, मैंने उल्लेख किया कि कोड पृथक्करण और विधानसभा संगठन ने परियोजना के साथ काम को सरल बनाया। नीचे दिए गए उदाहरण में, हम वेबपैक का उपयोग करके बीईएम और इसकी विधानसभा का उपयोग करके कोड पृथक्करण प्रदान करेंगे।

हम सरलतम विन्यास प्राप्त करना चाहते हैं, विधानसभा तर्क रैखिक और सहज होना चाहिए। चलो एक पृष्ठ को एक BEM ब्लॉक के साथ जोड़ते हैं, जिसमें दो प्रौद्योगिकियाँ होंगी: CSS और JS।

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

मुझे निम्नलिखित प्रोजेक्ट ट्री मिला है:

 ├── desktop #   "desktop" │ └── block #  "block" │ ├── block.css # CSS-  "block" │ └── block.js # JS-  "block" ├── dist # ,      ├── pages # ,       JS- │ ├── index.html # ,     │ └── index.js #      index.html └── webpack.config.js # - Webpack 

पहली पंक्ति "डेस्कटॉप" के ओवरराइड स्तर को संदर्भित करती है। बीईएम शब्दावली में, पुनर्वितरण स्तर ऐसी निर्देशिकाएं हैं जिनमें अपने स्वयं के ब्लॉक कार्यान्वयन होते हैं। जब एक परियोजना को इकट्ठा करते हैं, तो एक निश्चित क्रम में सभी पुनर्निर्धारण स्तरों से कार्यान्वयन अंतिम बंडल में आते हैं।

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

यहाँ वेबपैक विन्यास है:

 // webpack.config.js //    const path = require('path'); const opy = require('copy-webpack-plugin'); module.exports = { //  entry  output -       entry: path.resolve(__dirname, "pages", "index.js"), output: { filename: 'index.js', path: path.join(__dirname, 'dist') }, module: { rules: [ //    CSS- { test: /\.css$/, loader: 'style-loader!css-loader' } ] }, plugins: [ new opy([ //  HTML-      { from: path.join(__dirname, 'pages'), test: /\.html$/, to: path.join(__dirname, "dist") } ]) ] } 

यहां हम एक प्रविष्टि बिंदु के रूप में फ़ाइल / /pages/index.js निर्दिष्ट करते हैं, CSS शैलियों के लिए लोडर जोड़ते हैं, और /pages/index.html पर प्रतिलिपि /dist/index.html ।

 <html> <body> <div class="block">Hello, World!</div> <script src="index.js"></script> </body> </html> 

 .block { color: red; font-size: 24px; text-align: center; } 

 document.getElementsByClassName('block')[0].innerHTML += " [This text is added by block.js!]" 

उदाहरण एक ओवरराइड स्तर और एक ब्लॉक का उपयोग करता है। कार्य पृष्ठ को इकट्ठा करना है ताकि हमारे ब्लॉक की प्रौद्योगिकियां (सीएसएस, जेएस) इससे जुड़ी हों।

प्रौद्योगिकियों को जोड़ने के लिए, हमें require() :

 // index.js require('../desktop/block/block.js'); require('../desktop/block/block.css'); 

वेबपैक लॉन्च करें और देखें कि क्या होता है। ./dist फ़ोल्डर से index.html खोलें:

ब्लॉक शैलियों को लोड किया गया, जावास्क्रिप्ट सफलतापूर्वक काम किया। अब हम अपने प्रोजेक्ट के लिए "BEM" अक्षरों को जोड़ सकते हैं।

सबसे पहले, बड़ी परियोजनाओं के साथ काम करने के लिए बीईएम बनाया गया था। आइए कल्पना करें कि हमारे डिजाइनर ने कोशिश की और पृष्ठ पर अब एक ब्लॉक नहीं, बल्कि एक सौ है। पिछले परिदृश्य के बाद, हम मैन्युअल रूप से require() का उपयोग करके प्रत्येक ब्लॉक की प्रौद्योगिकियों को कनेक्ट करेंगे। यानी, index.js में कोड की कम से कम एक सौ अतिरिक्त लाइनें दिखाई देंगी।

कोड की अतिरिक्त लाइनें जिन्हें टाला जा सकता था, वे खराब हैं। अप्रयुक्त कोड और भी बदतर है। क्या होगा यदि हमारे पेज पर उपलब्ध ब्लॉक्स के केवल 10 या 20 या 53 होंगे? डेवलपर के पास अतिरिक्त काम होगा: उसे ठीक उसी पृष्ठ पर ध्यान केंद्रित करना होगा जो पृष्ठ पर उपयोग किया जाता है, साथ ही मैन्युअल रूप से कनेक्ट होता है और अंतिम बंडल में अनावश्यक कोड से बचने के लिए उन्हें डिस्कनेक्ट करता है।

सौभाग्य से, यह काम वेबपैक को सौंपा जा सकता है।

इस प्रक्रिया को स्वचालित करने के लिए कार्यों का इष्टतम एल्गोरिथ्म:

1. मौजूदा HTML-कोड से BEM नामकरण के अनुरूप कक्षाएं चुनें;
2. कक्षाओं के आधार पर, पृष्ठ पर उपयोग किए गए बीईएम संस्थाओं की सूची प्राप्त करें;
3. जांच लें कि क्या पुनर्निर्देशन के स्तर पर उपयोग किए गए ब्लॉक, तत्व और संशोधक की निर्देशिका हैं;
4. उचित require() अभिव्यक्तियों को जोड़कर इन संस्थाओं की तकनीक को परियोजना से जोड़ें।

शुरू करने के लिए, मैंने यह जांचने का फैसला किया कि क्या इस कार्य के लिए कोई तैयार बूटलोडर हैं या नहीं। मुझे एक मॉड्यूल नहीं मिला जो एक बोतल में सभी आवश्यक कार्यक्षमता प्रदान करेगा। लेकिन मैं bemdecl-to-fs-loader के पार आया, जो BEM घोषणाओं को require() भावों में परिवर्तित करता है। यह पुनर्परिभाषित स्तरों और प्रौद्योगिकियों पर आधारित है जो परियोजना फ़ाइल संरचना में उपलब्ध हैं।

BEM घोषणा - पृष्ठ पर उपयोग की गई BEM संस्थाओं की एक सूची। प्रलेखन में उनके बारे में और पढ़ें।

एक लिंक गायब है - HTML को BEM संस्थाओं की एक सरणी में परिवर्तित करना। यह कार्य html2bemjson मॉड्यूल द्वारा हल किया गया है।

bemjson - डेटा जो भविष्य के पृष्ठ की संरचना को दर्शाता है। आमतौर पर वे पृष्ठ बनाने के लिए bem-xjst टेम्पलेट इंजन द्वारा उपयोग किए जाते हैं। Bejjson का वाक्य-विन्यास घोषणाओं के वाक्य-विन्यास के समान है, लेकिन घोषणा में केवल उपयोग की गई संस्थाओं की एक सूची शामिल है, जबकि bemjson उनके आदेश को भी दर्शाता है।

bemjson एक घोषणा नहीं है, इसलिए हम सबसे पहले इसे bemdecl-to-fs-loader तक संचरण के लिए प्रारूप घोषित करने के लिए परिवर्तित करते हैं। इस कार्य के लिए, SDK: bemjson-to- मॉड्यूल से मॉड्यूल का उपयोग करें। चूंकि ये नियमित एनओडीजेएस मॉड्यूल हैं, न कि वेबपैक लोडर, आपको एक रैपर लोडर बनाना होगा। उसके बाद, हम उन्हें वेबपैक में बदलने के लिए उपयोग कर सकते हैं।

हमें निम्नलिखित बूटलोडर कोड मिलता है:

 let html2bemjson = require("html2bemjson"); let bemjson2decl = require("bemjson-to-decl"); module.exports = function( content ){ if (content == null && content == "") callback("html2bemdecl requires a valid HTML."); let callback = this.async(); let bemjson = html2bemjson.convert( content ); let decl = bemjson2decl.convert( bemjson ); console.log(decl); //     callback(null, decl); } 

बूटलोडर की स्थापना को सरल बनाने और भविष्य में समय बचाने के लिए, मैंने एनपीएम पर मॉड्यूल डाउनलोड किया।

आइए हमारे प्रोजेक्ट में बूटलोडर को स्थापित करें और वेबपैक कॉन्फ़िगरेशन में बदलाव करें:

 const webpack = require('webpack'); const path = require('path'); const opy = require('copy-webpack-plugin'); module.exports = { entry: path.resolve(__dirname, "pages", "index.js"), output: { filename: 'index.js', path: path.join(__dirname, 'dist') }, module: { rules: [ { test: /\.html$/, use: [ { //    bemdecl-to-fs-loader loader: 'bemdecl-to-fs-loader', //       options: { levels: ['desktop'], extensions: ['css', 'js'] } }, //      html2bemdecl-loader { loader: 'html2bemdecl-loader' } ] }, { test: /\.css$/, loader: 'style-loader!css-loader' } ] }, plugins: [ new opy([ { from: path.resolve(__dirname, 'pages'), test: /\.html$/, to: path.resolve(__dirname, "dist") } ]) ] } 

bemdecl-to-fs-loader बूटलोडर levels पैरामीटर निर्दिष्ट करता है कि कौन सा ओवरराइड उपयोग करने के लिए और किस क्रम में है। extensions फ़ाइल तकनीक एक्सटेंशन देते हैं जो हमारे प्रोजेक्ट में उपयोग किए जाते हैं।

परिणामस्वरूप, मैन्युअल रूप से तकनीकों को जोड़ने के बजाय, हम केवल एक HTML फ़ाइल शामिल करते हैं। सभी आवश्यक रूपांतरण स्वचालित रूप से किए जाएंगे।

आइए index.js की सामग्री को लाइन के साथ बदलें:

 require('./index.html'); 

अब Webpack चलाएं। कोडांतरण करते समय, लाइन प्रदर्शित होती है:

 [ BemEntityName { block: 'block' } ] 

इसका मतलब है कि घोषणा का गठन सफल रहा। हम सीधे वेबपैक के आउटपुट को देखते हैं:

  Entrypoint main = index.js [0] ./pages/index.js 24 bytes {0} [built] [1] ./pages/index.html 74 bytes {0} [built] [2] ./desktop/block/block.css 1.07 KiB {0} [built] [3] ./node_modules/css-loader/dist/cjs.js!./desktop/block/block.css 217 bytes {0} [built] [7] ./desktop/block/block.js 93 bytes {0} [built] + 3 hidden modules 

हमें पिछले एक के समान परिणाम मिला, इस अंतर के साथ कि सभी ब्लॉक प्रौद्योगिकियां स्वचालित रूप से जुड़ी हुई थीं। अभी के लिए, हमारे लिए HTML में BEM- नाम वाली कक्षा जोड़ना, इस HTML को require() जोड़ना require() और कनेक्ट करने के लिए उपयुक्त निर्देशिका बनाना है।

तो, हमारे पास एक फ़ाइल संरचना है जो बीईएम पद्धति से मेल खाती है, साथ ही ब्लॉक प्रौद्योगिकियों को स्वचालित रूप से जोड़ने के लिए एक तंत्र है।

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

उपयोगी लिंक

• गिटहब परियोजना भंडार
• पूरा बीईएम गाइड
• बीईएम परियोजनाओं की विधानसभा के लिए सिफारिशें
• वेबपैक के साथ BEM प्रोजेक्ट बनाने का दूसरा तरीका