实战案例_自动国际化|前端工程化 | 前端进阶之旅

互联网产品开发完以后可能会为不同地区的人提供服务，不同地区的语言不同，这就对软件提出了支持国际化的需求。

国际化要把软件中的文字、货币符号、数字等转成当地所支持的格式，对前端代码来说，需要把所有界面上的字符串字面量转成根据 locale 动态获取的。如果代码中有很多需要改动的代码，那工作量还是很大的。

我们知道 babel 可以用于分析代码和转换代码，那么基于 babel 自然可以做到自动的国际化。

# 思路分析

要转换的是字符串，主要是 StringLiteral 和 TemplateLiteral 节点，把它们替换成从资源包取值的形式。

比如：

const a = '中文';

@前端进阶之旅: 代码已经复制到剪贴板

替换为：

import intl from 'intl';

const a = intl.t('intl1');

@前端进阶之旅: 代码已经复制到剪贴板

而模版字符串

const name = 'babel';
const str = `你好 ${name}`;

@前端进阶之旅: 代码已经复制到剪贴板

会替换为从 bundle 中取值的方式。

const name = 'babel';
const str = intl.t('intl2', name);

@前端进阶之旅: 代码已经复制到剪贴板

bundle 中的值为：

// zh_CN.js
module.exports = {
    intl1: '中文',
    intl2: 'hello {placeholder}'
}
// en_US.js
module.exports = {
    intl1: 'English',
    intl2: 'hello {placeholder}'
}