react 国际化了解一下

CrazyCodes 发布于2019-08-29 16:44 / 769人阅读

摘要：先睹为快先看一下最后的成果来一发控制台中对应中的信息开始原理原理其实很简单字符串替换。拉取远程的国际化文件到本地，再根据语言做一个映射就可以了。

背景

楼主最近新接了一个项目，从0开始做，需要做多语言的国际化，今天搞了一下，基本达到了想要的效果，在这里简单分享下：

一些探索

也说不上是探索吧，就Google了一波， GitHub 上找了一个比较成熟的库 react-i18next，写了一些代码，现将过程分享一下，附带详细代码，手把手教你实现国际化。

先睹为快

先看一下最后的成果：

</>复制代码 
 // ...
import i18n from "@src/i18n";
// xxx component
console.log("i18n来一发:", i18n.t("INVALID_ORDER"));
render() { 
  // ...
  
}

控制台中：

对应json 中的信息：

开始原理

原理其实很简单：字符串替换。

拉取远程的国际化json文件到本地，再根据语言做一个映射就可以了。

废话不多说，来看代码吧。

先简单看一下目录结构：

先看一下 config 里面的相关代码：

env.js:

</>复制代码 
"use strict";
const fs = require("fs");
const path = require("path");
const paths = require("./paths");
const languages = require("./languages");
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve("./paths")];
const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
  throw new Error(
    "The NODE_ENV environment variable is required but was not specified."
  );
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
var dotenvFiles = [
  `${paths.dotenv}.${NODE_ENV}.local`,
  `${paths.dotenv}.${NODE_ENV}`,
  // Don"t include `.env.local` for `test` environment
  // since normally you expect tests to produce the same
  // results for everyone
  NODE_ENV !== "test" && `${paths.dotenv}.local`,
  paths.dotenv,
].filter(Boolean);
// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.  Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require("dotenv-expand")(
      require("dotenv").config({
        path: dotenvFile,
      })
    );
  }
});
// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebookincubator/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || "")
  .split(path.delimiter)
  .filter(folder => folder && !path.isAbsolute(folder))
  .map(folder => path.resolve(appDirectory, folder))
  .join(path.delimiter);
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || "development",
        // Useful for resolving the correct path to static assets in `public`.
        // For example, .
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
        LANGUAGE: {
          resources: languages.resources,
          defaultLng: languages.defaultLng
        },
        COUNTRY: process.env.COUNTRY
      }
    );
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = {
    "process.env": Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };
  return { raw, stringified };
}
module.exports = getClientEnvironment;

主要看lannguage 相关的代码就好了，其他的都create-react-app 的相关配置，不用管。

再看下 language.js 里面的逻辑：

</>复制代码 
const path = require("path");
const paths = require("./paths");
const localesHash = require("../i18n/localesHash");
const resourcesHash = require("../i18n/resourcesHash");
const COUNTRY = process.env.COUNTRY || "sg";
const country = (COUNTRY).toUpperCase();
const defaultLng = localesHash[country][0];
const langs = [
  "en",
  "id"
];
const prefixLangs = [];
const entries = {};
for (let i = 0, len = langs.length; i < len; i++) {
  const prefixLang = `dict_${langs[i]}`
  prefixLangs.push(prefixLang)
  entries[prefixLang] = path.resolve(paths.appSrc, `../i18n/locales/${langs[i]}.json`)
}
const resources = {
  [defaultLng]: {
    common: resourcesHash[defaultLng]
  }
}
exports.resources = resources;
exports.defaultLng = defaultLng;

逻辑也比较简单，根据语言列表把对应的json 内容加进来。作为示例，这里我设置的是英文和印尼语。

下面看 i18n 文件里面的内容：

locales 里面放的是语言的json 文件，内容大概是：

</>复制代码 
{
    "msg_Created": "Pesanan telah terbuat"
    // ...
}

localesHash.js:

</>复制代码 
module.exports = {
  SG: ["en"],
  ID: ["id"]
}

resourcesHash.js:

</>复制代码 
module.exports = {
  "en": require("./locales/en.json"),
  "id": require("./locales/id.json")
}

index.js

</>复制代码 
const path = require("path")
const fs = require("fs")
const fetch = require("isomorphic-fetch")
const localesHash = require("./localesHash")
const argv = process.argv.slice(2)
const country = (argv[0] || "").toUpperCase()
const i18nServerURI = locale => {
  const keywords = {
    "en": "en",
    "id": "id"
  }
  const keyword = keywords[locale]
  return keyword === "en"
    ? "your/transify/website/json/download"
    : `your/transify/website/${keyword}/json/download`
}
const fetchKeys = async (locale) => {
  const uri = i18nServerURI(locale)
  console.log(`Downloading ${locale} keys...
${uri}`)
  const respones = await fetch(uri)
  const keys = await respones.json()
  return keys
}
const access = async (filepath) => {
  return new Promise((resolve, reject) => {
    fs.access(filepath, (err) => {
      if (err) {
        if (err.code === "EXIST") {
          resolve(true)
        }
        resolve(false)
      }
      resolve(true)
    })
  })
}
const run = async () => {
  const locales = localesHash[country] || Object
    .values(localesHash)
    .reduce(
      (previous, current) =>
        previous.concat(current), []
    )
  if (locales === undefined) {
    console.error("This country is not in service.")
    return
  }
  for (const locale of locales) {
    const keys = await fetchKeys(locale)
    const data = JSON.stringify(keys, null, 2)
    const directoryPath = path.resolve(__dirname, "locales")
    if (!fs.existsSync(directoryPath)) {
      fs.mkdirSync(directoryPath)
    }
    const filepath = path.resolve(__dirname, `locales/${locale}.json`)
    const isExist = await access(filepath)
    const operation = isExist ? "update" : "create"
    console.log(operation)
    fs.writeFileSync(filepath, `${data}
`)
    console.log(`${operation}
${filepath}`)
  }
}
run();

再看下src 中的配置：

i18nn.js

</>复制代码 
import i18next from "i18next"
import { firstLetterUpper } from "./common/helpers/util";
const env = process.env;
let LANGUAGE = process.env.LANGUAGE;
LANGUAGE = typeof LANGUAGE === "string" ? JSON.parse(LANGUAGE) : LANGUAGE
const { defaultLng, resources } = LANGUAGE
i18next
  .init({
    lng: defaultLng,
    fallbackLng: defaultLng,
    defaultNS: "common",
    keySeparator: false,
    debug: env.NODE_ENV === "development",
    resources,
    interpolation: {
      escapeValue: false
    },
    react: {
      wait: false,
      bindI18n: "languageChanged loaded",
      bindStore: "added removed",
      nsMode: "default"
    }
  })
function isMatch(str, substr) {
  return str.indexOf(substr) > -1 || str.toLowerCase().indexOf(substr) > -1
}
export const changeLanguage = (locale) => {
  i18next.changeLanguage(locale)
}
// Uppercase the first letter of every word. abcd => Abcd or abcd efg => Abcd Efg
export const tUpper = (str, allWords = true) => {
  return firstLetterUpper(i18next.t(str), allWords)
}
// Uppercase all letters. abcd => ABCD
export const tUpperCase = (str) => {
  return i18next.t(str).toUpperCase()
}
export const loadResource = lng => {
  let p;
  return new Promise((resolve, reject) => {
    if (isMatch(defaultLng, lng)) resolve()
    switch (lng) {
      case "id":
        p = import("../i18n/locales/id.json")
        break
      default:
        p = import("../i18n/locales/en.json")
    }
    p.then(data => {
      i18next.addResourceBundle(lng, "common", data)
      changeLanguage(lng)
    })
      .then(resolve)
      .catch(reject)
  })
}
export default i18next

</>复制代码 
 // firstLetterUpper
export const firstLetterUpper = (str, allWords = true) => {
  let tmp = str.replace(/^(.)/g, $1 => $1.toUpperCase())
  if (allWords) {
    tmp = tmp.replace(/s(.)/g, $1 => $1.toUpperCase())
  }
  return tmp;
}

这些准备工作做好后, 还需要把i18n 注入到app中：

index.js:

</>复制代码 
import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import rootReducer from "./common/redux/reducers";
import { configureStore } from "./common/redux/store";
import { Router } from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
import "./common/styles/index.less";
import App from "./App";
export const history = createBrowserHistory();
const ROOT = document.getElementById("root");
render(
  
    
      
        
      
    
  ,
  ROOT
);

如何使用

加入上面的代码后，控制台会有一些log 信息，表示语言已经加载好了。

在具体的业务组件中，使用方法是：

</>复制代码 
 // ...
import i18n from "@src/i18n";
console.log("哈哈哈哈哈i18n来一发:", i18n.t("INVALID_ORDER"));

控制台中：

对应json 中的信息：

后面你就可以愉快的加各种词条了。

Tips

我们在src 中的文件中引入了src 目录外的文件，这是create-react-app 做的限制，编译会报错，把它去掉就好了：

关于多语言的设置

代码示例：

</>复制代码 
i18next.init({
  lng: "en",
});

初始化的时候可以设置默认语言，如需要切换系统语言，可以调用 i18n 提供的方法：

</>复制代码 
import { changeLanguage } from "@src/i18n";
// ...
  // 设置为印尼语
  changeLanguage("id");

为了保存语言设置, 可以把 language 保存在 localStorage 中, 使用的时候直接从 storage 里取。

结语

这里作为例，就是把语言的json 文件下载下来放到locales 目录里，如果想实时拉取，要保证文件下载完之后再render app.

类似：

</>复制代码 
loadResource(getLocale())
  .then(() => {
    import("./app.js")
  })

当然你也可以免了这一步，直接下载好放到工程里来。

大概就是这样，以上就是实现国际化的全部代码，希望对大家有所帮助。

GPU云服务器云服务器闪一下介绍一下整理一下测试一下

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113950.html

react 国际化了解一下

摘要：先睹为快先看一下最后的成果来一发控制台中对应中的信息开始原理原理其实很简单字符串替换。拉取远程的国际化文件到本地，再根据语言做一个映射就可以了。背景楼主最近新接了一个项目，从0开始做，需要做多语言的国际化，今天搞了一下，基本达到了想要的效果，在这里简单分享下：一些探索也说不上是探索吧，就Google了一波， GitHub 上找了一个比较成熟的库 react-i18next，...

魏明 2019-08-23 11:58 评论0 收藏0
React项目国际化(antd)多语言开发

摘要：本国际化方案仅针对技术栈，且不会涉及服务端国际化内容。引入多语言环境的数据虽然我只用到了文本翻译的功能，以为就不需要加载这些数据，但后来发现这是必须的步骤。前言最近新接了一个项目，从0开始做，需要做多语言的国际化，今天搞了一下，基本达到了想要的效果，在这里简单分享下： showImg(https://segmentfault.com/img/bVbuiJB); 背景国际化方案国际...

tracymac7 2019-08-02 15:21 评论0 收藏0
React项目国际化(antd)多语言开发

摘要：本国际化方案仅针对技术栈，且不会涉及服务端国际化内容。引入多语言环境的数据虽然我只用到了文本翻译的功能，以为就不需要加载这些数据，但后来发现这是必须的步骤。前言最近新接了一个项目，从0开始做，需要做多语言的国际化，今天搞了一下，基本达到了想要的效果，在这里简单分享下： showImg(https://segmentfault.com/img/bVbuiJB); 背景国际化方案国际...

wushuiyong 2019-08-23 18:17 评论0 收藏0
程序员到底要学什么？

摘要：程序员到底要学什么程序员到底要学什么或者说，程序员到底要学多少东西呢这个问题问到你了吗今天就来简单聊一聊程序员的学习之路。程序员的种类很多，这里只讲前端工程师和后端工程师，因为自己也就接触到这两个层面。 ...

mo0n1andin 2021-09-28 09:36 评论0 收藏0

发表评论

登陆后可评论

0条评论

CrazyCodes

男|高级讲师

我要关注我要私信

TA的文章

tensorflow

阅读 3109·2023-04-25 19:45
润生集团2021年度业绩内部汇报 | 探索·前行·创造

阅读 2836·2021-11-19 09:40
eukhost：英国vps，英国独立服务器，2核2G/30G内存，£10.13/月起，独立服务器£6

阅读 833·2021-10-14 09:49
IIC协议详解，附单片机软件模拟源码

阅读 3137·2021-09-30 09:47
侄儿子非要抢我手机玩吃鸡！但他才六岁菜的很。我花五分钟写了个游戏，他玩了一天。

阅读 2431·2021-09-26 09:55
虚拟主机如何绑定域名-如何进行域名与虚拟主机绑定？

阅读 1307·2021-09-22 16:01
【jQuery学习日记】jQuery实现滚动动画

阅读 2873·2019-08-30 14:19
react 国际化了解一下

阅读 770·2019-08-29 16:44

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

react 国际化了解一下

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章