Задать вопрос
@awenn2015
Веб-программист самоучка

Оптимален ли такой кастомный SSG на основе сборщика Vite?

Оптимизировано ли делать такие выкрутасы с vite конфигом в совокупе с любым шаблонизатором?, например грузить их в конфиге и вставлять в бандл при разработке/продакшене, баловался когда обучал знакомого как работать с шаблонизаторами/инструментами разработки и пока баловался пришел к такой штуке, а потом начал думать реальный ли это кейс или нет, по идее ничего такого, особенно когда собрал проект и отдал верстку условному заказчику с инструкцией что нужно делать если надумал поменять данные (как пере-собрать верстку если вкратце), а данные грузятся с какого нибудь другого готового rest-api

import { defineConfig } from 'vite';
import handlebars from 'vite-plugin-handlebars';
import path from 'path';
import vitePluginIndexDir from './vite-plugins/vite-plugin-index-dir.js';
import removeSrcDirFromHtmlPath from './vite-plugins/remove-src-dir-from-html-path.js';
import * as glob from 'glob';
import { ViteMinifyPlugin } from 'vite-plugin-minify';
import { global as globalData, paged as pageData } from './src/json/data.json';

async function loadTodos() {
  const resp = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=15')
  const todos = await resp.json()

  return { todos }
}

export default defineConfig({
  root: path.join(__dirname, 'src'),
  publicDir: path.join(__dirname, 'public'),
  resolve: {
    alias: { '/src': path.resolve(process.cwd(), 'src') },
  },
  plugins: [
    vitePluginIndexDir(),
    handlebars({
      partialDirectory: path.resolve(__dirname, 'src', 'templates'),
      context: async (pagePath) => {
        const ssgData = await (async () => {
          if (pagePath !== '/pages/index.html') return {}
          return await loadTodos()
        })();

        return Object.assign({}, globalData, pageData?.[pagePath] || {}, ssgData)
      },
    }),
    removeSrcDirFromHtmlPath(),
    ViteMinifyPlugin({}),
  ],
  build: {
    outDir: path.join(__dirname, 'dist'),
    emptyOutDir: true,
    manifest: true,
    rollupOptions: {
      input: glob.sync('./src/pages/**/*.html'),
      output: {
        dir: path.join(__dirname, 'dist'),
      },
    },
  },
})
  • Вопрос задан
  • 29 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы