vue-i18n을 사용할 때 발생할 수 있는 4가지 어려움

Vue.js - vue-i18n 에 대해 "사실상"국제화 라이브러리를 사용하려고 시도하는 데 몇 달 동안 좌절한 후, 저는 그것을 교체할 때가 되었다고 결정했습니다. 그리고 그것이 내가 만든 이유입니다 fluent-vue . 다음 블로그 게시물에서 이에 대해 더 자세히 쓰고 MozillaFluent syntax에서 사용합니다.

이 블로그 게시물에서는 내 앱에서 vue-i18n 라이브러리를 사용하려고 할 때 어떤 문제가 발생했으며 fluent-vue 및 Fluent 구문이 이를 해결하는 방법을 설명하려고 합니다.

vue-i18n 좋은 부분:

첫째, 이것은 내가 vue-i18n에서 좋아하는 것입니다.

1. 성분 보간

구성 요소 보간을 사용하면 번역 메시지 내에서 구성 요소를 사용할 수 있습니다. v-html 지시문 사용을 줄이는 좋은 방법입니다.

2. SFC 커스텀 블록

템플릿 및 js 코드와 동일한 파일에 구성 요소에 대한 번역을 유지하는 것은 정말 편리합니다.

3. 툴링

가장 많이 사용되는 Vue.js 국제화 라이브러리이기 때문에 유용한 패키지와 확장이 많이 있습니다.

vue-i18n의 문제:

그리고 이것은 내가 vue-i18n에서 마음에 들지 않았거나 내 프로젝트에서 작동하지 않은 것입니다.

1. 개발자를 위한 복잡한 API

vue-i18n에는 5가지 다른 방법이 있습니다: ( $t , $tc , $te , $d , $n ). 간단한 텍스트, 복수형 텍스트, 날짜 및 숫자의 서식을 지정하는 별도의 방법이 있습니다.fluent-vue는 2가지 방법만 있고 그 중 하나는 거의 사용되지 않습니다.

2. "누설" 현지화

소스 언어의 문법은 번역가가 사용할 수 있는 기능을 제한하고 앱 코드 및 다른 언어의 번역 메시지로 누출됩니다.

예(복수화):

번역가가 복수화를 사용할 수 있게 하려면 $tc 메서드를 사용해야 합니다. 소스 언어에 필요하지 않더라도. 다음과 같이 작성할 수 없습니다.

const messages = {
  en: {
    'copy-n-files': 'Copy {count} files'
  }
}

$t('copy-n-files', { count: filesCount })

추가 매개변수와 함께 $tc 메서드를 사용해야 합니다.

$tc('copy-n-files', filesCount, { count: filesCount })

그리고 번역가는 애플리케이션 코드를 확인하지 않고는 다음 형식을 사용하는 번역이 복수화될지 여부를 알 수 있는 방법이 없습니다.

const messages = {
  en: {
    'copy-n-files': 'Copy {count} file | Copy {count} files'
  }
}

게다가 번역기가 이 구문을 사용하려고 시도하고 개발자가 $tc 메서드를 사용하지 않은 경우 복수화되지 않으며 앱에 두 선택 변형이 모두 표시됩니다.

fluent-vue 솔루션:

copy-n-files = { $count -> 
    [one] Copy file
   *[other] Copy {$count} files
}

$t('copy-n-files', { count: 5 })

이 구문은 복수 범주 또는 구체적인 값을 기반으로 옵션을 선택하기 위해 모든 번역 메시지에서 사용할 수 있습니다.

3. 번역가는 번역에 대한 통제권이 없습니다.

개발자는 "번역 메시지를 복수화해야 합니까?", "어떤 날짜 및 숫자 형식을 사용할 것인가?"와 같이 번역가가 선택해야 하는 선택을 강요받습니다.

예(날짜 형식):
vue-i18n 개발자가 미리 정의한 날짜 형식의 수는 고정되어 있으며 개발자는 각 경우에 사용할 형식을 결정합니다.

const dateTimeFormats = {
  'en': {
    short: {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    },
    long: {
      ...
    }
  }
}

const messages = {
  'en': {
    'last-online': 'User was last online at {date}'
  }
}

$t('last-online', { date: $d(new Date(), 'short') })

예를 들어 일부 언어의 UI에 맞지 않는 경우 번역가는 특정 번역의 날짜 형식을 변경할 수 없습니다.

fluent-vue 솔루션:

유창한 구문을 사용하면 번역가가 번역 메시지에서 사용자 지정 기능을 호출할 수 있습니다. DATETIME 기능이 내장되어 있습니다.

last-online = User was last online at { DATETIME($date, year: "numeric", month: "short", month: "short") }

$t('last-online', { date: new Date() })

미리 정의된 날짜 형식을 갖고 싶다면 사용자 정의 함수를 사용하여 쉽게 구현할 수 있습니다. 그러나 번역가는 여전히 각 경우에 사용할 형식을 선택할 수 있습니다.

4. 구문이 충분히 강력하지 않습니다.

$tc 메서드를 사용하더라도 2개 이상의 개체 수에 의존하는 복수화를 가질 수 있는 방법은 없습니다.

$tc('apples-and-bananas', /* what should go here? */, { appleCount: 1, bananaCount: 5 })

const messages = {
  en: {
    'apples-and-bananas': '{appleCount} apples and {bananaCount} bananas'
  }
}

이 문제에 대한 한 가지 가능한 솔루션은 번역을 세 가지 다른 번역으로 나누는 것입니다. 그러나 특별히 좋아 보이지는 않습니다.

$t('apples-and-bananas', {
  appleCountText: $tc('apples', 1, { appleCount: 1 })
  bananaCountText: $tc('banana', 5, { bananaCount: 5 }
})

const messages = {
  en: {
    'apples-and-bananas': '{appleCountText} and {bananaCountText}'
    'apples': '{appleCount} apple | {appleCount} apples'
    'bananas': '{bananaCount} banana | {bananaCount} bananas'
  }
}

fluent-vue 솔루션:

Fluent 구문 덕분에 다음과 같이 분할하지 않고 번역을 작성할 수 있습니다.

$t('apples-and-bananas', { appleCount: 1, bananaCount: 5 })

apples-and-bananas = {$appleCount -> 
    [one] An apple
   *[other] {$appleCount} apples
} and {$bananaCount -> 
    [one] a banana
   *[other] {$bananaCount} bananas
}