إضافه الرابط الافتراضي

يسمح بإنشاء مودلات افتراضية من اي نوع، على سبيل المثال: .ts, .json, .css ، الافتراضي هو js.

5.100.0+
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

Edit this page·

1 Contributor

MohaDev-69