你不知道的国际化插件 vue-swift-i18n

↓推荐关注↓

vue-swift-i18n RichieChoo/vue-swift-i18n^[1]

前言 💌

如今国际化项目已经成为各个公司必不可少的业务项目，关于国际化项目的解决方案也有很多，目前市场上用的比较多的还是vue-i18n，早在18年第一次接触到有国际化需求的时候，用的也是vue-i18n，编辑器使用的webStorm，所以没想那么多直接用。由于是项目后期加入，最关键的两个问题

• 不断的复制粘贴，命名，替换（偶尔还会写错$符号等 😪）
• 后期开发，代码可读性极差

所以当有其他项目要国际化时，果断放弃vue-i18n，寻找新的出路，今天的主角vue-swift-i18n

为什么用这个插件？

1. 传统i18n，需要将所有出现的国际化的汉字复制取名配置（你有没有取名荒） 

2. 需要区分template，script中汉字，然后手动变更为t(′′)或者this.t('')或者this.t(′′)或者this.t('') 

3. 智能替换：i. 相同val时，新的key, val替换原来的key, val ii. 不同val时，保存新增key, val和原有的key, val 

4. 即使key命名可以大致猜到这里对应的中文是什么？但是时间长了，也会忘记。降低了代码可读性（该插件含showLabel功能，但是需要每次点击，不够智能，依旧没有提升代码的可读性，上源码了！！往下看👇）

使用方法

安装：（商店搜索vue-swift-i18n，或者ctrl+p,输入ext install RichieChoo.vue-swift-i18n 使用：

图片过大，截图处理

插件功能

1. 检测 vue/js 中的需要国际化的汉字，自动生成 json 文件
2. 根据 json 文件检测 vue/js,检测汉字，自动替换成步骤 1 生成的 json 的 key
3. 检测 vue/js 文件中的已替换的 key，展示对应汉字提示弹窗
4. xxx.json 文件中，生成扁平化的 locales 的 xxx_flat.json 文件,方便取值复制
5. 在 vue/js 中提供，提供 t,tt,ttt 代码提示

如何工作的

• 快速更新JSON

  🖤 汉字检索原则

• 位于中的汉字，如汉字123
• 位于中的标签属性的汉字，如
• 位于中的{{与}}之间的汉字，如{{test ? "汉字" : "中文" }}
• 位于中的"与"之间的汉字，'与'之间的汉字
• 过滤单行注释

🖤  i18n JSON更新路径

- 默认：**`[root]/src/locales/zh-cn.json`** 为默认 json 路径
- 当设置defaultLocalesPath、langFile，路径：**`[root]/[defaultLocalesPath]/[langFile]`**

```jsx
// richierc.json项目配置文件，优先级更高
{
 // 指定vue-swift-i18n更新国际化JSON和快速展示国际化JSON的文件目录地址
  "defaultLocalesPath": "src/locales",
 // 指定国际化JSON文件名称
  "langFile": "zh.json",
  "notAlertBeforeUpdateI18n": true,
  "parentDirLevel": 2,
 // 为国际化JSON的value生成唯一key的类型，默认为short，长度为12，一般不需要配置
  "puidType": "short"
}

• 智能替换（高级用法 它来了它来了）

  语法文档：kazupon.github.io/vue-i18n/^[2]

  Tips 这里我是当作一个插件项目来使用的，直接在插件项目中修改，业务项目中只需引入插件，在插件项目中启动业务项目即可，业务中无需配置任何有关插件的内容；也可以直接在业务项目中引入修改！！！！！

  🖤 通过正则对'.vue'和‘.js'的国际化汉字进行分类(修改这里的配置)

  修改前效果：{{$t('task.list.TaskList.55t0l81y8so0')}}
  修改后效果：{{$t('task.list.TaskList.55t0l81y8so0', { i18n: 'i18n-创建多轮对话' })}}
  
  修改前检索关键字：
  文字->z.json unikey   z.json unikey->对应的页面
  修改后检索关键字：
  文字->对应的页面
  
  // 使用不同的语法替换汉字对应的key到不同的位置
  if (reg === propertyRegexp) {
    const prefix = temp.split('=')[0].replace(resoloveReg, ' :');
    const mainStr = temp.split('=')[1].replace(resoloveMainReg, '');
    const result = localeObj[mainStr];
    if (result) {
      **//$t("xx")   template下 属性替换
      return `${prefix}="$t('${result}',{ i18n: 'i18n-${mainStr}'})"`;**
    }
  } else {
    const resultStr = str.replace(resoloveReg, '');
    const result = localeObj[resultStr];
    if (result) {
      **//{{$t("xx")}}   template下 html替换
      if (reg === angleBracketSpaceRegexp) {
        return "{{$t('" + result + "',{ i18n: 'i18n-" + resultStr + "' })}}";
      }**
  
      if (reg === scriptRegexp) {
        //this.$t("xx")   script下 替换
        if (isScript) {
          if (isTypeScript) {
            return (
              **"(window as any).i18n.t('" +
              result +
              "',{ i18n: 'i18n-" +
              resultStr +
              "' })"**
            );
          } else {
            return (
              **"this.$t('" + result + "',{ i18n: 'i18n-" + resultStr + "' })"**
            );
          }
        }
        **//$t("xx")   template下 {{ "汉字" }}替换
        if (isTemplate) {
          return "$t('" + result + "',{ i18n: 'i18n-" + resultStr + "' })";
        }**
      }
    }
  }
  

• 全面展示

  🖤 根据正则匹配文件所有已经替换的i18n key，在后方展示对应含义

  结论

  1、所有文件可通过快捷键或右键直接生成json文件

  2、文件内会自动替换成相关key的内容（手动拼接除外），不用担心拼写错误 🤗

  3、后期迭代，只有右键更新json和文件

  4、代码可通过关键字直接搜索

参考资料

[1]

https://github.com/richiechoo/vue-swift-i18n

[2]

https://kazupon.github.io/vue-i18n/

转自：掘金 自如大前端团队

https://juejin.cn/post/6985463630653292574

- EOF -

推荐阅读  点击标题可跳转

看完本文有收获？请分享给更多人

关注「 iOS大全 」加星标，关注 iOS 动态

点赞和在看就是最大的支持❤️