VueJS सिंगल फाइल कंपोनेंट्स में बैकेंड

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


उस समय (एक साल पहले) का बैकअप php पर था। आरंभ करने के लिए, मैंने यह देखने का फैसला किया कि मेरे पसंदीदा PhpStorm संपादक ने इस ब्लॉक में php कोड कैसे डाला। कोई फर्क नहीं पड़ता कि मैंने कैसे प्रयास किया, किसी भी कोड को उजागर करने या अन्य स्वत: पूर्ण कार्यों की कोई बात नहीं हुई। मुझे लगता है कि मैं JetBrains के लिए तकनीकी सहायता में एक प्रश्न लिखूंगा। थोड़ी देर बाद, मुझे इसे कॉन्फ़िगर करने की किसी भी संभावना के बारे में नकारात्मक उत्तर मिला, लेकिन उन्होंने इसे जावास्क्रिप्ट के लिए कॉन्फ़िगर करने के तरीके के बारे में निर्देश भेजे। ठीक है, मुझे लगता है कि ठीक है, आपको अभी भी विचार को लागू करने की कोशिश करने की आवश्यकता है। मैंने पहले कभी भी वेबपैक के लिए कुछ भी विकसित नहीं किया है। मैंने दिन के लिए दस्तावेज का अध्ययन किया, और अगले दो शाम को मैंने लोडर और प्लगइन विकसित किया। यह सब काम किया है, लेकिन प्राथमिक। सिवाय ब्लॉक में प्राथमिक सिंटैक्स हाइलाइट किए बिना, php कोड केवल दर्द लाया ...


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


मैं खाके से शुरू करता हूँ


बैकएंड टेम्पलेट


टेम्प्लेट एक रिक्त स्थान है जिसमें vue फ़ाइलों के कस्टम ब्लॉकों से बैकएंड के टुकड़े गिरना चाहिए। यह सब प्रसंस्करण के बाद परिणामी फ़ाइल में संग्रहीत किया जाता है। खाका उदाहरण:


बैकएंड टेम्पलेट
const WEB_PORT = 314; const Koa = require('koa'); var Router = require('koa-router'); const app = new Koa(); var router = new Router(); app .use(router.routes()) .use(router.allowedMethods()); const body = require('koa-json-body')({ limit: '10kb' }); app.listen(WEB_PORT); app.context.db = require('../lib/db.js'); /*{{endpoints}}*/ 

/*{{endpoints}}*/ - यह वह जगह है जहां कस्टम ब्लॉक से कोड डाला जाएगा


वेबपैक लोडर


बूटलोडर कोड
 var loaderUtils = require("loader-utils"); var path = require('path'); const id = 'gavrilow_backend_plugin'; exports.default = function (source) { this.cacheable(); //      // !!!   ,         this.async()(null, ''); //    .   . const _source = source.replace(/^\n/img, ''); //       Custom Block [blockType=backend] const file_path = this.resourcePath; // this._compiler -  ,     if (this._compiler[id] === undefined) this._compiler[id] = { change: true, arr: [] }; var fp_exists = false; //         Custom Blocks vue //   -   . for (let i = this._compiler[id].arr.length - 1; i >= 0; i--) { if (this._compiler[id].arr[i].file_path === file_path) { fp_exists = true; //  ,     . if (this._compiler[id].arr[i].data !== _source) { //             ,    this._compiler[id].arr[i].data = _source; this._compiler[id].change = true; } break; } } if (fp_exists) return; //         ,   //     ,   Custom Blocks      //    [ change = true ]     . this._compiler[id].change = true; this._compiler[id].arr.push({ file_path: file_path, data: _source }); }; 

* .Vue फ़ाइलों में कस्टम ब्लॉक होते हैं जो बूटलोडर में आते हैं। कस्टम ब्लॉक का नाम अपना खुद का सेट किया जा सकता है।


वेबपैक प्लगइन


प्लगइन कोड
 const fs = require('fs'); const util = require('util'); const readFile = util.promisify(fs.readFile); const writeFile = util.promisify(fs.writeFile); var footer_header_template; class gavrilow_backend_plugin { constructor(options) { this.options = options; this.logMess = ''; } endLog(){ this.logMess = '------ gavrilow-backend-plugin ------------------------------------------------------------------\n' +this.logMess; this.addLogMess('-------------------------------------------------------------------------------------------------'); console.log(this.logMess); this.logMess = ''; } addLogMess(mess){ this.logMess += mess+'\n'; } async prepareTemplate(){ try { if (footer_header_template === undefined) { let contents = await readFile(this.options.backend_template, "utf-8"); footer_header_template = contents.split(/^\/\*+?{{.*endpoints.*}}+?\*\/$/img); if (footer_header_template.length !== 2) { footer_header_template = undefined; this.addLogMess('     .'); this.endLog(); return false; } else return true; } else return true; } catch (err) { footer_header_template = undefined; throw err; } } apply(compiler) { compiler.hooks.emit.tapAsync( 'gavrilow_backend_plugin', (compilation, callback) => { callback(); if (this.options.backend_template === undefined || this.options.backend_template === '') { this.addLogMess('  /  -  ...'); this.endLog(); return; } if (this.options.backend_output === undefined || this.options.backend_output === '') { this.addLogMess('     js   ...'); this.endLog(); return; } if (!compiler.gavrilow_backend_plugin) { this.addLogMess('         [ <backend>...</backend> ].'); this.endLog(); return; } (async ()=>{ try { //   if (!await this.prepareTemplate()) return; //        -  if (!compiler.gavrilow_backend_plugin.change) return; //       //   compiler.gavrilow_backend_plugin.change = false; if (compiler.gavrilow_backend_plugin.arr.length === 0) { this.addLogMess(' -      [ <backend>...</backend> ]'); this.endLog(); return; } this.addLogMess(' beckend: "'+this.options.backend_output+'"\n...'); //     /*{{endpoints}}*/   var backend_js = footer_header_template[0]+"\n"; //     Custom Blocks for (let i = 0; i < compiler.gavrilow_backend_plugin.arr.length; i++) { backend_js +=compiler.gavrilow_backend_plugin.arr[i].data+"\n"; this.addLogMess('['+compiler.gavrilow_backend_plugin.arr[i].file_path+']'); } //     /*{{endpoints}}*/   backend_js += footer_header_template[1]; //    await writeFile(this.options.backend_output, backend_js); } catch (err) { throw err; } finally { this.endLog(); } })(); } ); } } gavrilow_backend_plugin.loader = require.resolve('./loader'); module.exports = gavrilow_backend_plugin; 

प्रोजेक्ट असेंबली के पूरा होने पर प्लगइन चालू हो जाता है। टेम्पलेट को 2 भागों में तोड़कर तैयार किया गया है: इससे पहले /*{{endpoints}}*/ और उसके बाद /*{{endpoints}}*/ यदि लोडर द्वारा सरणी बदलने के लिए झंडा सेट किया गया था, तो अंतिम स्क्रिप्ट सभी भागों से इकट्ठा की जाती है।




यह सब कैसे आजमाया जाए


परियोजना गितुब पर बाढ़ आ गई


सेटिंग्स का विवरण भी है।

Source: https://habr.com/ru/post/hi436592/


All Articles