Vue i18n-collect tool development

Project address https://github.com/goblin-pitcher/i18n-collector
The old project introduced i18n after internationalization, all Chinese packages in the project need to be $t('中文') method, the objects are different, and the packaging methods are also different:

1. In vue of template , directly to Chinese package $t('中文')
2. In the component code of vue c4d0862ba91ce8ae33160882ac534202---, since $t is imported globally, it needs to be wrapped as this.$t('中文')
3. For the pure js part, you need to import i18n module, and wrap it in Chinese i18n.t('中文')
4. For strings with numbers, such as [ 共计${count}条数据 ], it needs to be converted to the structure of $t('共计count条数据', {count: 100}) . The code before conversion may have different representations in different places, such as in vue In the ---b816c9fd6844adbbb57f4da64c451b01 vue of template , the entry before the conversion may be like this: [ 共计{{count}}条数据 ]

problem analysis

Faced with such problems, the first thing that comes to mind is to convert the code into a ast tree, process the Chinese strings in it, and then convert it into code, but the following problems will actually be encountered:

1. 一般的parser（如@bable/parser ） js jsx文件， vue模板，利用vue-loader the .vue file into .js although the file can be parsed with @bable/parser , but it is converted into a .js file without the code after the conversion The relevant converter converts it into .vue code, which does not meet our needs
2. Even if there is a parser for the .vue file (such as vue-eslint-parser ), but there is no corresponding traverse and generator tools, the parsed ast cannot be converted into code
3. Even if there are .vue file parser, traverse, generator supporting tools, the regenerated vue code format has a high probability that it cannot meet the eslint verification, which needs to be automatically formatted fix

Solutions

Through the analysis of the current problems, there are two problems currently facing:

1. Need to have .vue file matching analysis and generation tools
2. Solve the format problem of the converted code eslint

Problem 2 can be achieved by running the eslint --fix command in the project when the processed .vue file is generated. If the project does not verify the format, it will not be installed eslint , but if the format is verified, eslint will be installed, that is, the eslint --fix command can be executed.

The current main contradiction is problem 1, and observation problem 1, .vue in the file js the file has a matching conversion tool, the main contradiction is concentrated in template , and at present Although there is no generation tool for template , it can be regarded as html parsing, template parsing of the feature as a plugin for html parser .

usage

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

parameter

parameter name	shorthand	illustrate	Defaults
dir	d	Directories that need to be internationalized	./
ignoredir	i	Files or folders that need to be ignored such as -i car.js will ignore all files ending with car.js	Whether this parameter is passed or not, it will be ignored i18n folder
fix	f	Whether to automatically execute eslint after running collect --fix, enabled by default, --fix false closes eslint execution	true

configure

The new i18n-collect.config.js file can be passed in the specific configuration, the default configuration is as follows:

 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' }
  }
};