Vue-FAQ
940 subscribers
579 photos
92 videos
564 links
Канал сайта https://vue-faq.org
Информация о Vue.js, фронтенд разработке и не только

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

#vite #i18n
🔥27
Неожиданно вышел Vite 6.0

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

#vite
🔥4🤔1
Тем временем вышли результаты State of JS 2024

Vite и Vue укрепили свои лидирующие позиции

Evan You - однозначно самый крутой известный человек на фронтенде последние годы.

#stats #evanyou #js #vite #vuejs
👍16🔥3🥱2
В 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
👍3
Переделал прошлый плагин, сделал его удобней и опиньонейтед - полностью под конкретный случай 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
👍8
Огромный список Vite плагинов

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

#vite
👍72
Чтобы заставить 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
🤯9
В мой vite-plugin-html-injection сделали первый PR

Приятно, чёрт возьми.

Теперь во фрагментах можно использовать Vite env переменные, типа %VITE_API_URL%, которые будут заменены на их значения.

#vite #plugin #lib
👍211
Rolldown-Vite готовится

Эван обещал в течение 2-3 месяцев

#rolldown #vite
🔥8
По результатам StateOfReact 2024 Vite обошел Webpack и в мире реактеров, в связи с чем их главари порекомендовали теперь использовать Vite

Читая победное напутствие Эвана новообращенным адептам, пришла мысль, что в js метафреймворки это не Nuxt / Next, а Vite / Webpack

Framework-as-Vite-plugin

#evanyou #react #vite #webpack
🔥3
Я ранее советовал переходить от .env к конфигурационным файлам в json формате

Но нужно понимать, что переменные из .env заменяются в коде на этапе компиляции, а из конфига подставляются в райнтайме

Это значит блок кода

if (import.meta.env.MODE === "development") {
// do some debug work
}


не попадет в бандл вообще в первом случае, а аналог с конфиг файлом - попадет, (но не будет выполняться, естественно).

Так что иногда имеет смысл использовать эту конструкцию (для import.meta.env.MODE переменной .env файл не нужен, она определена всегда).

#vite #tip
1
Хех... Эван прочел этот пост, но один "meta" все же лишний

Иначе Laravel - это мета-фреймворк над Symfony

#vite #evanyou
💊5💩2🍌2
В последних версиях Vite активно доделывают поддержку lightningcss

Сейчас для процессинга CSS используется ESBuild, но с переходом на Rolldown нужно что-то другое.
Экспериментально lightningcss был в Vite с 4 версии.

#vite #css
👍21
В GitLab-e уже тестируют rolldown-vite

Скорость сборки примерно в 5 раз быстрей, и значительно меньше потребление памяти

#gitlab #rolldown #vite
🤯11
Вышел Vite 7 beta.0, который готовят под Rolldown

Меж тем Vite с Rolldown можно уже использовать через опубликованный пару дней назад специальный форк Vite - rolldown-vite

Кто-то уже пробовал?

#vite #rolldown
👍53
Незаметно вышел Vite 7.0

Нового интересного мало. В основном убрали поддержку устаревшего.

А я поймал какой-то странный баг месяц назад и не могу от него избавиться.
При запуске dev сервера порт показывается 5173, но в браузере открывается 5176 и работает по 5176.
Пришлось менять в куче мест...

  VITE v7.0.0  ready in 336 ms

➜ Local: http://localhost:5173/
➜ Network: http://192.168.1.101:5173/
➜ press h + enter to show help


#vite
🤔41