Руководство по переходу с Webpack на Vite

В этой статье мы рассмотрим, как обновить интерфейсное веб-приложение с Webpack до Vite.

Vite — это новейший инструмент разработки внешнего интерфейса, популярность и распространение которого стремительно растет. Просто посмотрите эти загрузки из трендов npm на изображении ниже.

Эта тенденция обусловлена ​​ключевой концепцией, лежащей в основе Vite: опыт разработчиков. По сравнению с Webpack, Vite может предложить значительно более быстрое время сборки и время горячей перезагрузки во время разработки. Это достигается за счет использования современных функций браузера, таких как модули ES в браузере.

Прежде чем мы углубимся в процесс перехода с Webpack на Vite, стоит отметить, что среда разработки внешнего интерфейса постоянно развивается, и Vite — не единственный инструмент, находящийся в центре внимания. esbuild — еще один невероятно быстрый сборщик и минификатор JavaScript, привлекающий внимание веб-разработчиков. А если вы ищете подход, не требующий настройки, вы также можете изучить Parcel, который обеспечивает удобство работы для многих разработчиков.

Соображения перед переходом на Vite

Хотя Vite вводит в ваш рабочий процесс множество интересных новых функций, как и в любой новой технологии, здесь есть недостатки, которые следует учитывать. По сравнению с таким зрелым инструментом, как Webpack, основным фактором будет экосистема сторонних плагинов.

Существуют десятки основных/официальных плагинов Webpack и сотни (возможно, тысячи) плагинов, созданных сообществом на npm, которые были разработаны за десять лет использования Webpack. Хотя поддержка плагинов для Vite очень хороша, вы можете оказаться в ситуации, когда плагин, на который вы полагаетесь в своем проекте, не имеет эквивалента Vite, и это может стать препятствием для вашей миграции на Vite.

Шаг 1: Установка Vite

Первым шагом для миграции вашего проекта является создание нового приложения Vite и изучение инструмента, на который вы переходите. Вы можете создать шаблон нового приложения Vite, используя следующее:

npm create vite@latest

Затем запустите сервер разработки следующим образом:

npm run dev

Теперь перейдите к отображаемому URL-адресу локального хоста в вашем браузере.

Vite создаст каталог, содержащий файлы, изображенные ниже.

Многие из них будут вам знакомы и станут аналогичной заменой в вашем собственном приложении.

Шаг 2. Внесите изменения в package.json.

Чтобы начать использовать Vite в существующем проекте Webpack, перейдите к package.jsonпроекту Webpack, который вы хотите перенести, и установите Vite:

npm install –save vite

В зависимости от вашей внешней среды вы также можете установить плагин для конкретной платформы:

npm install –save @vitejs/plugin-react

Вы также можете обновить любые сценарии сборки, которые вам нужны, используя Vite вместо Webpack:

–  "build": "webpack --mode production",
–  "dev": "webpack serve",
++   "build": "vite build",
++  "dev": "vite serve",

В то же время удалите Webpack:

npm uninstall –save webpack webpack-cli wepack-dev-server

Теперь запустите сценарий разработки, чтобы опробовать его!

npm run dev

Шаг 3. Завершите работу с webpack.config и добавьте vite.config.

Если вам не очень повезет, вам, скорее всего, придется включить некоторую дополнительную конфигурацию. Vite использует vite.config.jsфайл для конфигурации, который во многом аналогичен существующему webpack.config.jsфайлу.

Вы можете найти полную документацию по этой конфигурации Vite на сайте vitejs.dev, но простая конфигурация Vite для приложения React может выглядеть так:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  },
})

Шаг 4: Плагины

Внутри Vite использует Rollup в качестве инструмента сборки, и вы можете добавить в Vite любые плагины Rollup, установив их с помощью npm:

npm install –save @rollup/plugin-image

Также добавьте их в pluginsмассив вашего vite.config.jsфайла:

// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
      image(),
  ],
})

Популярные плагины Webpack и их эквиваленты для Vite

Давайте теперь посмотрим на некоторые популярные плагины Webpack и их эквиваленты для Vite.

HtmlWebpackPlugin -> vite-plugin-html

HtmlWebpackPluginупрощает создание HTML-файлов для обслуживания ваших пакетов Webpack. Если вы используете HtmlWebpackPluginв своем проекте Vite, у него есть плагин vite-plugin-html, который предоставляет аналогичные возможности. Вы можете установить его так:

npm install --save-dev vite-plugin-html

И импортируйте в свой vite.config.jsвот так:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    react(),
    createHtmlPlugin({
      entry: 'src/main.js',
      template: 'public/index.html',
      inject: {
        data: {
          title: 'index',
          injectScript: `<script src="./inject.js"></script>`,
        },
    })
  ]
})

MiniCssExtractPlugin -> vite-plugin-purgecss

MiniCssExtractPlugin— это плагин для Webpack, который извлекает CSS в отдельные файлы. Он создает файл CSS для каждого файла JavaScript, содержащего CSS. Обычно он используется в производственных средах для более эффективной загрузки CSS. Выгода от этого двойная. Во-первых, это позволяет браузеру кэшировать CSS отдельно. Во-вторых, это предотвращает мигание нестилизованного контента, поскольку CSS больше не встроен в файлы JavaScript и, таким образом, может загружаться параллельно с JavaScript, что приводит к более быстрой загрузке страницы.

В Vite вы можете использовать vite-plugin-purgecss :

npm install --save-dev vite-plugin-html-purgecss

Используйте плагин в своем vite.config.jsфайле следующим образом:

import htmlPurge from 'vite-plugin-html-purgecss'

export default {
    plugins: [
        htmlPurge(),
    ]
}

CopyWebpackPlugin -> vite-plugin-static-copy

CopyWebpackPluginиспользуется для копирования отдельных файлов или целых каталогов в каталог сборки. У Vite есть аналогичный плагин под названием vite-plugin-static-copy :

npm install --save-dev vite-plugin-static-copy

Поместите следующий код в vite.config.js:

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default {
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'bin/example.wasm',
          dest: 'wasm-files'
        }
      ]
    })
  ]
}

DefinePlugin -> define()

В Webpack DefinePluginиспользуется для замены токенов в исходном коде присвоенными им значениями во время компиляции. Это позволяет создавать глобальные константы, которые можно настроить во время компиляции. В Vite вы можете добиться того же эффекта, используя defineопцию в vite.config.js, поэтому плагин вам может не понадобиться:

export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
})

Заключение

Это было простое руководство по переносу внешнего приложения Webpack на Vite, включая некоторые из самых популярных плагинов Webpack.

Если ваш проект большой и сложный со сложным процессом сборки, многофункциональная и гибкая конфигурация Webpack по-прежнему может быть вашим лучшим выбором.

Если вы переносите небольшой или умеренный проект, Vite предлагает некоторые убедительные преимущества. Его скорость, как с точки зрения запуска сервера, так и с точки зрения горячей замены модулей, может существенно повысить производительность разработки. Простота его конфигурации также может стать долгожданной передышкой, а его разработка с учетом собственных ES-модулей и совместимости с современными платформами отлично закладывает основу для будущего.

Переход с Webpack на Vite требует тщательного планирования и тестирования, особенно при рассмотрении вопроса о замене плагинов или рефакторинге. Но выгода от этого шага может быть существенной. Vite предлагает более быструю и экономичную среду разработки, которая в конечном итоге может привести к более плавному и эффективному рабочему процессу разработки.

Всегда полезно следить за развитием инструментов. Продолжая свое путешествие, рассмотрите возможность изучения других современных инструментов, таких как esbuild и Parcel, чтобы найти наиболее подходящий для нужд вашего проекта.

Помните: главное не инструмент, а то, как вы его используете для достижения своих целей. Webpack, Vite, esbuild и Parcel — отличные инструменты, предназначенные для создания первоклассных веб-проектов, и лучший из них зависит от ваших конкретных потребностей и ограничений.