إضافه الرابط الافتراضي
يسمح بإنشاء مودلات افتراضية من اي نوع، على سبيل المثال: .ts, .json, .css ، الافتراضي هو js.
import webpack from "webpack";
new webpack.experiments.schemes.VirtualUrlPlugin({
myModule: 'export const msg = "من مودل افتراضي"',
});src/app.js
import { msg } from "virtual:myModule";
console.log(msg);مثال مبدئي
انشاء مودل افتراضي يقوم بإعطاء معلومات البناء (build)
import webpack from "webpack";
new webpack.experiments.schemes.VirtualUrlPlugin({
buildInfo: {
source() {
return `export const buildTime = ${Date.now()}`;
},
version: true,
},
});src/app.js
import { buildTime } from "virtual:buildInfo";
console.log(`App version: ${buildTime}`);استعمال مخطط خاص
import webpack from "webpack";
new webpack.experiments.schemes.VirtualUrlPlugin(
{
myModule: 'export const msg = "from virtual module"',
},
"v",
);src/app.js
import { msg } from "v:myModule";
console.log(msg);مثال متطور
انشاء عدة مودلات افتراضية بمختلف الانواع
import webpack from "webpack";
new webpack.experiments.schemes.VirtualUrlPlugin({
myCssModule: {
type: ".css",
source: "body{background-color: powderblue;}",
},
myJsonModule: {
type: ".json",
source: '{"name": "virtual-url-plugin"}',
},
});src/app.js
import json from "virtual:myJsonModule";
import "virtual:myCssModule";محاكاة ملف التوجيه (routing)
import path from "node:path";
import { fileURLToPath } from "node:url";
import webpack from "webpack";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const watchDir = path.join(__dirname, "./src/routes");
new webpack.experiments.schemes.VirtualUrlPlugin({
routes: {
source(loaderContext) {
// استعمل addContextDependency لمشاهدة الاضافات او الحذوفات من المحلدات الفرعية في watchDir لتحفيز إعادة بناء المودل الافتراضي
loaderContext.addContextDependency(watchDir);
const files = fs.readdirSync(watchDir);
return `
export const routes = {
${files.map((key) => `${key.split(".")[0]}: () => import('./src/routes/${key}')`).join(",\n")}
}
`;
},
},
});src/app.js
import { routes } from "virtual:routes";الخيارات
module.type(string): نوع محتوى المودل الافتراضي
ملاحظة> تأكد ان هذه الانواع لديها مُحمِل خاص بها عن طريق module.rules
-
module.source(string | ((loaderContext: import('webpack').LoaderContext<T>) => Promise<string> | string)): دالة المصنع لتوليد محتوى المودل الافتراضي -
module.version(boolean | string | () => string): عند حدوث عملية إبطال ، يتم استدعاء مصدر الدالة مرةً أخرى إذا كانت قيمة الاصدار مختلفة عن القيمه السابقه، تفعيلها سيؤدي الى تحفيزه دائماً -
schema(string): مودل افتراضي قابل للتخصيص ، الاعتيادي هوvirtual
« Previous
إضافة منع الاصدار عند وجود الاخطاءNext »
إضافه سياق الإستثناء


