Google Spreadsheet 및 i18next로 국제화 자동화

5699 단어 react

이 문서는 수동 "복사하여 붙여넣기"국제화 프로세스로 인해 어려움을 겪고 있는 프런트 엔드 개발자를 위한 것입니다. 이 가이드를 통해 한 줄의 스크립트를 실행하면 전체 프로세스가 자동화됩니다.

사용 사례

여러 언어를 지원하는 React 앱(i18next 및 react-i18next 라이브러리 포함)

Google 스프레드시트를 JSON 호스팅 + v4 Google 시트 API 인증으로 설정

주어진 두 가지 방법으로 Google 스프레드시트와 JSON 파일(google-spreadsheet 라이브러리 및 Google 스프레드시트 API 사용) 간에 번역을 자동으로 동기화하는 스크립트:
– 소스 코드에서 key를 스캔하고 스캔한 key를 Google 스프레드시트에 업로드합니다.
– 소스 코드 빌드 시 Google 스프레드시트에서 번역된 문자열을 다운로드합니다.

시작하자

1단계 — i18next 및 react-i18next 라이브러리 설치 및 구성

npx create-react-app react-internationalization
cd react-internationalization
npm install @mui/material @emotion/react @emotion/styled

이렇게 하면 기본 CRA가 생성됩니다. UI 구성 요소를 만들기 위해 MUI 5도 설치했습니다.

npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend

이렇게 하면 i18next 프레임워크와 해당 React 래퍼가 설치됩니다.

다음으로 아래 주어진 구성으로 프로젝트의 최상위 수준에 i18n.js 파일을 만듭니다.

그런 다음 아래와 같이 index.js에서 파일을 가져옵니다.

모든 번역은 지원되는 각 언어에 대한 별도의 JSON 파일과 함께 — _public/locales _—에 저장됩니다.

├── public/
│ ├── locales/
│ ├── en/
| ├── translation.json
|
│ ├── no
| ├── translation.json
|

또한 여러 언어 간의 전환을 반영하는 UI 구성 요소에 대해 App.js에 아래 스니펫을 배치하세요.

2단계 - Google 스프레드시트 설정

다음 구조로 Google 시트를 만듭니다.

스프레드시트 ID를 기록해 둡니다.

1B1njd441X7di47joj9OvQGuJZ-mR9yFQrpr0WNW6c94

v4 Google 시트 API 인증을 처리하려면 service account option을 따르세요. 아래와 같이 생성된 JSON 파일; secret.json은 프로젝트의 최상위 수준에 보관되며 .gitignore에 추가됩니다!

{
  "type": "service_account",
  "project_id": "XXXXXXXXXXXXXXX",
  "private_key_id": "XXXXXXXXXXXXXXX",
  "private_key": "XXXXXXXXXXXXXXX",
  "client_email": "service-account-google-sheet-a@XXXXXXXXXXXX.iam.gserviceaccount.com",
  "client_id": "XXXXXXXXXXXXXXX",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/service-account-google-sheet-XXXXXXXXXXXXX.iam.gserviceaccount.com"
}

3단계 — Google 스프레드시트와 JSON 파일 간의 번역을 동기화하는 자동화된 스크립트

google-spreadsheet는 Google 스프레드시트 API를 사용할 수 있게 해주는 래퍼 라이브러리입니다. 새 시트를 생성하거나 셀과 행을 읽고 쓰고 관리하는 데 사용할 수 있습니다.

npm i google-spreadsheet

프로젝트 최상위에 fetch-google-spreadsheet.js 및 push-google-spreadsheet.js 파일을 생성하고 아래 코드를 삽입합니다.

package.json에 스크립트 삽입

{
"start": "npm run fetch:i18n && react-scripts start",
"build": "npm run fetch:i18n && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"push:i18n": "node push-google-spreadsheet.js",
"fetch:i18n": "node fetch-google-spreadsheet.js"
}

개발자: npm run push:i18n를 실행한 다음 번역을 요청합니다.
번역기: 스프레드시트에 번역을 입력합니다

이것입니다. 애플리케이션을 빌드/시작할 때마다 npm run fetch:i18n가 실행되고 가장 최근 번역이 빌드에 적용됩니다. 도움이 되었기를 바랍니다.

소스 코드!

전체 소스 코드는 여기https://github.com/anlisha-maharjan/react-internationalization-googlespreadsheet-i18next에서 사용할 수 있습니다.

자세한 정보!

<올>

List of all config options available for i18next_._

v4 google sheets API Authentication using service account.

포스트Automating Internationalization with Google Spreadsheet and i18next.가 Anlisha Maharjan에 처음 등장했습니다.

Reference

이 문제에 관하여(Google Spreadsheet 및 i18next로 국제화 자동화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anlishamaharjan/automating-internationalization-with-google-spreadsheet-and-i18next-2kbk

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Google Spreadsheet 및 i18next로 국제화 자동화

Reference

좋은 웹페이지 즐겨찾기