Une fois, en lisant la documentation de Vue Loader, je suis tombé sur une innovation intéressante dans la version 15. Nous parlons de blocs personnalisés qui peuvent être incorporés dans des composants à fichier unique de Vue. L'exemple montre comment vous pouvez accéder au contenu de ce bloc directement dans le composant. Au début, je ne semblais pas attacher beaucoup de valeur à cette opportunité, mais ensuite j'ai pensé, hmm ... et si je bourrais un back-end connecté là-bas avec cette partie de l'avant ... Et c'est parti ...
La sauvegarde à ce moment (il y a un an) était sur php . Pour commencer, j'ai décidé de voir comment mon éditeur PhpStorm préféré a géré l'insertion de code php dans ce bloc. Peu importe comment j'ai essayé, il n'a été question d'aucune mise en évidence de code ou d'autres fonctions de saisie semi-automatique. Je pense que je vais écrire une question dans le support technique pour JetBrains. Après un certain temps, j'ai reçu une réponse négative à propos de toute possibilité de configurer cela, mais ils ont envoyé des instructions sur la façon de le configurer pour javascript. Eh bien, je pense que d'accord, vous devez toujours essayer de mettre en œuvre l'idée. Je n'ai jamais eu à développer quoi que ce soit pour Webpack auparavant. J'ai étudié la documentation de la journée et au cours des deux soirées suivantes, j'ai développé Loader et le plugin. Tout cela a fonctionné, mais sans mise en évidence de la syntaxe élémentaire dans les blocs .vue personnalisés, le code php n'a fait que souffrir ...
Le temps a passé. Se familiarisant lentement avec nodejs et en suivant le journal des modifications des modifications dans les nouvelles versions, en trouvant des solutions utiles et prêtes à l'emploi pour moi-même, j'ai commencé à comprendre que lorsque je choisirais sur quoi écrire le support, j'utiliserais toujours le nœud. L'exécution de plusieurs copies d'applications sur le nœud et le déchargement de la charge sur ces copies à l'aide de ngnix ont donné de meilleurs résultats. Récemment, je suis revenu sur ce sujet et j'ai finalisé le chargeur et le plugin.
Je vais commencer par le modèle
Modèle de backend
Le modèle est un espace vide dans lequel doivent tomber les éléments d'arrière-plan des fichiers de blocs de vue personnalisés. Tout cela après le traitement est stocké dans le fichier résultant. Exemple de modèle:
Modèle de backendconst 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}}*/ - c'est l'endroit où le code des blocs personnalisés sera inséré
Chargeur Webpack
Code du chargeur de démarrage var loaderUtils = require("loader-utils"); var path = require('path'); const id = 'gavrilow_backend_plugin'; exports.default = function (source) { this.cacheable();
Les fichiers * .vue qui contiennent des blocs personnalisés entrent dans le chargeur de démarrage. Le nom de bloc personnalisé peut être défini par vous-même.
Plugin Webpack
Code du plugin 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 {
Le plugin est déclenché à la fin de l'assemblage du projet. Le modèle est préparé en le divisant en 2 parties: avant /*{{endpoints}}*/ et après /*{{endpoints}}*/ Si l'indicateur de modification du tableau par le chargeur a été défini, le script final est assemblé à partir de toutes les parties disponibles.
Comment tout essayer
Le projet a inondé Github .
Il y a aussi une description des paramètres.