كود المصدر: https://github.com/mochamadboval/multipage-vite-vanilla-js

التكوين الرئيسي

إنشاء مشروع Vite Vanilla JavaScript.

npm create vite@latest multipage-vite-vanilla-js -- --template vanilla

cd multipage-vite-vanilla-js
npm i

تخصيص بنية مجلد المشروع على النحو التالي.

|- node_modules/
|- src/
   |- assets/
      |- img/
         |- javascript.svg
      |- js/
         |- counter.js
   |- public/
      |- vite.svg
   |- index.html
   |- main.js
   |- style.css
|- .gitignore
|- package-lock.json
|- package.json

نظرًا لأن ملف Index.html لم يعد موجودًا في مجلد المشروع الرئيسي، فلا يمكن تنفيذ npm run dev. ولذلك، قم بإنشاء ملف vite.config.js وقم بتعيين المسار root الجديد إلى المجلد src. ينطبق هذا فقط عند تنفيذ أوامر الإنشاء npm run dev وnpm run.

// vite.config.js

export default {
  root: "./src",
};

قم بإجراء بعض التعديلات كما يلي وقم بنقل طريقة استيراد CSS إلى HTML.

// ./src/main.js

import { setupCounter } from "./assets/js/counter";

import viteLogo from "/vite.svg";
import javascriptLogo from "./assets/img/javascript.svg";

document.querySelector("#app").innerHTML = `
  

    ...
    ...
    About |
    Article
  
`;

setupCounter(document.querySelector("#counter"));

الآن يمكننا تنفيذ أمر npm run dev. ومع ذلك، عند تشغيل npm run build، سيتم إنشاء المجلد dist في المجلد src. لنقله خارج هذا المجلد أضف التكوين التالي.

// vite.config.js

export default {
  root: "./src",
  build: {
    outDir: "../dist",
    emptyOutDir: true,
  },
};

لا يزال بإمكاننا استخدام أمر npm run Preview لتشغيل مجلد dist لأن الجذر: "./src" لا يؤثر عليه (لا يزال يشير إلى مجلد المشروع الرئيسي).

بعد ذلك، لنقم بإنشاء about.html في مجلد src وarticle.html في مجلد المدونة.

  
    
    
    
    
    
  
  
    

      
About page.
    
  

  
    
    
    
    
    
  
  
    

      
Article page.
    
  

ثم أضف التكوين التالي بحيث يتم إنشاء كلا الملفين أيضًا في مجلد dist.

// vite.config.js

export default {
  root: "./src",
  build: {
    outDir: "../dist",
    emptyOutDir: true,
    rollupOptions: {
      input: {
        index: "./src/index.html",
        about: "./src/about.html",
        article: "./src/blog/article.html",
      },
    },
  },
};

الآن أصبح المشروع متعدد الصفحات بنجاح.

ومع ذلك، ربما لاحظت أننا بحاجة إلى إضافة مسار جديد في الإدخال في كل مرة نقوم فيها بإنشاء ملف HTML جديد. إذا كنت تريد أن يعمل هذا ديناميكيًا، فلنثبت الحزمة الشاملة ونضيف التكوين التالي.

npm install -D glob

// vite.config.js

import { sync } from "glob";

export default {
  ...
  build: {
    ...
    rollupOptions: {
      input: sync("./src/**/*.html".replace(/\\/g, "/")),
    },
  },
};

الأشياء التي يمكن تحسينها وإضافتها:

صفحة "404 لم يتم العثور عليه".

عندما نكتب عنوان URL خاطئًا، فإن الصفحة المعروضة هي الصفحة الرئيسية. يمكننا أن نجعلها تظهر صفحة "لم يتم العثور عليها" الافتراضية.

// vite.config.js

export default {
  appType: "mpa",
  root: "./src",
  ...

إذا قمنا بنشر المشروع على Netlify، فيمكننا بسهولة إعادة توجيه صفحة "لم يتم العثور عليه" الافتراضية إلى صفحة 404 الخاصة بنا.

قم بإنشاء 404.html في مجلد src وملف _redirects (بدون ملحق) في المجلد العام.

  
    
    
    
    
    
  
  
    

      
Page not found.
    
  

_redirects

/* /404.html 200

تصغير HTML

يمكننا تصغير جميع ملفات HTML أثناء عملية الإنشاء باستخدام هذا المكون الإضافي (أخبرني إذا كان بإمكاني القيام بذلك بدون المكون الإضافي).

npm install -D vite-plugin-minify

// vite.config.js

...
import { ViteMinifyPlugin } from "vite-plugin-minify";

export default {
  plugins: [ViteMinifyPlugin()],
  appType: "mpa",
  ...

إنشاء أسماء مستعارة للمسار

// vite.config.js

...
import { resolve } from "path";

export default {
  resolve: {
    alias: {
      "@js": resolve(__dirname, "src/assets/js"),
    },
  },
  plugins: [ViteMinifyPlugin()],
  ...

// ./src/main.js

import { setupCounter } from "@js/counter";

import viteLogo from "/vite.svg";
...

لتمكين الاقتراح التلقائي في محرر النصوص (VS Code)، قم بإنشاء ملف jsconfig.json وأضف هذا التكوين.

// jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@js/*": ["./src/assets/js/*"]
    }
  }
}

قم بتثبيت TailwindCSS

يمكنك متابعة الوثائق الرسمية.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

// poscss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

/* ./src/style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

root: {
  ...

لفرز فئات TailwindCSS تلقائيًا عند استخدام Prettier، يمكنك اتباع هذه الوثائق.

npm install -D prettier prettier-plugin-tailwindcss

// .prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

أتمنى أن يفيدك :)

مصدر:

• https://vitejs.dev/guide/#scaffolding-your-first-vite-project
• https://vitejs.dev/guide/build.html#multi-page-app
• https://stackoverflow.com/a/66877705
• https://github.com/isaacs/node-glob
• https://www.npmjs.com/package/vite-plugin-minify