Интерфейсное решение для общей интернационализации

DI18n

задний план

Фронтенд-технологии меняются с каждым днем, и существует множество технологических стеков. Что касается интерфейсных фреймворков,React, Vue, Angularподожди, добавьwebpack, gulp, Browserify, fisИ так далее, чтобы создавать инструменты для ежедневной работы по разработке. При этом в повседневной работе разные проекты используют разные стеки технологий. Когда вам нужно интернационализировать некоторые проекты из-за различий в стеках технологий, вам нужно найти интернационализированный подключаемый модуль, который соответствует стеку технологий, используемому в текущем проекте. Например:

vue + vue-i18n
angular + angular-translate
react + react-intl
jquery + jquery.i18n.property

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

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

Проблемы, стоящие перед интернационализацией

1. Перевод языка

Преобразование статической копии (копия статического шаблона внешнего интерфейса)
Перевод динамической копии (serverдинамические данные, отправленные клиентом)

2. Стиль

Путаница в стиле, вызванная разной длиной копии на разных языках.
Замена картинок

обслуживание таблицы 3.map

4. Сторонние сервисы

5. Локализация

Валютная единица
Курс обмена валют
Формат времени

6. Схема упаковки

Время выполнения
после компиляции

решение

В ежедневном процессе разработки наиболее распространенными сценариями, требующими интернационализации, являются:语言翻译,样式,map表维护а также打包方案. Далее будет объяснено общее решение для интернационализации на основе этих фрагментов контента и в сочетании с ежедневным процессом разработки.

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

1. Используйте инструменты сборки

webpack
gulp
fis
browserify
...

На основе этих инструментов сборки используйте:

Vue
Angular
React
Backbone
...
не используя никакихframework

2. Не использовать инструменты сборки

использовалjqueryилиzeptoи т.д. библиотека
Роднойjs

Среди них, в первом процессе разработки, есть много вариантов доступных инструментов интернационализации:

На уровне фреймворка каждый основной фреймворк будет иметь соответствующие плагины интернационализации, такие как:vue-i18n, angular-translate, react-intlИ так далее, эти плагины можно легко интегрировать в текущий процесс разработки. Преимущество заключается в том, что эти плагины интернационализации на уровне фреймворка можно использовать гибко и выполнять перевод статической копии и динамической копии. Недостатком является то, что использование разных фреймворков в процессе разработки также требует изучения соответствующих плагинов, и есть определенная стоимость обучения.В то же время в бизнес-коде может быть разная логика оценки языковых пакетов.

На уровне инструмента сборкиwebpackимеет соответствующийi18n-webpack-plugin, gulpимеютgulp-static-i18nи другие соответствующие плагины. Подпрограммы этих плагинов, как правило, находятся в ваших пользовательскихmapПри этом в соответствии с форматом кода, определяемым компилируемым плагином, а затем на этапе компиляции кода замена статического текста выполняется путем сопоставления строк. Эти плагины решают только проблему статического копирования, например, некоторые样式,图片替换,classсвойства и动态文案的翻译И поэтому работа не делала.
На самом деле эти плагины используются при компиляции для样式,图片替换, class属性и т.д. замену сделать очень просто, при этом动态文案的翻译из-за отсутствияcontext, поэтому вы не захотите использовать эти плагины компиляции для завершения перевода динамического копирайтинга. Вместо этого поставьте动态文案的翻译Это должно быть более надежным, чтобы сделать это во время выполнения.

Но с другого угла, поместите в сторону основы основы на основе инструмента для этих разработок, строительство плагинов на международном уровне может быть хорошим инструментом для использования Framework Reduc Off OutПроцесс интернационализации переносится из среды выполнения в компиляцию, и большинство интернациональных задач выполняется во время компиляции., снизить затраты на изучение соответствующих подключаемых модулей интернационализации и добиться индивидуальной настройки в процессе создания и упаковки. Однако есть и определенные недостатки, то есть плагины интернационализации на уровне инструментов сборки могут выполнять только перевод некоторых основных статических текстов, поскольку отсутствиеcontext, это не очень хорошо для полной трансляции динамической копии, она больше подходит для каких-то чисто статических, частично отображаемых веб-страниц.

Во втором процессе разработки доступно меньше инструментов интернационализации, и большинство из них будет соответствоватьjqueryЭти библиотеки и соответствующие имjquery.i18nилиi18nextПодождите, пока плагин завершит интернационализацию.

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

Общая идея этой схемы такова: выполнить ее через строительный инструмент样式, 图片替换, class属性Для работы по замене не будет слишком много имен переменных из-за интернационализации в бизнес-коде, и для ее завершения используется общая функция перевода.静态文案а также动态文案работа перевода без использования соответствующих плагинов интернационализации, предоставляемых различными фреймворками. Проще говоря:

в зависимости от того, что вы используете构建工具+ универсальный翻译函数завершить интерфейсную интернационализацию

Во-первых, это универсальноефункция языкового перевода: di18n-translate. Функция, которую он обеспечивает, — это перевод статической и динамической копии, независимой от сред разработки и инструментов сборки.

  npm install di18n-translate

// 模块化写法
  const LOCALE = 'en'
  const DI18n = require('di18n-translate')
  const di18n = new DI18n({
    locale: LOCALE,     // 语言环境 
    isReplace: false,   // 是否开始运行时(适用于没有使用任何构建工具开发流程) 
    messages: {         // 语言映射表 
      en: {
        你好: 'Hello, {person}'
      },
      zh: {
        你好: '你好, {person}'
      }
    }
  })

  di18n继承于一个翻译类，提供了2个方法`$t`, `$html`:
 
  di18n.$t('你好', {person: 'xl'})   // 输出: Hello, xl
  di18n.$html(htmlTemp)   // 传入字符串拼接的dom, 返回匹配后的字符串，具体示例可见下文

// 外链形式
  <script src="./lib/di18n-translate/index.js"></script>
  <script>
    const LOCALE = 'en'
    const di18n = new DI18n({
      locale: LOCALE,
      isReplace: false,
      messages: {
        // 语言包
      }
    })
  </script>

В настоящее время вам нужно только соответствующим образом интегрировать эту общую функцию перевода в вашу среду разработки.

Далее будут описаны соответствующие решения в сочетании с конкретными различными сценариями:

использовать`MVVM`Категория`framework`

использовалMVVMКатегорияframework, вы можете использоватьframeworkпомочь тебе закончитьviewработает рендеринг слоя, то вы можете легко управлять им через код в кодеclassконтент и замена изображений работают в разных локалях.

Напримерvue, Пример (1):


main.js文件:

window.LOCALE = 'en'


app.vue文件:
  <template>
    <p class="desc"
      :class="locale"   // locale这个变量去控制class的内容
      :style="{backgroundImage: 'url(' + bgImg + ')'}"  // bgImg去控制背景图片的路径
    ></p>
    <img :src="imgSrc"> // imgSrc去控制图片路径
  </template>

  <script>
    export default {
      name: 'page',
      data () {
        return {
          locale: LOCALE,
          imgSrc: require(`./${LOCALE}/img/demo.png`),
          bgImg: require(`./${LOCALE}/img/demo.png`)
        }
      }
    }
  </script>

В настоящее время вы можете добавить функцию перевода, чтобы соответствовать большинству сценариев интернационализации.main.jsдобавить функцию перевода вdi18n-translateЦитата:

main.js文件:

import Vue from 'vue'

window.LOCALE = 'en'
const DI18n = require('di18n-translate')
const di18n = new DI18n({
    locale: LOCALE,       // 语言环境
    isReplace: false,   // 是否进行替换(适用于没有使用任何构建工具开发流程)
    messages: {         // 语言映射表
      en: {
        你好: 'Hello, {person}'
      },
      zh: {
        你好: '你好, {person}'
      }
    }
  })

Vue.prototype.d18n = di18n

Базовое использование функций перевода, конечно, вы также можете интегрировать в свою среду разработки другими способами:

app.vue文件:
  <template>
    <p class="desc"
      :class="locale"   // locale这个变量去控制class的内容
      :style="{backgroundImage: 'url(' + bgImg + ')'}"  // bgImg去控制背景图片的路径
    ></p>
    <img :src="imgSrc"> // imgSrc去控制图片路径
    <p>{{title}}</p>
  </template>

  <script>
    export default {
      name: 'page',
      data () {
        return {
          locale: LOCALE,
          imgSrc: require(`./${LOCALE}/img/demo.png`),
          bgImg: require(`./${LOCALE}/img/demo.png`),
          title: this.di18n.$t('你好')
        }
      }
    }
  </script>

использоватьmvvm frameworkДля интернационализации вышеописанный метод должен быть более подходящим, в основном с использованиемframeworkпомочь тебе закончитьviewРабота по рендерингу слоев, а затем введение функции перевода для завершения работы по динамическому копирайтингу.

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

Конечно, используяmvvm frameworkтакже можно использовать без использованияframeworkсделано для насviewФункцию этой части слоя выполняет инструмент построения, рутину этой части можно найти во второй половине дня.Пример 3

Неиспользованный`mvvm`framework, используя инструменты сборки, такие как`webpack`/`gulp`/`browserify`/`fis`)

интерфейсный шаблон

Интернационализация способа и использования вышеизложенногоmvvmПуть фреймворка такой же, потому что есть механизм шаблонов, который делает это за вас.viewрендеринг слоя.样式,图片,class属性Обработка может соответствовать описанному выше методу, а для перевода динамической копии необходимо ввести функцию перевода.

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

нет интерфейсных шаблонов

Поскольку интерфейсный шаблон не используется, дляviewобработка слоев. на этот раз твойDOMструктура может находиться вhtmlОн определяется в начале файла или может быть с помощьюwebpackЭто позволяет вам разрабатывать с использованием модульности,jsдинамическая вставкаDOMПуть.

Далее поговорим об отсутствииwebpackЭто позволяет создавать инструменты для модульной разработки,DOMструктура находится непосредственно вhtmlЭлементы, жестко закодированные в файле. В этом случае вы теряетеviewВозможности рендеринга слоев. Таким образом, в этом случае есть 2 способа справиться с этой ситуацией.

Первый способ — добавить свой собственный код运行时код. Общая идея состоит в том, чтобыDOMСлой добавляет свойства, эти свойства и те, которые вам нужно перевестиmapсоответствует таблицеkeyстоимость:

Пример (2):

htmlдокумент:

  <div class="wrapper" i18n-class="${locale}">
    <img i18n-img="/images/${locale}/test.png">
    <input i18n-placeholder="你好">
    <p i18n-content="你好"></p>
  </div>

Время выполнения:

  <script src="[PATH]/di18-translate/index.js"></script>
  <script>
    const LOCALE = 'en'
    const di18n = new DI18n({
      locale: LOCALE,
      isReplace: true,   // 开启运行时
      messages: {
        en: {
          你好: 'Hello'
        },
        zh: {
          你好: '你好'
        }
      }
    })
  </script>

наконецhtmlпреобразуется в:

  <div class="wrapper en">
    <img src="/images/en/test.png">
    <input placeholder="Hello">
    <p>Hello</p>
  </div>

Второй способ — использовать инструмент сборки для завершения работы по интернационализации в процессе компиляции кода, чтобыwebpackНапример:

Пример (3):

htmlдокумент:

  <div class="wrapper ${locale}">
    <img src="/images/${locale}/test.png">
    <p>$t('你好')</p>
  </div>

На этот раз использовалwebpackизpreloader: locale-path-loader, его функция состоит в том, чтобы передатьwebpackЗавершите настройку локали, в вашем бизнес-коде не будет слишком много переменных локали, а среда выполнения как хорошее решениеcssизbackgroundЗамена картинки работает, специфическийlocale-path-loaderизПожалуйста, нажмите на меня для документации

Инструкции:

  npm install locale-path-loader

webpack 1.xКонфигурация:

  module.exports = {
    ....
    preLoaders: [
      {
        test: /\.*$/,
        exclude: /node_modules/,
        loaders: [
          'eslint',
          'locale-path?outputDir=./src/common&locale=en&inline=true'
        ]
      } 
    ]
    ....
  }

webpack 2Конфигурация:

  module.exports = {
    ....
    module: {
      rules: [{
        test: /\.*$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: [{
          loader: 'locale-path-loader',
          options: {
            locale: 'en',
            outputDir: './src/common',
            inline: true
          }
        }]
      }]
    }
    ....
  }

проходить черезwebpackизpreloaderПосле обработки вставляется на страницуDOMВ итоге получается:

  <div class="wrapper en">
    <img src="/images/en/test.png">
    <p>Hello</p>
  </div>

Однако использование этой схемы требует обработки в процессе окончательной упаковки, поскольку черезpreloaderобработки, страница была переведена на соответствующую языковую версию, поэтому необходимо создать инструменты и изменитьpreloaderпараметр для вывода файлов в разных языковых версиях. Конечно, инструменты сборки более чемwebpackЭтот, но идея борьбы с ним таким образом та же.
Этот метод относится к обработке во время компиляции.Во время разработки необходимо поддерживать только один код, но в конечном выводе будет выводиться код разных языковых пакетов. Конечно, это решение также нуждается в поддержке сервера и возвращает соответствующий входной файл в соответствии с запросами различных языковых сред. Об использовании здесьwebpackсоответствоватьlocale-path-loaderСодержание субподряда можно найти вvue-demo:

|--deploy
  |   |
  |   |---en
  |   |    |--app.js
  |   |    |--vendor.js
  |   |    |--index.html
  |   |---zh
  |   |    |--app.js
  |   |    |--vendor.js
  |   |    |--index.html
  |   |---jp
  |   |    |--app.js
  |   |    |--vendor.js
  |   |    |--index.html
  |   |----lang.json

Далее поговорим о проектах, которые разрабатываются модульно с помощью инструментов сборки, эти проекты могут быть перечислены на последней странице.DOMна всем протяженииjsдля динамической вставки на страницу. Тогда, очевидно, можноDOMМожно сделать перед вставкой на страницу静态文案翻译,样式, 图片替换, class属性и т.д. Работы по замене.

Пример (4):
htmlдокумент:

  <div class="wrapper ${locale}">
    <img src="/images/${locale}/test.png">
    <p>$t('你好')</p>
  </div>

jsдокумент:

  let tpl = require('html!./index.html')
  let wrapper = document.querySelector('.box-wrapper')
  
  // di18n.$html方法即对你所加载的html字符串进行replace,最后相对应的语言版本
  wrapper.innerHTML = di18n.$html(tpl)

последняя страница вставленаDOMдля:

  <div class="wrapper en">
    <img src="/images/en/test.png">
    <p>Hello</p>
  </div>

В настоящее время динамический перевод использует импортированныйdi18nВверх$tметод

  di18n.$t('你好')

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

не использовал никаких`framework`а также`构建工具`чисто статические, презентационные страницы

Для интернационализации таких веб-страниц базовая работа по интернационализации, упомянутая выше, может быть выполнена путем внедрения среды выполнения в код.Пример (2)и на складеhtml-demoпапка.

Ведение таблицы карт языковых пакетов

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

Адрес проекта (если считаете, что статья хорошая, не скупитесь на звездочку~~)

пожалуйста, ткните меня

Наконец нужно поблагодарить@kenberkeleyОднокурсник, я уже несколько раз с ним дискутировал насчет интернационализации.При этом по поводу содержания компиляции у него есть статья(пожалуйста, ткните меня) также дал мне несколько лучших идей.