Skip to content
На этой странице

Free Online Conference

ViteConf - Oct 11

Get your ticket now!

Миграция с v2

Поддержка Node.js

Vite больше не поддерживает Node.js 12/13/15, который достиг своего EOL. Теперь требуется Node.js 14.18+ / 16+.

Изменение базовой линии современного браузера

Рабочий комплект предполагает поддержку современного JavaScript. По умолчанию Vite нацелен на браузеры, которые поддерживают нативные модули ES, динамический импорт нативного ESM и import.meta:

  • Chrome >=87
  • Firefox >=78
  • Safari >=13
  • Edge >=88

Небольшой части пользователей теперь потребуется использовать @vitejs/plugin-legacy, который будет автоматически генерировать устаревшие фрагменты и соответствующие ES языковые функции полифиллы.

Изменения параметров конфигурации

Следующие параметры, которые уже устарели в v2, были удалены:

  • alias (переключиться на resolve.alias)
  • dedupe (переключиться на resolve.dedupe)
  • build.base (переключиться на base)
  • build.brotliSize (переключиться на build.reportCompressedSize)
  • build.cleanCssOptions (теперь Vite использует esbuild для минимизации CSS)
  • build.polyfillDynamicImport (используйте @vitejs/plugin-legacy для браузеров без поддержки динамического импорта)
  • optimizeDeps.keepNames (переключиться на optimizeDeps.esbuildOptions.keepNames)

Изменения архитектуры и устаревшие варианты

В этом разделе описываются самые большие изменения архитектуры в Vite v3. Чтобы проекты могли переходить с версии 2 в случае проблем с совместимостью, были добавлены устаревшие параметры для возврата к стратегиям Vite v2.

Изменения сервера разработки

Порт сервера разработки Vite по умолчанию теперь равен 5173. Вы можете использовать server.port, чтобы установить для него значение 3000.

Хост сервера разработки Vite по умолчанию теперь называется localhost. В Vite v2 Vite по умолчанию прослушивал 127.0.0.1. Node.js под v17 обычно разрешает localhost в 127.0.0.1, поэтому для этих версий хост не изменится. Для Node.js 17+ вы можете использовать server.host, чтобы установить для него значение 127.0.0.1, чтобы сохранить тот же хост, что и Vite v2.

Обратите внимание, что Vite v3 теперь печатает правильный хост. Это означает, что Vite может печатать 127.0.0.1 в качестве прослушивающего хоста, когда используется localhost. Вы можете установить dns.setDefaultResultOrder('verbatim'), чтобы предотвратить это. Подробнее смотрите server.host для получения подробной информации.

Изменения SSR

Vite v3 по умолчанию использует ESM для сборки SSR. При использовании ESM эвристика экстернализации SSR больше не требуется. По умолчанию все зависимости являются внешними. Вы можете использовать ssr.noExternal, чтобы контролировать, какие зависимости включать в пакет SSR.

Если использование ESM для SSR в вашем проекте невозможно, вы можете установить legacy.buildSsrCjsExternalHeuristics для создания пакета CJS с использованием той же стратегии экстернализации Vite v2.

Также build.rollupOptions.output.inlineDynamicImports теперь по умолчанию имеет значение false, когда ssr.target имеет значение 'node'. inlineDynamicImports изменяет порядок выполнения, и объединение в один файл не требуется для сборки узлов.

Общие изменения

  • Расширения файлов JS в режимах SSR и lib теперь используют допустимое расширение (js, mjs или cjs) для выходных записей и фрагментов JS в зависимости от их формата и типа пакета.
  • Terser теперь необязательная зависимость. Если вы используете build.minify: 'terser', вам необходимо установить его.
    shell
    npm add -D terser
    

import.meta.glob

  • Необработанный import.meta.glob переключен с { assert: { type: 'raw' }} на { as: 'raw' }

  • Ключи import.meta.glob теперь относятся к текущему модулю.

    diff
    // file: /foo/index.js
    const modules = import.meta.glob('../foo/*.js')
    
    // transformed:
    const modules = {
    -  '../foo/bar.js': () => {}
    +  './bar.js': () => {}
    }
    
  • При использовании псевдонима с import.meta.glob ключи всегда абсолютны.

  • import.meta.globEager больше не рекомендуется. Вместо этого используйте import.meta.glob('*', { eager: true }).

Поддержка веб-сборки

Синтаксис import init from 'example.wasm' удален, чтобы предотвратить будущие конфликты с "ESM integration for Wasm". Вы можете использовать ?init, который аналогичен предыдущему поведению.

diff
-import init from 'example.wasm'
+import init from 'example.wasm?init'

-init().then((exports) => {
+init().then(({ exports }) => {
  exports.test()
})

Автоматическая генерация https-сертификата

Действительный сертификат необходим при использовании https. В Vite v2, если сертификат не был настроен, автоматически создавался и кэшировался самозаверяющий сертификат. Начиная с Vite v3, мы рекомендуем создавать сертификаты вручную. Если вы все еще хотите использовать автоматическую генерацию из v2, эту функцию можно снова включить, добавив @vitejs/plugin-basic-ssl в плагины проекта.

js
import basicSsl from '@vitejs/plugin-basic-ssl'

export default {
  plugins: [basicSsl()]
}

Экспериментальный

Использование оптимизации esbuild deps во время сборки

В v3 Vite позволяет использовать esbuild для оптимизации зависимостей во время сборки. Если он включен, он устраняет одно из наиболее значительных различий между dev и prod, присутствующее во 2 версии. @rollup/plugin-commonjs в этом случае больше не нужен, поскольку esbuild преобразует зависимости только для CJS в ESM.

Если вы хотите попробовать эту стратегию сборки, вы можете использовать optimizeDeps.disabled: false (по умолчанию в 3 версии disabled: 'build'). @rollup/plugin-commonjs можно удалить, передав build.commonjsOptions: { include: [] }

Продвинутый

Есть некоторые изменения, которые касаются только создателей плагинов/инструментов.

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

Миграция с v1

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

Выпущено под лицензией MIT. (dev)