Suatu hari, ketika membaca dokumentasi Vue Loader, saya menemukan inovasi yang menarik di versi 15. Kita berbicara tentang blok khusus yang dapat tertanam dalam komponen file tunggal Vue. Contoh menunjukkan bagaimana Anda dapat mengakses konten blok ini secara langsung di komponen. Pada awalnya, saya sepertinya tidak terlalu menghargai kesempatan ini, tetapi kemudian saya berpikir, hmm ... dan jika saya mengisi back-end yang terhubung dengan bagian depan ini ... Dan itu dimulai ...
Pencadangan pada waktu itu (setahun yang lalu) ada di php . Untuk memulai, saya memutuskan untuk melihat bagaimana editor PhpStorm favorit saya menangani memasukkan kode php ke dalam blok ini. Tidak peduli bagaimana saya mencoba, tidak ada pembicaraan tentang penyorotan kode atau fungsi pelengkapan otomatis lainnya. Saya pikir saya akan menulis masalah pada mereka yang mendukung JetBrains. Setelah beberapa saat, saya menerima jawaban negatif tentang kemungkinan untuk mengkonfigurasi ini, tetapi mereka mengirim instruksi tentang cara mengkonfigurasinya untuk javascript. Yah, saya pikir oke, Anda masih perlu mencoba menerapkan ide. Saya belum pernah mengembangkan apa pun untuk Webpack sebelumnya. Saya mempelajari dokumentasi untuk hari itu, dan selama dua malam berikutnya saya mengembangkan Loader dan plugin. Semua ini berhasil, tetapi tanpa penyorotan sintaks dasar dalam blok .vue kustom, kode php hanya membawa rasa sakit ...
Waktu berlalu. Perlahan berkenalan dengan nodejs dan mengikuti perubahan log perubahan dalam versi baru, menemukan solusi yang berguna dan siap pakai untuk diri saya sendiri, saya mulai memahami bahwa ketika memilih apa yang akan didukung, saya masih akan menggunakan node. Menjalankan banyak salinan aplikasi pada node dan membongkar muatan pada salinan ini menggunakan ngnix memberikan hasil yang lebih baik. Baru-baru ini saya kembali ke topik ini dan menyelesaikan loader dan plugin.
Saya akan mulai dengan template
Templat Backend
Templat ini kosong di mana bagian backend dari blok khusus file vue akan jatuh. Semua ini setelah diproses disimpan dalam file yang dihasilkan. Contoh template:
Templat 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}}*/ - ini adalah tempat kode dari blok khusus akan dimasukkan
Webpack loader
Kode bootloader var loaderUtils = require("loader-utils"); var path = require('path'); const id = 'gavrilow_backend_plugin'; exports.default = function (source) { this.cacheable();
File * .vue yang berisi blok-blok khusus masuk ke bootloader. Nama blok khusus dapat Anda atur sendiri.
Plugin webpack
Kode 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 {
Plugin dipicu setelah selesainya perakitan proyek. Template disiapkan dengan memecahnya menjadi 2 bagian: sebelum /*{{endpoints}}*/ dan setelah /*{{endpoints}}*/ Jika bendera untuk mengubah array oleh loader telah ditetapkan, skrip akhir dirakit dari semua bagian yang tersedia.
Cara mencoba semuanya
Proyek banjir di github .
Ada juga deskripsi pengaturan.