阅读 5260

前端国际化:自动管理工具

背景

前段时间需要把一个开发了两年左右的项目进行国际化,支持中英文,逛了一圈社区都没有发现能很好解决痛点的轮子,比如:

  • 维护资源文件太麻烦
  • 代码侵入性太强,我不想把一个两年的项目,一个个文件去改

于是我决定自己写个工具:

  • 资源文件自动生成,自动更新
  • 代码0侵入,写代码时候完全不用去考虑国际化

总的来说就是,只要工具引入后,后期维护成本只有一个,只用考虑翻译资源文件。

思路

本质上就是实现一个 webpack loader ,在打包的时候自动处理国际化:

  • 遍历所有代码,提取代码中的中文字符串,生成资源文件(资源文件key,通过对应中文的MD5加密生成)
  • 将资源文件内容挂在到全局 $i18n对象上
  • 遍历所有代码,将代码中的中文替换成 $i18n[key]

代码已放到 Githubmiao-i18n

如何使用

create-react-app 为例,创建一个项目:

create-react-app myapp
复制代码

由于我们需要添加webpack loader所以需要将配置暴露出来:

yarn eject
复制代码

安装 miao-i18n

yarn add miao-i18n
复制代码

配置 webpack, 打开 myapp/config/webpackDevServer.config.js,由于 loader是自下而上执行的,所有我们要把我们的loader配置到最上面,这个很重要。

module: {
    strictExportPresence: true,
    rules: [
    // Disable require.ensure as it's not a standard language feature.
    { parser: { requireEnsure: false } },
+    {
+    test: /\.(js|mjs|jsx|ts|tsx)$/,
+    exclude: /node_module/,
+    loader: require.resolve("miao-i18n"),
+    },
...
}    
复制代码

配置完成,可以开始愉快的玩耍了😊

yarn start	
复制代码

项目启动后,可以看到 src 目录下自动生成了一个 i18n文件夹:

├─src
|  ├─i18n
|  |  ├─i18n.js
|  |  ├─zh
|  |  | └data.json
|  |  ├─en
|  |  | └data.json
复制代码

zhen分别对应中文和英文资源,这个就不用说了。

i18n.js用来引入和切换资源文件:

import zh  from "./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;

    default:
      data = zh;
      break;
  }
  window.$i18n = data;
};


i18n("en")// 切换为英文
复制代码

最后把i18n.js引入到项目中。打开 src/index.js,在项目最前面引入 i18n.js

+ import "./i18n/i18n"
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker'
...
复制代码

配置完成!🍾🍾🍾

添加中文试试吧。

打开 src/App.js,修改代码如下

import React from 'react';
function App() {
  return (
    <div className="App">
      <p>苹果</p>
      <p>香蕉</p>
      <p>葡萄</p>
    </div>
  );
}
export default App;
复制代码

保存文件,查看浏览器:

打开控制台,可以看到源码已经自动完成了国际化编译:

此时,资源文件已经自动生成了,打开 src/i18n/en/data.json 或者 src/i18n/zh/data.json 查看:

{
    "e6803e21b9c61f9ab3d04088638cecd2": "苹果",
    "b7c03bbf2b8bb334e1dfae5939d82d1b": "香蕉",
    "05b1b3102be250f2a6fadf800f8ad8b6": "葡萄"
}
复制代码

我们把 src/i18n/en/data.json 翻译了

{
-    "e6803e21b9c61f9ab3d04088638cecd2": "苹果",
-    "b7c03bbf2b8bb334e1dfae5939d82d1b": "香蕉",
-    "05b1b3102be250f2a6fadf800f8ad8b6": "葡萄"
+    "e6803e21b9c61f9ab3d04088638cecd2": "Apple",
+    "b7c03bbf2b8bb334e1dfae5939d82d1b": "banana",
+    "05b1b3102be250f2a6fadf800f8ad8b6": "grape"
}
复制代码

保存代码,查看浏览器

页面显示为了英文,大功告成!🙂

最后

由于此工具目前只在我的项目中使用,所以肯定有很多我没有考虑到的地方,欢迎各位大佬提建议和意见,Github 地址: miao-i18n

感谢阅读!🌹

文章分类
前端
文章标签