Um dia, ao ler a documentação do Vue Loader, me deparei com uma inovação interessante na versão 15. Estamos falando de blocos personalizados que podem ser incorporados nos componentes de arquivo único do Vue. O exemplo mostra como você pode acessar o conteúdo deste bloco diretamente no componente. No começo, eu não parecia dar muito valor a essa oportunidade, mas pensei: hmm ... e se eu enfiasse a parte de trás lá conectada com esse pedaço da frente ... E lá vamos nós ...
O backup naquela época (um ano atrás) estava em php . Para começar, decidi ver como meu editor PhpStorm favorito lidava com a inserção de código php nesse bloco. Não importa como eu tentei, não houve comentários sobre qualquer destaque de código ou outras funções de preenchimento automático. Acho que vou escrever uma pergunta no suporte técnico do JetBrains. Depois de um tempo, recebi uma resposta negativa sobre qualquer possibilidade de configurar isso, mas eles enviaram instruções sobre como configurá-lo para javascript. Bem, acho que tudo bem, você ainda precisa tentar implementar a ideia. Eu nunca tive que desenvolver nada para o Webpack antes. Estudei a documentação do dia e, nas duas noites seguintes, desenvolvi o Loader e o plugin. Tudo isso funcionou, mas sem destacar a sintaxe elementar em blocos .vue personalizados, o código php trouxe apenas dor ...
O tempo passou. Familiarizando-me lentamente com o nodejs e acompanhando o log de alterações de novas versões, encontrando soluções úteis e prontas para mim, comecei a entender que, ao escolher o que escrever no backup, ainda utilizarei o nó. Executar várias cópias de aplicativos no nó e descarregar a carga nessas cópias usando o ngnix deu melhores resultados. Recentemente, voltei a este tópico e finalizei o carregador e o plugin.
Vou começar com o modelo
Modelo de back-end
O modelo é um espaço em branco no qual as partes de back-end dos blocos personalizados dos arquivos vue devem cair. Tudo isso após o processamento é armazenado no arquivo resultante. Exemplo de modelo:
Modelo de back-endconst 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}}*/ - este é o local onde o código dos blocos personalizados será inserido
Carregador Webpack
Código do carregador de inicialização var loaderUtils = require("loader-utils"); var path = require('path'); const id = 'gavrilow_backend_plugin'; exports.default = function (source) { this.cacheable();
Os arquivos * .vue que contêm blocos personalizados entram no carregador de inicialização. O nome do bloco personalizado pode ser definido como seu.
Plug-in do Webpack
Código do 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 {
O plug-in é acionado após a conclusão da montagem do projeto. O modelo é preparado dividindo-o em 2 partes: antes /*{{endpoints}}*/ e depois /*{{endpoints}}*/ Se o sinalizador para alterar a matriz pelo carregador foi definido, o script final é montado a partir de todas as partes disponíveis.
Como tentar tudo
O projeto foi inundado no github .
Há também uma descrição das configurações.