Интерфейсная интернационализация: автоматизированные инструменты управления

JavaScript
Интерфейсная интернационализация: автоматизированные инструменты управления

задний план

Некоторое время назад мне нужно было интернационализировать проект, который разрабатывался около двух лет, и поддерживать как китайский, так и английский языки, я посетил сообщество и не нашел колес, которые могли бы решить болевые точки, такие как:

  • Поддерживать файлы ресурсов слишком обременительно
  • Код слишком навязчив, не хочу двухлетний проект, изменение в файле

Поэтому я решил написать свой собственный инструмент:

  • Файлы ресурсов автоматически генерируются и обновляются
  • Код 0 вторгается, вам не нужно учитывать интернационализацию при написании кода

Как правило, пока инструмент введен, в более поздний период есть только одна стоимость обслуживания, и необходимо учитывать только файл ресурса перевода.

идеи

По существу, реализацияwebpack loader, который автоматически обрабатывает интернационализацию при упаковке:

  • Пройдите все коды, извлеките китайские строки в кодах и сгенерируйте файлы ресурсов (ключ файла ресурсов через соответствующий китайский язык).MD5зашифрованное поколение)
  • Повесить содержимое файла ресурсов на глобальный$i18nна объекте
  • Пройдитесь по всему коду и замените китайский язык в коде на$i18n[key]

код был размещенGithub:miao-i18n

как использовать

кcreate-react-appНапример, создайте проект:

create-react-app myapp

Так как нам нужно добавитьwebpack loaderИтак, вам нужно выставить конфигурацию:

yarn eject

Установитьmiao-i18n:

yarn add miao-i18n

настроитьwebpack, Открытьmyapp/config/webpackDevServer.config.js,из-заloaderВыполняется снизу вверх, все что нам нужно настроить наш загрузчик вверх, это очень важно.

module: {
    strictExportPresence: true,
    rules: [
    // Disable require.ensure as it's not a standard language feature.
    { parser: { requireEnsure: false } },
+    {
+    test: /\.(js|mjs|jsx|ts|tsx)$/,
+    exclude: /node_module/,
+    loader: require.resolve("miao-i18n"),
+    },
...
}

Настройка завершена, можно начинать играть в свое удовольствие 😊

yarn start

После запуска проекта вы можете увидетьsrcКаталог создается автоматическиi18nпапка:

├─src
|  ├─i18n
|  |  ├─i18n.js
|  |  ├─zh
|  |  | └data.json
|  |  ├─en
|  |  | └data.json

zh,enСамо собой разумеется, соответствующие китайским и английским ресурсам.

i18n.jsИспользуется для импорта и переключения файлов ресурсов:

import zh  from "./zh/data.json"
import en  from "./en/data.json"

/**
如果需要用按钮切换语言，可以将此方法暴露给按钮的点击回调。
*/
function i18n(lang) {
  let data;
  switch (lang) {
    case "zh":
      data = zh;
      break;
    case "en":
      data = en;
      break;

    default:
      data = zh;
      break;
  }
  window.$i18n = data;
};


i18n("en")// 切换为英文

Наконец положитьi18n.jsвведены в проект. Открытьsrc/index.js, представленный в начале проектаi18n.js

+ import "./i18n/i18n"
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker'
...

Конфигурация завершена! 🍾🍾🍾

Попробуйте добавить китайский.

Открытьsrc/App.js, измените код следующим образом

import React from 'react';
function App() {
  return (
    <div className="App">
      <p>苹果</p>
      <p>香蕉</p>
      <p>葡萄</p>
    </div>
  );
}
export default App;

Сохраните файл и просмотрите его в браузере:

Откройте консоль, и вы увидите, что исходный код был автоматически скомпилирован для интернационализации:

На данный момент файл ресурсов был автоматически сгенерирован, откройте егоsrc/i18n/en/data.jsonилиsrc/i18n/zh/data.jsonПроверить:

{
    "e6803e21b9c61f9ab3d04088638cecd2": "苹果",
    "b7c03bbf2b8bb334e1dfae5939d82d1b": "香蕉",
    "05b1b3102be250f2a6fadf800f8ad8b6": "葡萄"
}

мы кладемsrc/i18n/en/data.jsonпереведено

{
-    "e6803e21b9c61f9ab3d04088638cecd2": "苹果",
-    "b7c03bbf2b8bb334e1dfae5939d82d1b": "香蕉",
-    "05b1b3102be250f2a6fadf800f8ad8b6": "葡萄"
+    "e6803e21b9c61f9ab3d04088638cecd2": "Apple",
+    "b7c03bbf2b8bb334e1dfae5939d82d1b": "banana",
+    "05b1b3102be250f2a6fadf800f8ad8b6": "grape"
}

Сохраните код и просмотрите его в браузере

Страница отображается на английском языке, и все готово! 🙂

наконец

Поскольку этот инструмент в настоящее время используется только в моем проекте, должно быть много вещей, которые я не учел.Я приветствую ваши предложения и мнения.Github 地址: miao-i18n

Спасибо за прочтение! 🌹

Категории