react 국제 화 플러그 인 react-i18n-auto 사용 상세 설명

react-i18n-auto 는 중국어 국제 화 에 전문 적 으로 제공 하 는 자동화 방안 으로 국제 화 개발 을 신속하게 교체 하 는 방법 은 다음 과 같다.
설치 하 다.

npm install react-i18n-auto --save-dev

첫 번 째 단계:babel 플러그 인 설정 추가(.babelrc 추가 방식)

 {
 "plugins": [
  "@babel/plugin-transform-runtime",
  "react-i18n-auto",
  "..."
 ]
 }

두 번 째 단계:자동화 설정 i18n.config.js 추가

const generator = require('react-i18n-auto/generator')
const path = require('path')

generator.gen({

 excluded: /node_modules|output/, //      （   ：/node_modules/）

 src: path.resolve(__dirname, './code'), //     （  ）

 outputPath: path.resolve(__dirname, './output'), //         （  ）

})

그리고 node i18n.config.js 를 실행 하여 설정 파일 을 자동 으로 생 성하 고 localePolyfill.js,localeUtils.js,언어 패키지 파일 을 outputPath 디 렉 터 리 에 자동 으로 생 성 합 니 다.
localePolyfill.js 전역 노출 방법$AI,$AI 와 전역 변수 LOCALE(언어 팩),LOCALE버 전(언어 팩 버 전)
더 많은 설정react-i18n-auto github 홈 페이지으로 이동 하 십시오.
세 번 째 단계:웹 팩 설정 을 수정 하여 모든 entry 입구 에 locale Polyfill.js 를 추가 합 니 다.

// webpack.config.js
const path = require('path')
module.exports = {
 entry: {
 main: [
  path.resolve(__dirname, './output/localePolyfill.js'),
  path.resolve(__dirname, './src/index.js')
 ],
 ...
 },

네 번 째 단계:현재 언어 수정(중국 어 는 언어 팩 을 불 러 올 필요 가 없습니다)

import React from 'react'
import en_US from '../output/en_US/locale'
import localeUtils from '../output/localeUtils'

localeUtils.locale(en_US)
// lolale.js
module.exports = {
 'I_2gaaanh': 'Student',
 'I_2aq02r1': 'Teacher'
}

다섯 번 째 단계:유일한 추가 작업 입 니 다.언어 패 키 지 를 동적 으로 불 러 올 때(언어 패 키 지 를 미리 불 러 왔 다 면 이 동작 이 필요 없습니다)
수정 전

// const.js 
export default Const = {
 SelectOptions:[
 {
  name:'  ',
  value:'student',
 },
 {
  name:'  ',
  value:'teacher',
 },
 ]
}

// app.js
import React from 'react'
import Const from './const'

export default class App extends React.Component {
 render () {
 return <select>
  {
  Const.selectOptions.map(item => {
   return <option key={item.value} value={item.value}>
    {item.name}
   </option>
  })
  }
 </select>
 }
}

const 가 상수 이기 때문에 언어 팩 LOCALE 이 업 데 이 트 될 때 const 는 업데이트 되 지 않 습 니 다.$AI 를 수 동 으로 호출 해 야 합 니 다.유사 한 경우 수 동 으로 업데이트 해 야 합 니 다.
수정 후

import React from 'react'
import Const from './const'

export default class App extends React.Component {
 render () {
 return <select>
  {
  Const.selectOptions.map(item => {
   return <option key={item.value} value={item.value}>
   {$AI(item.$_name, item.name)} {/*         */}
   </option>
  })
  }
 </select>
 }
}

//     const.js
//           ，    $_  ，       uuidKey

export default Const = {
 selectOptions: [{
 name: '  ',
 $_name: "I_2gaaanh",
 value: 'student'
 }, {
 name: '  ',
 $_name: "I_2aq02r1",
 value: 'teacher'
 }]
};

ps:에이전트 getter 를 통 해 언어 패 키 지 를 미리 불 러 오 면 5 단 계 를 뛰 어 넘 을 수 있 습 니 다.구체 적 인 방법 은 스스로 시도 할 수 있 습 니 다.
끝나다
컴 파일 전후 코드 대조,원본 코드 오염 되 지 않 음,흔적 없 는 개발

import React from 'react'
export default class App extends React.Component {
 render () {
 return <div>
  <header>    </header>
  <div title='      '>
  <p>    </p>
  </div>
  <footer>{this.state.title}</footer>
 </div>
 }
}

import React from 'react'
export default class App extends React.Component {
 render () {
 return <div>
  <header>{$AI('I_5wtgbv1', '    ')}</header>
  <div title={$AI('I_7reuhi4', '      ')}>
  <p>{$AI('I_4ximl4b', '    ')}</p>
  </div>
  <footer>{this.state.title}</footer>
 </div>
 }
}

이 react 국제 화 플러그 인 react-i18n-auto 사용 에 대한 자세 한 설명 은 여기까지 입 니 다.더 많은 react i18n auto 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!