楼主最近新接了一个项目，从0开始做，需要做多语言的国际化，今天搞了一下，基本达到了想要的效果， 在这里简单分享下：
一些探索
也说不上是探索吧，就Google了一波， 去gayHub 上找了一个比较成熟的库 react-i18next， 写了一些代码，现将过程分享一下， 附带详细代码，手把手教你实现国际化。
先睹为快
先看一下最后的成果：
// ... import i18n from '@src/i18n'; // xxx component console.log('哈哈哈哈哈i18n来一发:', i18n.t('INVALID_ORDER')); // ... render() { // ... <button> {i18n.t('INVALID_ORDER')} <button> }
控制台中：
对应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, <img src=https://www.jb51.net/{process.env.PUBLIC_URL + '/img/logo.png'} />. // 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 里面的逻辑：