前端项目自动生成i18n国际化语言文件插件

好久没上掘金了，之前一直在忙着新业务，没时间（其实自己清楚这些都只是借口，就是犯懒了），今天又带来了一个小插件，用于提取项目中所有的i18n语言文本并且翻译生成所有语种文件，如果觉得翻译接口翻的不好的可以手动修改，插件不会覆盖已有的翻译语言，完美兼容旧项目代码，希望可以提升些工作效率，早点下班，哈哈哈。

背景

因为新项目全都是需要中英双语的，之前的同事都是自己手写如this.$t(“项目”)的形式，然后在中文和英文语言配置文件中写入语言配置，新需求下来，我手都快写断了，然而测试还在不停的报有些地方漏掉了没翻译，于是便做了个插件自动生成语言配置文件了，早点下班不香吗。

想看代码的可以直接前往pikaz-translate仓库

思路

插件思路很简单，首先递归遍历需要翻译的目录，找出目录下面的所有文件，然后提取所有文件中的内容，通过正则匹配获取类似this.$t(""),i18n.t("")的i18n插件写法中的文本，然后生成json文件，并且通过翻译接口将中文json文件，翻译成英文json文件，话不多说，上代码。

递归目录下的所有文件并提取文本

const path = require('path')
const fs = require('fs')

// node执行路径
const dirPath = process.cwd()

// 语言json文件key
const langKey = []

/**
 * @description: 文件夹遍历
 * @param {content} content/文件夹路径
 * @return {type}
 */
const fileTra = (content) => {
    //根据文件路径读取文件，返回文件列表
    return new Promise((resolve, reject) => {
        fs.readdir(content, async function (err, files) {
            if (err) {
                console.warn(err)
                reject(err)
            } else {
                //遍历读取到的文件列表
                for (let i = 0; i < files.length; i++) {
                    //获取当前文件的绝对路径
                    const filedir = path.join(content, files[i])
                    //根据文件路径获取文件信息
                    const isFile = await fileRead(filedir)
                    // 如果是文件夹，递归遍历该文件夹下面的文件
                    if (!isFile) {
                        await fileTra(filedir)
                    } else {
                        // 读取文件
                        const fileContent = fs.readFileSync(filedir, 'utf-8')
                        // 提取i18n语言文字
                        const lang = getTranslateKey(fileContent)
                        lang.forEach((item) => {
                            if (langKey.indexOf(item) === -1 || item === '') {
                                langKey.push(item)
                            }
                        })
                    }
                }
                resolve(files)
            }
        })
    })
}

/**
 * @description: 匹配t('')或t("")里的内容
 * @param {type}
 * @return {type}
 */
const getTranslateKey = (source) => {
    let result = []
    const reg = /(\$|\.)t\((\'|\")([^\)\'\"]+)(\'|\")(,([^\)\'\"]+))?\)/gm
    let matchKey
    while ((matchKey = reg.exec(source))) {
        result.push(matchKey[3])
    }
    return result
}

/**
 * @description: 判断是文件还是文件夹
 * @param {String} filedir/文件路径
 * @return {type}
 */
const fileRead = (filedir) => {
    return new Promise((resolve, reject) => {
        fs.stat(filedir, function (err, stats) {
            if (err) {
                console.warn('获取文件stats失败')
                reject(err)
            } else {
                //文件
                const isFile = stats.isFile()
                // 文件夹
                const isDir = stats.isDirectory()
                if (isFile) {
                    resolve(true)
                }
                if (isDir) {
                    resolve(false)
                }
            }
        })
    })
}

/**
 * @description: 将中文json文件翻译写入英文json文件
 * @param {String} zh/中文语言文件路径
 * @param {String} en/英文语言文件路径
 * @param {String} lang/语言种类，默认英文
 * @return {type}
 */
const pikazI18nTranslate = async (zh, en, lang = 'en') => {
    const zhPath = path.join(dirPath, zh)
    let zhJson = fs.readFileSync(zhPath, 'utf-8')
    zhJson = zhJson ? JSON.parse(zhJson) : {}
    const enPath = path.join(dirPath, en)
    let enJson = fs.readFileSync(enPath, 'utf-8')
    enJson = enJson ? JSON.parse(enJson) : {}
    const key = []
    Object.keys(zhJson).forEach((k) => {
        if (Object.keys(enJson).indexOf(k) === -1) {
            key.push(k)
        }
    })
    for (let i = 0; i < key.length; i++) {
        const e = await translate(key[i], lang)
        enJson[key[i]] = e
    }
    return new Promise((resolve, reject) => {
        const err = fs.writeFileSync(enPath, JSON.stringify(enJson), 'utf8')
        if (err) {
            reject(err)
        }
        resolve()
    })
}

翻译中文json文件为英文

const axios = require('axios')

/**
 * @description: 翻译接口
 * @param {String} zh/翻译文本
 * @param {String} lang/翻译语种
 * @param {String} i/请求次数，超过三次不再请求
 * @return {type}
 */
const translate = (zh, lang) => {
    return new Promise((resolve, reject) => {
        axios
            .get('http://fanyi.youdao.com/translate', {
                params: {
                    doctype: 'json',
                    type: lang,
                    i: zh,
                },
            })
            .then(async (res) => {
                resolve(res.data.translateResult[0][0].tgt)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

/**
 * @description: 将中文json文件翻译写入英文json文件
 * @param {String} zh/中文语言文件路径
 * @param {String} en/英文语言文件路径
 * @param {String} lang/语言种类，默认英文
 * @return {type}
 */
const pikazI18nTranslate = async (zh, en, lang = 'en') => {
    const zhPath = path.join(dirPath, zh)
    let zhJson = fs.readFileSync(zhPath, 'utf-8')
    zhJson = zhJson ? JSON.parse(zhJson) : {}
    const enPath = path.join(dirPath, en)
    let enJson = fs.readFileSync(enPath, 'utf-8')
    enJson = enJson ? JSON.parse(enJson) : {}
    const key = []
    Object.keys(zhJson).forEach((k) => {
        if (Object.keys(enJson).indexOf(k) === -1) {
            key.push(k)
        }
    })
    for (let i = 0; i < key.length; i++) {
        const e = await translate(key[i], lang)
        enJson[key[i]] = e
    }
    return new Promise((resolve, reject) => {
        const err = fs.writeFileSync(enPath, JSON.stringify(enJson), 'utf8')
        if (err) {
            reject(err)
        }
        resolve()
    })
}

完成

主要逻辑大致就是这样，需要注意的点有有几个：

第一：项目中的i18n语言文本最好使用中文，如this.$t(“使用中文”),这样语义化更好，也更方便查看项目以及生成语言配置文件，如果旧项目中使用的是英文，也不用担心，只需要调用提取文本的函数pikazI18nLang，将文本提取出来，再自己写入对应的中英文即可，当然，会比较麻烦，但是旧项目，也只能忍了。。。

第二：翻译接口使用的是公开的翻译接口，对于同一个ip请求频率有做限制，如果一次翻译不成功，可以试着执行第二次，或者开代理更换自己的ip，当然，想要追求更好的翻译质量，付费的翻译api当然是更好的了，可以fork本项目自己简单的改一下翻译函数即可。

快速使用小诀窍

在vscode编辑器中，打开用户片段

选择新建全局代码片段文件，起一个文件名比如i18n

在片段文件中写入

{
	"Print to $t": {
		"prefix": "t",
		"body": [
			"$$t('$1')",
		],
		"description": "Log output to $t"
	}
}

使用效果如下，输入t，回车选择第一个代码片段即可输出$t(’’)，配合本插件使用，就这个feel倍儿爽：

效果

需提取的目标目录下文件中的i18n文本

在一个js文件中调用插件函数

执行该脚本文件

最后效果：

生成的中文json文件内容

生成的英文json文件内容

项目完整代码

pikaz-translate

本插件已经上传至npm，直接搜索pikaz-translate即可，也有一如既往比较完善的文档，以及示例代码，使用起来也不难。

最后

七夕了，祝愿大家七夕快乐，单身狗只能继续coding了，苦中作乐，哈哈。