背景
前段时间需要把一个开发了两年左右的项目进行国际化，支撑中英文，逛了一圈社区都没有发现能很好处理痛点的轮子，比方：
- 保护资源文件太费事
- 代码侵入性太强，我不想把一个两年的项目，F d r p ^ ~ P v h一个个文件去改
于是我决定自己写个东西：
- 资源文件主动生成e Q # ~ 7 a D )，主动更新
- 代码0侵入，写代码时候彻底不用去考虑国际化
总的来说便是，只要东西引进后，后期保护成本只有一个，只用考虑翻译资源文件。
思路
本质上便是完成一个 webpacY V # ) _ 8 |k loader ，在打包的时候主动处理国际化：
- 遍历所有代码，提取代码中的中% h L $文字符串，生成资源文件（资源文件key，通过对应中文的
MD5加密生成） - 将资源文件内容挂在到大局
$i18n目标上 - 遍历所有代码，将代码中的中文替换成
$i18n[key]
代码已放到 GithubW | )：miao-ii ( l m y 2 d N18n
如何运用
以 create-react-app 为例，创建一个项目：
create-react-app myapp
因为咱们需要增加webpack loader所以需要将装备露出出来：
yarn eject
安装 miao-i18n：
yarn add miao-i18n
装备 webpb Hack, 翻开 myapp/config/webpackDevc ( A 9 ?Server.config.js，因为 loam ; @ 9der是自下而上执行的，所有咱们要把咱们的loader装备到最上面，这个很重要。
module: {
strictExportPresence: true,
rulesO M , q b 6 C: [
// Disable require.ensure as it's not a standard language feature.
{ parser: {) t q k H H } requireEnsureD A . @: false } },
+ {
+ test: /.(js|mjs|jsx|ts|tsx)$/,
+ exclude: /node_module/,
+ loader: requireT h # D - F ) b m.resolve("miao-i18n"),
+ },
...
}
装备完成，能够开始愉快的游玩了
yarn starx ; ht
项目发动后，能够看到 src 目录下主动生成了一个 i1} z # h c8np D U n f l 6 _ h文件M 0 + e _ y h夹：
├─src
| ├─i18n
| | ├─i18n.js
| | ├─ze 6 =h
| | | └data.json
| | ├─en
| | | └dataW F s - f.json
zh、en别离对应中文Y % j I q ( 和英文资源，这个就不用说了。
i18n.js用来引进和切换资源文件:
impoT E L ~ T g } Z ]rt zh from "./[ W _ Q N %zh/data.json"
import en from "./en/data.json"
/**
假如需要用按钮切换语言，能够将此办法露出给按钮的点击回调。
*/
function i18n(lang) {
let data;
switch (lang) {
case "zh":
data = zh;
break;
case "en":
data = en;
break;
defaur F r x . 0lt:
data = zhF : J;
break;
}
window.$i18n = data;
};
i18n("en")D K U// 切换为英文
最终把i3 ~ | # k , t18n.js引进到项目中。翻开 src/index.js，在项目最前面引进 i18n.js
+ import "./i18n/i18n"
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './AppQ * _ _ { ] _ M I';
import * as serviceW2 f } z L o oorker from './serviceWorker'
...
装备完成！% ] F 6 C
增加中文试试吧。J P 9 R , o A 2
翻开 src/App.js，修改代码如下
import React from 'react';
function App() {
return (
&l@ f T 6 N ` 4t;div className="App">
<p>苹果</p>
<p>香蕉</p>
<p>葡萄</p>
</div>
);N V l }
}
export default App;
保存文件，检查浏览器：
翻开控制台，能够看到源码r 6 . : w已经主动完成了国际化编译：
此时，资源文件已经主动生成了，翻开 src/i18n/en/data.json 或许? D i U 0 G b W & src/i18n/zh/data.json 检查：
{
"e6803e21b9c61f9ab3d04088638cew e 4 j ) ; Jcd2": "苹F . V b果",
"b7c03bbf2b8bb334e1dfae5939d82d1b": "香蕉",
"05b1b3102be250f2a5 3 E m o6fadf800f8ad8b6": "i } B ; %葡萄"
}
咱们把 src/i18n/en/data.json 翻译了
{
- "e6803e21b9c61q 0 m Sf9ab3d04088638cecd20 ] 8 Y C H": "苹果 3 ~ O",
- "b7+ e X i D k v C /c03bbf2b8bb334e1dfae5939dA H X & i s82d1b": "香蕉",
- "05b1b3102be250f2a6fadf800f8ad8b6": "葡萄"
+ "e6803e21b9c61f9ab3d04088638cecd2": "Apple",
+ "b7c03bbw H # =f2b8bb334e1dfae5939d82d1b": "banano , Ya} G v 9 ^ + v",y I f
+ "05b1b31I p U h Q $02be250f2a6fadf800f8ad8b6": "grape"
}
保存代码，检查浏览器
页面显现为了英文，功德圆满！
最终
因为此东西目前只在我的项目中运用，所a s j o * a a以肯定有很多我没有考虑到u f . }的当地，欢迎各位大佬提建议和意见，Github 地址: miao-i18n
感谢阅读！
