الخلفية في VueJS مكونات ملف واحد

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}}*/ 

 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 }); }; 

 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;