Что такое Vite?
Vite — это «фронтенд-инструментарий нового поколения», как утверждают его создатели. Мгновенный сервер разработки, быстрая горячая перезагрузка модулей, легкая настройка, оптимизированные сборки — все это есть.
Но… в документации Vite не сказано, как перенести существующее приложение Webpack 🤷 Не волнуйтесь! В этом руководстве мы справимся с этим вместе!
Измените ваше репо на ES-модули
В вашем package.json добавьте следующую запись:
"type": "module",
Примите современность! Откажитесь от традиций! Вот почему мы все равно переходим на Vite!
Установите Vite и его плагины
npm i --save-dev vite @vitejs/plugin-react vite-plugin-html
или
yarn add vite @vitejs/plugin-react vite-plugin-html --dev
Замена скриптов
В вашем package.json, вероятно, есть скрипты, похожие на эти:
"build": "NODE_ENV=production webpack",
"dev": "NODE_ENV=development webpack serve",
Команда build, вызываемая командой npm run build или yarn build, собирает ваше приложение для производства. Команда dev запускает сервер разработки.
Эти скрипты необходимо заменить на:
"build": "vite build",
"dev": "vite serve",
Кроме того, вы можете добавить еще одну команду:
"preview": "vite preview"
Команда preview запустит сервер, на котором будет работать ваше приложение, созданное для производства.
Давайте запустим сервер разработки!
vite v2.9.1 dev server running at:
> Local: http://localhost:3000/
> Network: use --host to expose
ready in 261ms.
👁👄👁 Ого, как быстро.
Научите Vite, где находится корень
Если вы запустили сервер разработки сейчас, Vite будет искать index.html в корневом каталоге вашего проекта. Если он находится в другом месте, Vite не сможет его найти и отобразит вместо него пустую страницу.
Чтобы исправить это, вам нужно либо переместить index.html в корневой каталог, либо указать другой корневой каталог, в котором Vite будет искать index.html. В моем случае он находится по адресу src/index.html.
Вы можете сделать это, добавив путь к корневому каталогу в свои команды, например, так:
"build": "vite build src",
"dev": "vite serve src",
Однако вы также можете сделать это, создав файл vite.config.js в корне вашего проекта. Он все равно понадобится вам через некоторое время, так почему бы не создать его сейчас, чтобы хранить всю конфигурацию в одном месте?
import { defineConfig } from 'vite';
export default defineConfig({
root: 'src',
build: {
// Relative to the root
outDir: '../dist',
},
});
Настройка vite-plugin-html
Теперь, когда Vite знает, где найти ваш файл index.html, он попытается разобрать его.
Вы можете столкнуться с ошибкой, как я:
Как с ней справиться? Я использовал опцию HtmlWebpackPlugin templateParameters для динамического внедрения пользовательского заголовка и другой информации в файл index.html, как показано ниже:
<title><%= title %></title>
new HtmlWebpackPlugin({
template: 'index.html',
templateParameters: {
title: env === 'production' ? 'My site' : `My site [${env.toUpperCase()}]`,
},
}),
К счастью, мы можем сделать то же самое с vite-plugin-html. В вашем vite.config.js добавьте следующие биты:
import { createHtmlPlugin } from 'vite-plugin-html';
export default defineConfig({
// …
plugins: [
createHtmlPlugin({
inject: {
data: {
title: env === 'production' ? 'My site' : `My site [${env.toUpperCase()}]`,
},
},
}),
],
});
Добавьте модуль входа в ваш файл index.html.
На этом этапе ваш файл index.html должен обслуживаться просто отлично. Но приложение по-прежнему не загружается!
Если вы использовали Webpack, вы, вероятно, также использовали html-webpack-plugin для обработки инъекции тега <script> с вашим модулем(ями) входа в index.html.
Vite не будет вставлять эти теги автоматически. Вам нужно будет добавить их самостоятельно. Например:
<script type="module" src="./index.jsx"></script>
Аааа, так лучше. Что-то ожило.
Настройте @vitejs/plugin-react.
Хорошо, как вы видите, мы еще не дошли до конца. Нам нужно настроить @vitejs/plugin-react, чтобы заставить его работать с React.
Если вы все еще использовали классический JSX runtime, ваше приложение может уже загрузиться на этом этапе, но вы все равно захотите выполнить эти шаги. Этот плагин не только будет работать с автоматическим JSX runtime (тот самый, благодаря которому вам не нужно вручную импортировать React в каждый файл), но и добавит такие функции, как Fast Refresh, включит интеграцию Babel и многое, многое другое.
Добавьте его в ваш файл vite.config.js следующим образом:
import react from '@vitejs/plugin-react';
export default defineConfig({
// …
plugins: [
// …
react({
// Use React plugin in all *.jsx and *.tsx files
include: '**/*.{jsx,tsx}',
}),
],
});
Плагины Babel
Возможно, вам вообще не нужен Babel, поскольку @babel/preset-env и @babel/preset-react бесполезны.
Но иногда плагины Babel все же могут пригодиться. Например, есть плагин для удаления PropTypes, который можно использовать, чтобы сделать размер пакета немного меньше, и есть специальный плагин для styled-components, который облегчает разработку и тестирование, добавляя, среди прочего, отображаемые имена компонентов.
Здесь на помощь придет @vitejs/plugin-react с опцией babel. Например, чтобы добавить плагин babel-plugin-styled-components:
react({
// …
babel: {
plugins: ['babel-plugin-styled-components'],
},
},
Работа со статическими файлами
По умолчанию, файлы из каталога public, размещенные в вашем корневом каталоге, будут скопированы во время сборки. Если эти файлы находятся в другом месте, вы можете использовать опцию publicDir, как показано ниже:
export default defineConfig({
// …
publicDir: '../public',
});
Проблема с process.env.*
Я использовал process.env.NODE_ENV во многих местах моего приложения. В результате в консоль выводилась следующая ошибка:
Uncaught ReferenceError: process is not defined
В Vite вы можете использовать import.meta.env.* вместо этого. Например, process.env.NODE_ENV можно заменить на import.meta.env.NODE_ENV.
Наслаждайтесь!
Теперь вы должны увидеть ваше приложение, работающее на Vite!
Мы еще не закончили; нам все еще нужно подправить несколько вещей, прежде чем запускать его в производство. Для этого вам придется подождать второй части этого руководства. Подпишитесь, чтобы получать уведомления!
Очистка
Вы можете смело удалить эти зависимости, которые теперь не используются:
webpack-cliwebpack-dev-server@babel/preset-env@babel/preset-react@pmmmwh/react-refresh-webpack-pluginreact-refresh
webpack.config.js Конфигурационный файл Webpack также можно удалить.
babel.config.js, babel.config.json или .babelrc могут быть удалены, при условии, что вы не использовали их в качестве конфига Babel в конфигурации @vitejs/plugin-react.
Что-нибудь пропало?
Как вы думаете, есть ли что-то еще, на что нужно обратить внимание, что может быть распространенной проблемой при миграции с Webpack на Vite? Пожалуйста, дайте мне знать в комментариях!