Конфигурация

vite-plugin-svelte принимает встроенные опции, которые можно использовать для изменения его поведения. Объект может быть передан в качестве первого аргумента плагина svelte:

// vite.config.js
export default defineConfig({
  plugins: [
    svelte({
      /* plugin options */
    })
  ]
});

Рассмотрите различные опции ниже!

Файл конфигурации

Разрешение файла конфигурации

Кроме встроенных опций в конфигурации Vite, vite-plugin-svelte автоматически будет разрешать опции из файла конфигурации Svelte, если он существует. По умолчанию пути поиска следующие:

• svelte.config.js
• svelte.config.mjs
• svelte.config.cjs

Чтобы установить конкретный файл конфигурации, используйте встроенную опцию configFile. Путь может быть абсолютным или относительным к корневому каталогу Vite. Например:

// vite.config.js
export default defineConfig({
  plugins: [
    svelte({
      configFile: 'my-svelte.config.js'
    })
  ]
});

Базовый файл конфигурации Svelte выглядит так:

// svelte.config.js
export default {
  // svelte options
  extensions: ['.svelte'],
  compilerOptions: {},
  preprocess: [],
  onwarn: (warning, handler) => handler(warning),
  // plugin options
  vitePlugin: {
    exclude: [],
    // experimental options
    experimental: {}
  }
};

Расширение файла конфигурации

В зависимости от режима работы Node.js убедитесь, что вы используете правильное расширение и синтаксис, чтобы файл мог безопасно быть разрешён.- Если type: "module" указано в package.json, использование .js позволяет только ESМ коду. Используйте .cjs для разрешения CJS кода.

• Если type: "module" не указано, использование .js позволяет только CJS коду. Используйте .mjs для разрешения ESМ кода.> Пожалуйста, используйте расширение .js, когда это возможно.

Отключение автоматического обработки файла конфигурации Svelte

Используйте configFile: false, чтобы предотвратить vite-plugin-svelte от чтения файла конфигурации или перезапуска сервера разработки Vite при изменении этого файла.

// vite.config.js
export default defineConfig({
  plugins: [
    svelte({
      configFile: false,
      // ваша конфигурация svelte здесь
    }),
  ],
});

Предупреждение: Эта опция主要用于像SvelteKit这样的框架，这些框架执行自己的Svelte配置解析，并控制Vite开发服务器。 使用此选项时，请提供完整的内置配置。

Опции Svelte

Эти опции специфичны для компилятора Svelte и обычно распространены среди многих интеграций связывателей.

compilerOptions

• Тип: CompileOptions — см. svelte.compile

  Опции, передаваемые в компилятор Svelte. Некоторые опции установлены по умолчанию, включая dev и css. Однако некоторые опции недоступны для конфигурирования, такие как filename, format, generate и cssHash (в режиме разработки).

preprocess

• Тип: PreprocessorGroup | PreprocessorGroup[] — см. svelte.preprocess

  Массив препроцессоров для преобразования исходного кода Svelte до компиляции. Пример:

  // vite.config.js
  import sveltePreprocess from 'svelte-preprocess';
  
  export default defineConfig({
    plugins: [
      svelte({
        preprocess: [sveltePreprocess({ typescript: true })]
      })
    ]
  });

расширения

• Тип: string[]

• Значение по умолчанию: ['.svelte']

  Список расширений файлов, которые должны быть скомпилированы Svelte. Полезно для пользовательских расширений, таких как .svg и .svx.

onwarn

• Тип: (warning: Warning, defaultHandler: (warning: Warning) => void) => void — см. Warning

  Обрабатывает предупреждения, выдаваемые компилятором Svelte. Полезно для подавления сообщений предупреждений.

  Пример:

  export default defineConfig({
    plugins: [
      svelte({
        onwarn(warning, defaultHandler) {
          // не выводить предупреждения для элементов <marquee>, так как они классные
          if (warning.code === 'a11y-distracting-elements') return;
  
          // обрабатывать все остальные предупреждения нормально
          defaultHandler(warning);
        }
      })
    ]
  });

Кроме того, интерфейс компилятора Svelte версии 5 также предоставляет способ фильтрации предупреждений с помощью настройки warningFilter, как указано в документации Svelte 5.

Настройки плагина

Эти опции специфичны для самого плагина Vite.

include

• Тип: string | string[]

Шаблон picomatch, или массив шаблонов, который указывает файлы, на которых плагин будет работать. По умолчанию включаются все файлы Svelte.### исключение- Тип: строка | строка[]

Шаблон picomatch или массив шаблонов, который указывает файлы, игнорируемые плагином. По умолчанию никакие файлы не игнорируются.

emitCss

• Тип: логическое значение
• Значение по умолчанию: истина

Эмитирует стили Svelte в виде виртуальных CSS-файлов для обработки другими плагинами, такими как Vite.

hot

• Устарел: используйте compileOptions.hmr вместо этого
• Тип: логическое значение
• Значение по умолчанию: истина для режима разработки, всегда ложь для режима производства

игнорировать_предварительную_обработку

• Тип: логическое значение | строка[]
• Значение по умолчанию: ложь

Некоторые плагины Vite могут добавлять дополнительные предварительные обработчики, определяя api.sveltePreprocess. Если вы не хотите использовать эти обработчики, установите это значение в истина, чтобы игнорировать все, или используйте массив строк с названиями плагинов для конкретизации.

отключить_перезагрузку_зависимостей

• Тип: логическое значение | строка[]
• Значение по умолчанию: ложь

vite-plugin-svelte автоматически управляет предварительной сборкой зависимостей для компонентов Svelte. Чтобы отказаться от этой автоматической функции, можно использовать:- отключитьПерезагрузкуЗависимостей: истина для отключения всех перезагрузок,

• отключитьПерезагрузкуЗависимостей: ['foo'] для отключения перезагрузок только для зависимостей foo.

Если вы хотите вручную перезагрузить зависимость bar для foo, вы можете добавить {оптимизацияЗависимостей:{включить:['foo > bar']}} в конфигурацию Vite.

Это требование для гибридных пакетов, таких как Routify, которые экспортируют как код для Node.js, так и для браузера.

Предварительная сборка библиотек Svelte

• Тип: Логическое значение
• Значение по умолчанию: истина для режима разработки, ложь для сборки

Активация предварительной сборки зависимостей Vite для библиотек Svelte.

Эта опция улучшает время загрузки страницы для сервера разработки при использовании библиотек Svelte.

См. раздел Часто задаваемых вопросов для деталей и способов настройки для больших библиотек.

Инспектор

• Тип: InspectorOptions | Логическое значение

• Значение по умолчанию: не установлено для режима разработки, всегда ложь для сборкиУстановите в true или объект опций для активации инспектора Svelte во время разработки. Смотрите документацию инспектора для полной конфигурации. Режим инспектора показывает местоположение файла, где определён элемент под курсором, и вы можете нажать, чтобы быстро открыть свой кодовый редактор в этой локации.### dynamicCompileOptions

• Тип:

  type DynamicCompileOptions = (data: {
    filename: string; // Файл для компиляции
    code: string; // Предварительно обработанный код Svelte
    compileOptions: Partial<CompileOptions>; // Текущие параметры компилятора
  }) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;

  Функция для обновления параметров compilerOptions перед компиляцией. Чтобы изменить часть параметров компилятора, верните объект с необходимыми изменениями.

  Пример:

  // vite.config.js
  export default defineConfig({
    plugins: [
      svelte({
        dynamicCompileOptions({ filename, compileOptions }) {
          // Динамическое установление режима runic для каждого файла Svelte
          if (forceRunicMode(filename) && !compileOptions.runic) {
            return { runic: true };
          }
        }
      })
    ]
  });

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

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

Или в конфигурации Vite:

// vite.config.js
export default defineConfig({
  plugins: [
    svelte({
      experimental: {
        // Experimental parameters
      }
    })
  ]
});

или в конфигурации Svelte:

// svelte.config.js
export default {
  vitePlugin: {
    experimental: {
      // Experimental parameters
    }
  }
};

sendWarningsToBrowser

• Тип: boolean

• Значение по умолчанию: false

  Отправляет сообщение через WebSocket svelte:warnings со списком предупреждений, переданных в onwarn. Это полезно только при создании пользовательской браузерной интеграции, где вы хотите отображать эти предупреждения. Пример

  import.meta.hot.on('svelte:warnings', (message) => {
    // Обработка сообщений предупреждений, например вывод в консоль
    console.warn(`Предупреждения для ${message.filename}`, message.warnings);
  });

  Формат сообщения

  type SvelteWarningsMessage = {
    id: string;
    filename: string;
    normalizedFilename: string;
    timestamp: number;
    warnings: Warning[]; // отфильтрованные предупреждения, где onwarn не вызывал стандартный обработчик
    allWarnings: Warning[]; // включает предупреждения, отфильтрованные onwarn и наши дополнительные предупреждения плагина Vite для Svelte
    rawWarnings: Warning[]; // сырой выход компилятора
  };

Отключение Предупреждений Разрешения Svelte

• Тип boolean

• По умолчанию: false

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