Различные файлы сборки

В каталоге dist/ пакета npm вы найдете множество различных сборок Vue I18n. Ниже приведен обзор того, какой файл сборки следует использовать в зависимости от сценария использования.

Из CDN или без сборщика

• vue-i18n(.runtime).global(.prod).js:
  • Для прямого использования через <script src="..."> в браузере. Экспортирует глобальную переменную VueI18n
  • Компиляция форматов сообщений в браузере:
    • vue-i18n.global.js - это "полная" сборка, которая включает как компилятор, так и среду выполнения, поэтому она поддерживает компиляцию форматов сообщений на лету
    • vue-i18n.runtime.global.js содержит только среду выполнения и требует предварительной компиляции форматов сообщений во время этапа сборки
  • Встраивает все внутренние пакеты ядра Vue I18n - то есть это один файл без зависимостей от других файлов. Это означает, что вы должны импортировать всё из этого файла и только из него, чтобы убедиться, что получаете один и тот же экземпляр кода
  • Содержит жестко заданные ветки prod/dev, а продакшн-сборка предварительно минимизирована. Используйте файлы *.prod.js для продакшна

ПРИМЕЧАНИЕ

Глобальные сборки не являются UMD сборками. Они собраны как IIFEs и предназначены только для прямого использования через <script src="...">.

• vue-i18n(.runtime).esm-browser(.prod).js:
  • Для использования через нативные импорты ES модулей (в браузере через <script type="module">)
  • Совместно использует ту же компиляцию времени выполнения, встраивание зависимостей и жестко заданное поведение prod/dev с глобальной сборкой

С использованием сборщика

• vue-i18n(.runtime).esm-bundler.js:
  • Для использования со сборщиками, такими как webpack, rollup и parcel
  • Оставляет ветки prod/dev с защитой process.env.NODE_ENV (должны быть заменены сборщиком)
  • Не поставляется в минифицированном виде (должен быть сделан вместе с остальным кодом после сборки)
  • Импортирует зависимости (например, @intlify/core-base, @intlify/message-compiler)
    • Импортируемые зависимости также являются esm-bundler сборками и будут в свою очередь импортировать свои зависимости (например, @intlify/message-compiler импортирует @intlify/shared)
    • Это означает, что вы можете установить/импортировать эти зависимости отдельно без получения разных экземпляров этих зависимостей, но вы должны убедиться, что они все разрешаются в одну и ту же версию
  • Компиляция локализованных сообщений в браузере:
    • vue-i18n.runtime.esm-bundler.js - только среда выполнения, и все локализованные сообщения должны быть предварительно скомпилированы. Это стандартный вход для сборщиков (через поле module в package.json), потому что при использовании сборщика шаблоны обычно предварительно компилируются (например, в файлах *.json)
    • vue-i18n.esm-bundler.js (по умолчанию): включает компилятор времени выполнения. Используйте это, если вы используете сборщик, но хотите компиляцию локализованных сообщений (например, шаблоны через строковые литералы JavaScript). Чтобы использовать эту сборку, измените ваш оператор импорта на: import { createI18n } from "vue-i18n/dist/vue-i18n.esm-bundler.js";

ПРИМЕЧАНИЕ

Если вы используете vue-i18n.runtime.esm-bundler.js, вам нужно будет предварительно скомпилировать все локализованные сообщения, и вы можете сделать это с помощью .json (.json5) или .yaml, пользовательских блоков i18n для управления ресурсами i18n. Поэтому вы можете предварительно скомпилировать все локализованные сообщения со сборщиком и следующим загрузчиком / плагином.

• @intlify/unplugin-vue-i18n

Для Node.js (серверная сторона)

• vue-i18n(.runtime).node.js:
  • Для использования ES модулей в Node.js
  • Для использования в Node.js через import
  • Файлы dev/prod предварительно собраны, но соответствующий файл автоматически требуется на основе process.env.NODE_ENV
  • Этот модуль является прокси-модулем vue-i18n(.runtime).js
    • vue-i18n.runtime.node.js: только среда выполнения.
    • vue-i18n.node.js: включает компилятор времени выполнения.