Переход с версии v5

Environment API

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

Некоторые внутренние API были удалены из-за изменений в реализации Vite. Если вы полагались на один из них, пожалуйста, создайте запрос на функцию.

Vite Runtime API

Экспериментальный Runtime API Vite эволюционировал в Module Runner API, выпущенный в Vite 6 как часть нового экспериментального Environment API. Учитывая, что функция была экспериментальной, удаление предыдущего API, введенного в Vite 5.1, не является критическим изменением, но пользователям потребуется обновить свое использование на эквивалент Module Runner API в процессе перехода на Vite 6.

Основные изменения

Значение по умолчанию для resolve.conditions

Это изменение не затрагивает пользователей, которые не настраивали resolve.conditions / ssr.resolve.conditions / ssr.resolve.externalConditions.

В Vite 5 значение по умолчанию для resolve.conditions было [], и некоторые условия добавлялись внутренне. Значение по умолчанию для ssr.resolve.conditions было равно значению resolve.conditions.

С Vite 6 некоторые условия больше не добавляются внутренне и должны быть включены в значения конфигурации. Условия, которые больше не добавляются внутренне для

• resolve.conditions: ['module', 'browser', 'development|production']
• ssr.resolve.conditions: ['module', 'node', 'development|production']

Значения по умолчанию для этих опций обновлены до соответствующих значений, и ssr.resolve.conditions больше не использует resolve.conditions в качестве значения по умолчанию. Обратите внимание, что development|production — это специальная переменная, которая заменяется на production или development в зависимости от значения process.env.NODE_ENV. Эти значения по умолчанию экспортируются из vite как defaultClientConditions и defaultServerConditions.

Если вы указали пользовательское значение для resolve.conditions или ssr.resolve.conditions, вам необходимо обновить его, чтобы включить новые условия. Например, если вы ранее указывали ['custom'] для resolve.conditions, вам нужно указать ['custom', ...defaultClientConditions] вместо этого.

JSON stringify

В Vite 5, когда установлено json.stringify: true, json.namedExports был отключён.

С Vite 6, даже когда установлено json.stringify: true, json.namedExports не отключается, и значение учитывается. Если вы хотите достичь предыдущего поведения, вы можете установить json.namedExports: false.

Vite 6 также вводит новое значение по умолчанию для json.stringify, которое равно 'auto', что будет сериализовать только большие JSON-файлы. Чтобы отключить это поведение, установите json.stringify: false.

Расширенная поддержка ссылок на ресурсы в HTML-элементах

В Vite 5 только несколько поддерживаемых HTML-элементов могли ссылаться на ресурсы, которые будут обработаны и упакованы Vite, такие как <link href>, <img src> и т. д.

Vite 6 расширяет поддержку ещё большего количества HTML-элементов. Полный список можно найти в документации по HTML-функциям.

Чтобы отключить обработку HTML для определённых элементов, вы можете добавить атрибут vite-ignore к элементу.

postcss-load-config

postcss-load-config был обновлён до версии 6 с версии 4. Теперь для загрузки файлов конфигурации PostCSS на TypeScript требуется tsx или jiti вместо ts-node. Также теперь требуется yaml для загрузки файлов конфигурации PostCSS в формате YAML.

Sass теперь по умолчанию использует современный API

В Vite 5 по умолчанию использовался устаревший API для Sass. Vite 5.4 добавил поддержку современного API.

С Vite 6 по умолчанию используется современный API для Sass. Если вы всё ещё хотите использовать устаревший API, вы можете установить css.preprocessorOptions.sass.api: 'legacy' / css.preprocessorOptions.scss.api: 'legacy'. Но обратите внимание, что поддержка устаревшего API будет удалена в Vite 7.

Чтобы перейти на современный API, смотрите документацию по Sass.

Настройка имени выходного файла CSS в режиме библиотеки

В Vite 5 имя выходного файла CSS в режиме библиотеки всегда было style.css и не могло быть легко изменено через конфигурацию Vite.

С Vite 6 имя выходного файла по умолчанию теперь использует "name" из package.json, аналогично выходным файлам JS. Если build.lib.fileName установлено со строкой, это значение также будет использоваться для имени выходного файла CSS. Чтобы явно установить другое имя файла CSS, вы можете использовать новый build.lib.cssFileName для его настройки.

Чтобы перейти, если вы полагались на имя файла style.css, вам следует обновить ссылки на него на новое имя, основанное на вашем имени пакета. Например:

package.json

{
  "name": "my-lib",
  "exports": {
    "./style.css": "./dist/style.css"
    "./style.css": "./dist/my-lib.css"
  }
}

Если вы предпочитаете оставить style.css, как в Vite 5, вы можете установить build.lib.cssFileName: 'style' вместо этого.

Расширенные возможности

Существуют и другие критические изменения, которые затрагивают лишь немногих пользователей.

• [#17922] fix(css)!: remove default import in ssr dev

  • Поддержка импорта по умолчанию для CSS-файлов была устаревшей в Vite 4 и удалена в Vite 5, но она всё ещё непреднамеренно поддерживалась в режиме разработки SSR. Эта поддержка теперь удалена.

• [#15637] fix!: default build.cssMinify to 'esbuild' for SSR

  • build.cssMinify теперь включен по умолчанию даже для сборок SSR.

• [#18070] feat!: proxy bypass with WebSocket

  • server.proxy[path].bypass теперь вызывается для запросов обновления WebSocket, и в этом случае параметр res будет undefined.

• [#18209] refactor!: bump minimal terser version to 5.16.0

  • Минимально поддерживаемая версия terser для build.minify: 'terser' была повышена с 5.4.0 до 5.16.0.

• [#18231] chore(deps): update dependency @rollup/plugin-commonjs to v28

  • commonjsOptions.strictRequires теперь по умолчанию равен true (ранее был 'auto').
    • Это может привести к увеличению размера пакета, но обеспечит более детерминированные сборки.
    • Если вы указываете файл CommonJS в качестве точки входа, вам могут потребоваться дополнительные шаги. Читайте документацию плагина commonjs для получения дополнительной информации.

• [#18243] chore(deps)!: migrate fast-glob to tinyglobby

  • Диафазные фигурные скобки ({01..03} ⇒ ['01', '02', '03']) и инкрементные фигурные скобки ({2..8..2} ⇒ ['2', '4', '6', '8']) больше не поддерживаются в glob-выражениях.

• [#18395] feat(resolve)!: allow removing conditions

  • Этот PR не только вводит критическое изменение, упомянутое выше как «Значение по умолчанию для resolve.conditions», но также делает так, что resolve.mainFields не используется для неэкспортируемых зависимостей в SSR. Если вы использовали resolve.mainFields и хотите применить это к неэкспортируемым зависимостям в SSR, вы можете использовать ssr.resolve.mainFields.

• [#18493] refactor!: remove fs.cachedChecks option

  • Эта оптимизация по желанию была удалена из-за крайних случаев при записи файла в кэшированную папку и немедленном его импорте.

• [#18697] fix(deps)!: update dependency dotenv-expand to v12

  • Переменные, используемые в интерполяции, теперь должны быть объявлены до интерполяции. Для получения дополнительной информации смотрите журнал изменений dotenv-expand.

• [#16471] feat: v6 - Environment API

  • Обновления модуля, поддерживающего только SSR, больше не приводят к полной перезагрузке страницы в клиенте. Чтобы вернуться к предыдущему поведению, можно использовать пользовательский плагин Vite:

    Посмотреть пример

    import type { Plugin, EnvironmentModuleNode } from 'vite'
    function hmrReload(): Plugin {
      return {
        name: 'hmr-reload',
        enforce: 'post',
        hotUpdate: {
          order: 'post',
          handler({ modules, server, timestamp }) {
            if (this.environment.name !== 'ssr') return
            let hasSsrOnlyModules = false
            const invalidatedModules = new Set<EnvironmentModuleNode>()
            for (const mod of modules) {
              if (mod.id == null) continue
              const clientModule =
                server.environments.client.moduleGraph.getModuleById(mod.id)
              if (clientModule != null) continue
              this.environment.moduleGraph.invalidateModule(
                mod,
                invalidatedModules,
                timestamp,
                true,
              )
              hasSsrOnlyModules = true
            }
            if (hasSsrOnlyModules) {
              server.ws.send({ type: 'full-reload' })
              return []
            }
          },
        },
      }
    }

Переход с v4

Сначала ознакомьтесь с Руководством по переходу с v4 в документации Vite v5, чтобы увидеть необходимые изменения для переноса вашего приложения на Vite 5, а затем продолжите с изменениями на этой странице.