react-intl vs react-i18(React용)JS 국제화(i18n)
ReactJs를 사용하여 다국어 애플리케이션을 만들어야 합니다.어플리케이션에는 다양한 언어에 대응하는 커스텀 사전과 날짜/시간, 숫자 및 통화의 자동 서식이 필요합니다.
지금까지 본 바로는 매우 인기 있는 라이브러리가 2개 있습니다.
react-intl 및 react-i18 next
하나와 다른 것 사이의 장점은 무엇일까요?가장 많이 지원되고 인기 있는 것은 무엇입니까?
여러 언어를 지원하는 ReactJS 응용 프로그램의 일반적인 선택은 무엇입니까?
js-syslogi
제가 개발한 i18n 라이브러리의 대안을 제시하고자 합니다.
- 는 Vanilla JSVanilla JS)와합니다.
lingui-i18n( )lingui-react) lingui-react포맷을 ).- ICU MessageFormat을 기반으로 구축
- 에는 CLICLI」)도되어 있습니다.
lingui-cli - MessageFormat에서 명백한 오류를 검출하기 위해 컴파일 시간 동안 흐름 유형과 많은 검증을 사용합니다.
구문
ICU MessageFormat은 변수, 복수, 서수, 선택, 숫자/날짜 형식을 지원하며 확장도 가능하기 때문에 매우 유연합니다.하지만 복잡한 메시지는 쓰기가 좀 어렵습니다.
lingui-i18n템플릿리터럴을 하여 편리한 을 나타냅니다.또, 「 ES6 」는 「ES6 」입니다.lingui-react React React Components 를 사용한 .
바닐라 JS
import { i18n } from 'lingui-i18n'
i18n.t`Hello World`
i18n.t`Hello, my name is ${name}`
i18n.plural({ value: count, one: "# book", other: "# books" })
langui-i18n 문서의 다른 예
반응
import React from 'react'
import { Trans, Plural } from 'lingui-react'
class App extends React.Component {
render() {
const name = "Fred"
const count = 42
return (
<div>
// Static text
<Trans>January</Trans>
// Variables
<Trans>Hello, my name is {name}</Trans>
// Components
<Trans>See the <a href="/more">description</a> below.</Trans>
// Plurals
<Plural
value={count}
zero={<strong>No books</strong>}
one="# book"
other="# books"
/>
</div>
)
}
}
문서는 의 일부입니다.js-lingui메인 문서
인라인 컴포넌트와 리치 포맷
a) 더 쉬운 구문과 b) 인라인 컴포넌트에 대한 완전한 지원을 원했기 때문에 이 lib를 작성하기 시작했습니다.
다.react-intl ★★★★★★★★★★★★★★★★★」react-i18next에서는 리치 텍스트 및 인라인컴포넌트에 대한 지원이 매우 제한되어 있습니다.컴포넌트 태그)를 할 수 .This is <strong>bold</strong> text. ).This is {el} text.서 ''는el = <strong>bold</strong>를 참조해 주세요.
첫 번째 접근법의 문제는 커스텀 리액트 컴포넌트를 사용할 수 없다는 것입니다.가 하나의메시지가 입니다(번역자는 1개의 메시지가 아니라2개의 메시지로 동작합니다).This is {el} text.그리고.bold문맥을 유지하려면 문장 전체를 번역해야 하기 때문에 실제로는 매우 좋지 않습니다.
와 함께lingui-react번역 내의 모든 React 컴포넌트를 사용할 수 있습니다.메시지는 1개로 추출됩니다.
<Trans>See the <Link to="/more">description</Link> below.</Trans>
// for translator: See the <0>description</0> below.
이 솔루션의 또 다른 장점은 추출된 메시지에 컴포넌트 이름과 소품이 숨겨져 있다는 것입니다.번역을 변경한 후에야 번역을 갱신하는 데 많은 시간을 할애했던 기억이 납니다.class내부 요소에서.
요구 사항들
둘다요.lingui-i18n그리고.lingui-react모든 것을 작동시키려면 사전 설정이 필요합니다.Create React App과 함께 사용하려면 이젝트 또는 포크가 필요합니다.react-scripts.
일반적인 선택은 react-intl로 react-i18 next보다 널리 사용됩니다.리액트-i18next의 300개의 별과 비교하여 현재 기허브에 4.5k가 있다.React에서 현지화를 위한 최적의 솔루션입니다.
시작하기 위한 튜토리얼은 다음과 같습니다.https://medium.freecodecamp.com/internationalization-in-react-7264738274a0
Alibaba Group에서 개발한 https://github.com/alibaba/react-intl-universal을 사용해 보십시오. yahoo/http-intl은 React와 같은 뷰 레이어에서만 적용이 가능합니다.요소.Vanilla JS 파일의 경우 국제화할 방법이 없습니다.예를 들어, 다음 스니펫은 많은 React에서 사용되는 일반적인 형식 검증기입니다.앱의 컴포넌트
export default const rules = {
noSpace(value) {
if (value.includes(' ')) {
return 'Space is not allowed.';
}
}
};
allibaba/intl-universal은 단순하지만 강력합니다.컴포넌트의 동작은 바뀌지 않습니다.그리고 JSX 및 일반 JS 파일에서 사용할 수 있습니다.
언급URL : https://stackoverflow.com/questions/43460158/react-intl-vs-react-i18next-for-reactjs-internationalization-i18n
'programing' 카테고리의 다른 글
| XML에서 JavaScript 개체로 (0) | 2023.03.16 |
|---|---|
| 워드프레스에서 별도로 관리하는 두 메뉴를 하나로 통합하여 프런트 엔드 테마에 표시하는 방법은 무엇입니까? (0) | 2023.03.16 |
| 레스트렛, CLAP, Ajax 및 청크 타임아웃 (0) | 2023.03.16 |
| PHP 7 퍼포먼스 (0) | 2023.03.16 |
| 리액트 링크 vs 태그 및 화살표 기능 (0) | 2023.03.16 |