vue或react多语言自动化实现扫描代码的多语言-i18next-scanner

实现思路

1. i18next-scanner 自动扫描代码中的中文
2. 中文作为多语言的key，通过crc32转为语音包的key

i18next-scanner 使用

package.json写入script自动运行脚本 npm run scan

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "npm run scan && node build/build.js",
    "scan": "i18next-scanner --config build/i18next-scanner.config.js"
  },

配置

const fs = require('fs');
const { crc32 } = require('crc');
module.exports = {
    input: [
        'src/**/*.{js,jsx,vue}',
        // Use ! to filter out files or directories
        '!src/**/*.spec.{js,jsx,vue}',
        '!src/i18n/**',
        '!**/node_modules/**',
    ],
    output: './', //输出目录
    options: {
        debug: true,
        func: false,
        trans: false,
        lngs: ['cn', 'en'],
        defaultLng: 'cn',
        resource: {
            loadPath: './src/i18n/{{lng}}/{{ns}}.json', //输入路径
            savePath: './src/i18n/{{lng}}/{{ns}}.json', //输出路径
            jsonIndent: 2,
            lineEnding: '\n'
        },
        removeUnusedKeys: true,
        nsSeparator: false, // namespace separator
        keySeparator: false, // key separator
        interpolation: {
            prefix: '{{',
            suffix: '}}'
        }
    },
    transform: function customTransform(file, enc, done) {//自己通过该函数来加工key或value
        "use strict";
        const parser = this.parser;
        const content = fs.readFileSync(file.path, enc);
        parser.parseFuncFromString(content, { list: ['lang', 't'] }, (key, options) => {
            options.defaultValue = key;
            let hashKey=`k${crc32(key).toString(16)}`;
            parser.set(hashKey, options);
        });
        done();
    }
};

i18next-scanner 自动扫描代码中的带lang()格式的多语言。

i18n/index.js 参考

import Vue from "vue";
import VueI18n from "vue-i18n";
import iView from "iview";
import en from './en/translation.json'
import ch from "./cn/translation.json"
import { getLang } from "../utils/help";
import chLocale from "iview/dist/locale/zh-CN";
import enLocale from "iview/dist/locale/en-US";
import crc32 from 'crc/crc32';

let langType = getLang();
Vue.use(iView, {
    locale: (() => {
        if (langType == "en") {
            return enLocale;
        } else {
            return chLocale;
        }
    })()
});
/* 语言包导入 */
Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: getLang(), // set locale
    messages: Object.assign({
        ch: ch,
        en: en
    })
});
// switch (langType) {
//     case 'en':
//         import('./en/translation.json').then(msgs => {
//             i18n.setLocaleMessage("en", msgs.default);
//         })
//         break;
//     case 'ch':
//         import('./cn/translation.json').then(msgs => {
//             i18n.setLocaleMessage("ch", msgs.default);
//         })
//         break;
//     default:
//         break;
// }

export function lang(key) {
    let hashKey = `k${crc32(key).toString(16)}`;
    let words = i18n.t(hashKey);
    if (words == hashKey) {
        words = key;
        console.log(key, "-没翻译")
    }
    return words;
};

export default i18n;

lang 方法封装了i18n的多语言功能，差别是进一步对中文key进行crc32转化，从而实现唯一且单一的key作为语音包的key的索取。

总结

通过以上的方式，可以实现中文作为代码中的多语言的key，而且用中文作为key不会导致索引语音包导致的性能或索取不准确的问题，因为中文会先转化为crc32的key然后对象的再去索引同样以crc32为key的语音包，这样可以实现中文作为代码中的key，却实际上还是以准备的hashkey来索引语音包。

i18next-scanner 是强大的node插件可以对代码中的多语言进行自动索引。具体配置可以自己百度他的github。