Выступление Evan You на ViteConf 2024
(с субтитрами на русском)

О бандлерах, Vite, Rolldown, Oxc, немного Voidzero и сопутствующих вещах

Неплохое обучающее видео по теме

#evanyou #vite #conf #video

john Resig - создатель JQuery

Комментировал события на ViteConf

#jquery #vite

Vite позволяет использовать новый более производительный и функциональный компилятор SASS через эту опцию:

export default {
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler'
      }
    }
  }
}

Дефолтным его не делали пока потому, что это breaking change, но в Vite 6 он будет по умолчанию.

В любом случае, чистый CSS3 со своим современным функционалом уже вполне покрывает все основные потребности стилизации.
Рекомендуется к использованию.

#vite #css #optimization

Автор русского перевода документации VitePress перевел и Vite документацию и просит сделать ревью его PR , чтобы его пропустили.

#vite #i18n

Неожиданно вышел Vite 6.0

Больших и даже просто значимых изменений практически нет. Предполагается, что это последний мажорный стабильный релиз перед заносом в Vite Rolldown-a и прочей Voidzero-шной машинерии.

#vite

В Vite нашли и пофиксили уязвимость - чужой сайт мог обратиться на ваш dev сервер и утащить всю кодовую базу.

Attack scenario:

- The attacker serves a malicious web page (http://malicious.example.com).
- The user accesses the malicious web page.
- The attacker sends a fetch('http://127.0.0.1:5173/main.js') request by JS in that malicious web page. This request is normally blocked by same-origin policy, but that's not the case for the reasons above.
- The attacker gets the content of http://127.0.0.1:5173/main.js.

Обновление вышло сразу для трех последних мажорных версий как patch, но для некоторых может оказаться breaking change. Подробней - в релизе.

#vite #bug

Переделал прошлый плагин, сделал его удобней и опиньонейтед - полностью под конкретный случай i18n

vite-plugin-i18n-json-md - берет JSON* файлы из директории локали, конвертирует markdown, если он там есть, объединяет всё в один и выводит в стандартный для i18n json, либо же в json5 или js формате. По желанию - минификация.

В конфиге указывается входная директория, выходная и локали.

import { i18nJsonMdPlugin } from "vite-plugin-i18n-json-md";

export default defineConfig({

  plugins: [
    vue(),
    i18nJsonMdPlugin({
      sourceDir: "src/app/locales",
      outputDir: "src/assets/i18n",
      locales: ["en", "ru", "gr"],
      mode: "dev",
      outputFormat: "json",
    }),
  ],

Переводы удобно держать в небольших файлах и переводить через AI - как целиком, так и автокомплитом. Добавил ключ с переводом в один файл, переходишь в аналогичный файл в другой локали - а он уже предлагает в нужном месте с нужным переводом вставить строку. Молодец.

#vite #i18n #lib

Огромный список Vite плагинов

Vite плагин может быть просто удобной утилитой, которая делает что-то полезное во время сборки. Легко пишется самому, и необязательно его публиковать через NPM, чтобы использовать в своем проекте. Может быть просто частью проекта.

#vite

Чтобы заставить Vite HMR перегружаться при изменении конкретных файлов, иногда может понадобиться такой плагин:

// vite.config.ts

const fullReloadJson5 = {
  name: "full-reload-json5",
  handleHotUpdate({ file, server }) {
    if (file.endsWith(".json5")) {
      server.ws.send({ type: "full-reload" });
    }
    return [];
  },
};

// ...
plugins: [
    vue(),
    json5Plugin(),
    fullReloadJson5,
  ],

#vite #tip