🚀 날씬한 팁: 응용 프로그램에 기본 국제화 추가(i18n)

👋 안녕하십니까?

Read this article en Español(Chema의 아이디어를 통해 전파할 만한 가치가 있습니다. 감사합니다!)
나는 최근에 우연히 Matthias Stahl 박사code here의 멋진 영상을 발견했다. 그는 기본적인 i18n 번역을 작은 응용 프로그램에 추가할 수 있는 간단한 방법을 제시했다.


마티아스 스타르 박사🇪🇺
@h_i_g_s_c_h

죄송합니다. 저는 방금 약 20줄 코드로 작은 i18n 라이브러리를 만들었습니다.이 컴파일러는 너무 미쳤어!🤷‍♂️
2020년 12월 30일 오전 10:05
나는 재창설과 동시에 약간의 최적화와 강화를 진행하는 것이 매우 재미있고 유용할 것이라고 생각한다.🤗
우리는 이런 것을 창조할 것이다.

이 게시물의 대부분 공로는 마티아스의 것이기 때문에 반드시 그를 살펴보고 미행해야 한다!🙇
📒 주의: 이것은 i18next처럼 기능이 완비된 국제화 해결 방안이 아니기 때문에 이것은 당신에게 완전히 적합한 해결 방안이 아닐 수도 있습니다!
귀찮다체크 아웃Svelte REPL with all the code↗️

번역 대상

Matthias의 예에서, 그는 매우 깊이 박힌 대상을 사용하여 문자열을 저장한다.이것은 가능하지만, 대상을 옮겨다녀야 하기 때문에, 특히 다중 플러그인 키가 있으면 (생각해 봐 app => page => section => component => label.
나는 평면 대상을 선택했는데 그 키는 국제화 언어 환경의 하위 태그(예를 들어 en와 비en-US와 변환 값을 나타내는 점 구분 이름 공간의 문자열이다.우리가 많은 번역을 처리할 때, 이것은 성능에 약간의 이익이 있어야 한다.
또한 포함된 변수와 HTML은 번역 문자열에서 지원됩니다.

// translations.js
export default {
  en: {
    "homepage.title": "Hello, World!",
    "homepage.welcome": "Hi <strong>{{name}}</strong>, how are you?",
    "homepage.time": "The current time is: {{time}}",
  },
  es: {
    "homepage.title": "¡Hola Mundo!",
    "homepage.welcome": "Hola, <strong>{{name}}</strong>, ¿cómo estás?",
    "homepage.time": "La hora actual es: {{time}}",
  },
};

이것은 문자열, 숫자, 날짜 등 다양한 형식과 주입 값을 지원할 수 있도록 합니다.

구성 요소

우리는 지금 우리의 날씬한 구성 요소를 만들 것이다 huzzah!👏
이 구성 요소는 매우 간단합니다. 사용자가 사용하고자 하는 언어를 선택할 수 있는 드롭다운 목록을 포함하고, HTML과 사용자 정의 변수가 있는 텍스트를 포함하는 번역 텍스트를 표시합니다.

<!-- App.svelte -->
<script>
  import { t, locale, locales } from "./i18n";

  // Create a locale specific timestamp
  $: time = new Date().toLocaleDateString($locale, {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });
</script>

<main>
  <p>
    <select bind:value={$locale}>
      {#each locales as l}
        <option value={l}>{l}</option>
      {/each}
    </select>
  </p>

  <h1>{$t("homepage.title")}!</h1>
  <p>{@html $t("homepage.welcome", { name: "Jane Doe" })}!</p>
  <p>{$t("homepage.time", { time })}!</p>
</main>

우리는 날씬한 저장소에 <select> 요소를 연결하고 (우리는 1초 안에 만들 것) 신기한 $t() 방법으로 번역 검색을 하는 것이다.
또한 사용자 사용toLocaleDateString을 표시하고 $locale 저장 값을 전달하는 언어 환경에 맞는 시간 스탬프를 만들고 있음을 알 수 있습니다.
만약 이것이 아직 의미가 없다면, 괜찮아, 계속 읽어라!

상점.

이제 우리 날씬한 상점을 만들자!👯‍♂️
저장 자체는 매우 간단하다. 기본적으로 우리는 지역 설정 값(예를 들어 en, es 등)을 한 저장소에 저장한 다음에 지역 설정과 우리가 이전에 만든translations 대상에 따라 derived 저장을 만들 수 있다.

import { derived, writable } from "svelte/store";
import translations from "./translations";

export const locale = writable("en");
export const locales = Object.keys(translations);

function translate(locale, key, vars) {
  // Let's throw some errors if we're trying to use keys/locales that don't exist.
  // We could improve this by using Typescript and/or fallback values.
  if (!key) throw new Error("no key provided to $t()");
  if (!locale) throw new Error(`no translation for key "${key}"`);

  // Grab the translation from the translations object.
  let text = translations[locale][key];

  if (!text) throw new Error(`no translation found for ${locale}.${key}`);

  // Replace any passed in variables in the translation string.
  Object.keys(vars).map((k) => {
    const regex = new RegExp(`{{${k}}}`, "g");
    text = text.replace(regex, vars[k]);
  });

  return text;
}

export const t = derived(locale, ($locale) => (key, vars = {}) =>
  translate($locale, key, vars)
);

대부분의 논리는 translate 방법에서 키를 찾고 변수를 주입한다(존재한다면).
파생 저장소는 현재 언어 환경과 동기화될 것입니다. 따라서 우리의 translate 방법은 호출될 때 항상 현재 언어 환경을 받을 것입니다.로켈이 업데이트되면 호출이 다시 계산되어 사용자가 로켈을 변경할 때 Svelte 구성 요소의 모든 텍스트가 업데이트됩니다.쿨!😎
이것은 번역을 위한 추가 저장소를 만들 필요가 없기 때문에, 이것은 엄격하게 필요한 것이 아니며, 생략하면 효율이 더욱 높아질 것이다.

그것을 한데 놓다

이제 우리는 우리의 상점이 생겼다. 우리는 모든 것을 가지고 날씬한 기본 국제화 시스템을 만들었다. 축하한다.🎉
이 코드의 실행을 보려면 Svelte REPL

🛰 한층 더

현재 이 옵션은 모든 사람에게 적합하지 않다.만약 많은 번역을 포함하는 대형, 건장하고, 내용이 밀집된 프로그램을 구축하고 있다면, Locize 와 i18next 을 결합해서 사용할 것을 고려할 수 있습니다.비슷한 방식으로 그들의 JS 라이브러리를 Svelte와 통합할 수 있습니다.
저희도 HTML 내용을 정리하지 않았기 때문에 번역 문자열에 사용자가 제공한 데이터를 주입하면 입력을 정리하거나 제거해야 합니다XSS vulnerability!🔐
이런 방법의 또 다른 문제는 부족한 번역에 대해 진정한 반환 행위가 없다는 것이다. (지금 우리는 단지 오류를 던졌을 뿐, 이것은 당신이 원하는 것이 아닐 수도 있다.)
즉, 완전한 번역 플랫폼이 필요 없고 상대적으로 기본적인 문자열만 번역할 수 있을 때 이런 해결 방안이 도움이 된다는 것이다.
이 예는 persisting the locale value in local storage로 확장할 수 있으며 $t() property 등을 통해 브라우저의 기본 언어로 기본값으로 사용할 수 있습니다.그 자체가 하나의 주제!

🎬 지느러미

실시간 편집 환경에서 Svelte REPL 의 모든 코드를 보십시오!🤓
나는 이 예가 우리에게 날씬한 몇 가지 재미있는 특성을 보여 주었다고 생각한다. 예를 들어 다음과 같다.
1️⃣ 어떻게 아주 적은 코드로 기능성을 실현하지만 기본적인 i18n으로 실현합니까
2️⃣ 반환 함수 navigator.languages 저장소를 어떻게 사용합니까
셋️⃣ 글로벌 스토리지를 사용하는 방법 및 구성 요소에 이러한 값을 설정하는 방법
4️⃣ 로켈별 날짜 형식을 가져오는 방법derived당신에게 아주 재미있었으면 좋겠습니다. 마티아스의 오리지널 댓글을 위해 소리 지르는 것을 잊지 마세요!
읽어주셔서 감사합니다!고민 좀 해볼게요. 이 댓글 하나만 주세요.❤️, 🦄 혹은🔖 나중에 책갈피를 추가합니다.💕
다른 제안, 아이디어, 피드백 또는 수정 사항이 있습니까?댓글로 알려주세요!🙋‍♂️
Dev.to(), 트위터(),/또는 Githubdanawoodman에서 나를 주목하는 것을 잊지 마라!
사진 작성자Joshua Aragon가 Unsplash