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

Чтобы представить это в контексте, в приведенном ниже примере показано, что содержимое журнала консоли будет варьироваться в зависимости от того, какой вывод вы просматривали, но исходный JavaScript (app.js) остается прежним.

app.js:

console.log(__("Hello World"));

en.json:

{
	"Hello World": "Hello World"
}

nl.json:

{
	"Hello World": "Hallo Wereld"
}

Результат en.output.js будет читать console.log("Hello World");, тогда какnl.output.js будет читать console.log("Hallo Wereld");. Дальнейшие примеры можно найти в их репозитории GitHub.

Однако при его использовании наша команда столкнулась с довольно серьезной проблемой. Плагин i18n не поддерживает строки и переменные шаблона. Вместо разрешения во время компиляции такие строки, как console.log(__(foo)), выдают ошибку __ is not defined. Это задокументировано на вкладке «Проблемы» на GitHub, но мы не осознавали этого, пока не стало слишком поздно. Эта проблема меня особенно расстраивала, и я взял на себя ее решение.

Затем последовали недели исследований (то и дело). Я придумал несколько разных решений, ни одно из которых не подошло бы для наших сценариев использования. В конце концов, я нашел то, что искал, спрятанный в сообщении StackOverflow, на которое наткнулся.

Решение, на котором мы остановились, использует Webpack PluginProvider. Это позволяет вам установить глобальную переменную, доступную в любом месте вашего связанного кода.

Теперь наша конфигурация Webpack выглядит примерно так:

plugins: [ 
  new I18nPlugin(utils.getVocabJson(language)), 
  new webpack.ProvidePlugin({ 
      __: path.resolve(__dirname, ‘bin/helpers/webpack-vocabs.js’),
  }), 
],

Это устанавливает подключаемый модуль i18n, а затем с помощью ProvidePlugin делает __ глобально доступной функцией. Если используется строка, это будет разрешено до времени компиляции, в противном случае __ останется в JS во время выполнения. Затем эту проблему можно решить с помощью объявленной выше функции, теперь доступной глобально.

Я хотел объявить функцию в providePlugin, но казалось, что она принимает только путь, поэтому я переместил простую функцию в отдельный файл. bin/helpers/webpack-vocab.js просто содержит функцию, которая выглядит примерно так:

function getVocabs(propName) { 
  return getConfig().vocab[propName];
}
module.exports = getVocabs;

Вуаля! Теперь мы можем использовать такой код, как

document.querySelector(`.${item}`).innerHTML = __(`${item}`_title);

без ужасного сообщения об ошибке __ is not defined. И пока что, похоже, все работает нормально.

Надеюсь, это поможет, если вы решите использовать плагин i18n для своих собственных проектов.