React 기반 응용 프로그램에서 번역을 처리하는 새로운 방법

지난 몇 년 동안 저는 많은 자바스크립트/Typescript 프로젝트에 종사해 왔습니다.특히 React Native와 React에서이러한 항목에 대해 문자열 로컬화는 항상 정해진 목표입니다.그러나, 내가 이해하지 못한 것은 자바스크립트 프로그램에서 번역을 처리하는 표준 방법이다.
대부분의 소프트웨어 패키지(i18next, i18n-js에서 번역에 액세스하는 방법은 다음과 같습니다.

console.log(translationsObject.get('translations_key'));

이 방법의 주요 문제점은 다음과 같습니다.

키 오류가 발생하면 유효한 컴파일링이 지원되지 않아 오류를 포착합니다.

모든 언어에 접근 중인 키가 설정되어 있는지 알 수 없음;

지원되지 않는 로케일에 액세스하려고 하면 경고가 표시되지 않습니다.

번역 키의 재구성은 번역할 때 차단할 수 없는 문제를 초래하기 쉽다.

이 질문들은 나로 하여금 npm 패키지 한 세트를 만들게 했다.

text-localizer ;

react-text-localizer ;

react-native-text-localizer .

기본 패키지를 작성할 때 내가 설정한 주요 목표는 다음과 같습니다.

유형이 안전해야 한다.

묶음의 크기를 늘려서는 안 된다.

가동 시간에 어떠한 방식도 영향을 주지 않는다.

프로젝트 구조에 영향을 주지 않는 상황에서 여러 가지 용례에 적응해야 한다.

결과는 어떻습니까?

첫 번째 뚜렷한 장점은 드디어 제대로 된 개발자 체험을 할 수 있다는 것이다.
면책 성명: 이 소프트웨어 패키지는 이미 준비가 되어 있고 사용할 수 있지만, 귀하가 기대하는 모든 기능이 없을 수도 있습니다. 왜냐하면 이것은 최근에 발표된 것이기 때문입니다. (저는 이미 모든 부족한 기능을 실시할 계획을 세웠습니다.)API Reference의 documentation 섹션에서 이 패키지의 모든 기능을 찾을 수 있습니다.

GitHub 재구매

모든 패키지를 만드는 방법은monorepo 방법입니다.Here you can find the Repo .

그것을 어떻게 사용합니까?

이 절에서, 나는react 텍스트 포지셔닝 패키지를 어떻게 신속하게 설정하는지 설명할 것이다.하지만 다른 용례에도 관심이 있거나 더 완전한 해석을 좋아한다면 documentation(두려워하지 마세요. 누구나 이해할 수 있도록 최선을 다했습니다)를 보세요.

1. 설치

텍스트 로케이터 기능을 잠금 해제하려면 다음과 같이 하십시오.

yarn add react-text-localizer

2. 문자열

번역을 저장할 파일을 만들어야 합니다.
따라서 src 디렉터리에 l10n 폴더를 만들고 번역 파일을 추가합니다.이 자습서에서는 다음 파일을 사용합니다.

우리json;

gb.ts;

네.ts

JSON

JSON 파일을 사용하여 번역을 저장하는 것은 틀림없이 가장 흔하고 가장 간단할 것이다.

// filename: src/l10n/us.json 

{
  "welcome": "Welcome on the Text Localizer Docs",
  "help": "Do you need some help about {{ topic }}?",
  "question": "Which is your favorite cat?"
}

참고: 도움말에는 포맷된 문자열이 포함되어 있으며 formatTranslation 함수를 통해 쉽게 관리할 수 있습니다.

Javascript 또는 타자 스크립트

비록 JSON은 지금까지javascript에서 번역 파일을 저장하는 데 가장 광범위하게 사용된 해결 방안이지만, 많은 용례에서 JS나 TS 파일을 사용하는 것도 마찬가지로 유용하다.
예를 들어 몇 개의 문자열만 다른 상황에서 typescript 파일을 사용하면 매우 유용할 수 있습니다.

// filename: src/l10n/gb.ts

import us from './us.json';

export default {
  ...us,
  question: 'Which is your favourite cat?',
};

만약 당신의 문자열이 백엔드에 존재한다면?

텍스트 포지셔닝 머신을 사용하면 js/ts 파일을 만들고 그 나라에서 번역할 함수를 내보냅니다.

// filename: src/l10n/it.ts 

// In this example fetchItTranslations simply returns a plain object.
// The point is that it could be any asynchronous function
// where maybe using axios, apollo or any other client.
const fetchItTranslations = async () => ({
  welcome: 'Benvenuto sulla documentazione di Text Localizer',
  help: 'Hai bisogno di aiuto riguardo {{ topic }}?',
  question: 'Qual è il tuo gatto preferito?',
});

export { fetchItTranslations };

폴더 구조

항목에는 다음과 같은 폴더 구조가 있습니다.

.
├── ...
├── _src
│   ├── _l10n
│   │   ├── us.json
│   │   ├── gb.ts
│   │   └── it.ts
│   ├── ...
│   └── App.tsx
└── package.json

4. 언어 환경 정의

번역 파일을 설정한 후 Translations Context을 만들어야 합니다.
그리고 l10n 폴더에 색인을 만듭니다.ts 파일에 이 코드가 포함되어 있습니다.

// filename: src/l10n/index.ts

import { createTranslationsContext } from 'react-text-localizer';
import { fetchItTranslations } from './it';

const translationsContext = createTranslationsContext({
  it: fetchItTranslations,
  gb: import('./l10n/gb'),
  us: import('./l10n/us.json'),
});

export { translationsContext };

생성된 유형[옵션]

생성 유형의 사용은 완전히 선택할 수 있습니다.Check the following section to learn more about it.
생성된 형식 방법을 사용하려면 다음 명령만 실행하면 됩니다. (주의: 스크립트가 실패하면 tsconfig.json 파일에 지정한 'module' 가 'CommonJS' (최소한 스크립트가 실행될 때)

npm run generate-l10n [translationsPath]

완전히 작성translations.d.ts되면 언어 및 응용 프로그램 번역 유형을 컨텍스트 정의의 TextLocalizer에 전달할 수 있습니다.

// filename: src/l10n/index.ts

import { createTranslationsContext } from 'react-text-localizer';
import { fetchItTranslations } from './it';

const translationsContext = createTranslationsContext<
  Languages,
  AppTranslations
>({
  it: fetchItTranslations,
  gb: import('./l10n/gb'),
  us: import('./l10n/us.json'),
});

export { translationsContext };

5. 번역 공급업체

전체 어셈블리 트리에서 문자열을 액세스하려면 다음과 같이 애플리케이션의 루트 컴포넌트를 TranslationsProvider로 포장해야 합니다.

// filename: src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { TranslationsProvider } from 'react-text-localizer';
import { translationsContext } from './l10n';

ReactDOM.render(
  <React.StrictMode>
    <TranslationsProvider context={translationsContext} language="en">
      <App />
    </TranslationsProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

6. 사용법

마지막으로 다음 연결에 감사드립니다.

useTranslationsState

useTranslations

번역 상태와 번역 자체를 각각 방문할 수 있다.

// filename: src/App.tsx

import { useTranslations, useTranslationsState } from 'react-text-localizer';
import './App.css';
import { translationsContext } from './l10n';

function App() {
  const { welcome } = useTranslations(translationsContext);
  const { isLoading } = useTranslationsState(translationsContext);

  if (isLoading) return null;

  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://enzomanuelmangano.github.io/text-localizer/"
          target="_blank"
          rel="noopener noreferrer"
        >
          {welcome}
        </a>
      </header>
    </div>
  );
}

export default App;

7. 스토리지[옵션]

번역이 백엔드에 있는 경우 TranslationsProvider에서 전달을 선택할 수 있습니다.

// filename: src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { TranslationsProvider } from 'react-text-localizer';
import { translationsContext } from './l10n';

ReactDOM.render(
  <React.StrictMode>
    <TranslationsProvider
      context={translationsContext}
      language="gb"
      storage={localStorage}
    >
      <App />
    </TranslationsProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

결론

이 패키지는 번역 문자열을 처리하는 것을 매우 쉽게 한다.불행하게도 가방에 복수 관리 같은 기능이 부족했다.
나는 가능한 한 많은 피드백을 얻기 위해 이 소프트웨어 패키지를 공개하고 커뮤니티와 공유하기로 결정했다.만약 피드백이 있다면, 평론 부분에 당신이 원하는 피드백을 남길 수 있습니다.
부언: 이 프로젝트가 재미있다면 GitHub 스타here를 남겨두는 것도 고려할 수 있다.