关于前端:vue-i18ncollect工具开发

我的项目地址https://github.com/goblin-pitcher/i18n-collector
老我的项目引入i18n国际化后，须要对我的项目中所有中文包裹$t('中文')办法，对象不同，包裹的办法也有差别：

1. 在vue的template中，间接对中文包裹$t('中文')
2. 在vue的组件代码中，因为$t是全局引入，因而需包裹成this.$t('中文')
3. 对于纯js局部，需import i18n模块，并对中文包裹i18n.t('中文')
4. 对于带数字的字符串，如【共计${count}条数据】，需转换为$t('共计count条数据', {count: 100})的构造，转换前的代码在不同中央可能有不一样的示意，比方在vue的template中，转换前的词条可能是这样：【共计{{count}}条数据】

问题剖析

面对此类问题，首先想到的天然是将代码转换成ast树，对其中的中文字符串进行解决，再转换为代码，但理论会遇到以下几个问题：

1. 个别的parser（如@bable/parser）只能解决js或jsx文件，无奈解决vue模板，利用vue-loader将.vue文件转换成.js文件尽管能够配合@bable/parser进行解析，但转换成.js文件后的代码，没有相干的转换器将其反过来转换成.vue代码，这和咱们的需要不符
2. 即便有.vue文件的parser（如vue-eslint-parser），然而没有对应的traverse和generator工具，不能将解析的ast反过来转换成代码
3. 即便有.vue文件的parser、traverse、generator配套工具，从新生成的vue代码格局很大概率无奈满足eslint校验，须要主动进行格局修改

解决思路

通过对以后问题的剖析，目前面临的问题有两个：

1. 须要有.vue文件配套的解析、生成工具
2. 解决转换后代码的eslint格局问题

问题2能够通过在生成解决后的.vue文件时，运行我的项目中的eslint --fix命令实现，若我的项目不校验格局，天然不会装置eslint，但若校验格局，则必定会装置eslint，也就是能够执行eslint --fix命令。

以后主要矛盾是问题1，而察看问题1，.vue文件中js文件有配套的转换工具，主要矛盾集中在template上，而目前尽管没有template的生成工具，但能够将其视作html解析，template个性的解析作为html parser的插件实现。

用法

npm i git+https://github.com/goblin-pitcher/i18n-collector.git -D---------------------------------npx i18n-collect

参数

配置

新建i18n-collect.config.js文件可传入具体配置，默认配置如下：

const defConfig = {  // 转换当前目录下的文件  dir: './',  // 疏忽项  ignoredir: [],  // 是否执行eslint --fix  fix: true,  // 收集中文词条的文件名  output: 'zh-CN.js',  // 文件解决配置  file: {    // 模板中包裹中文的函数名，如$t('中文')    template: { prefix: "$t" },    // 对于纯js文件的解决    js: {      // 若有中文词条须要提取，须要先引入i18n相干包能力包裹，该配置为增加引入文件的配置      // 默认引入时增加 import {i18n} from '@/utils/i18n.utils'      addImport: {        from: "@/utils/i18n.utils",        data: ["i18n"],      },      // 包裹中文词条的办法，如i18n.t('中文')      prefix: "i18n.t",    },    // .vue文件中script包裹中文的办法, 如this.$t('中文')    // 遇到sparePrefix配置，即i18n.t（'中文'）的字段，也会当作已包裹转换方法的字符串，而不会再用this.$t包裹一次    vue: { prefix: "this.$t", sparePrefix: 'i18n.t' }  }};