Vue project automatic internationalization command line toolvue-i18n-code-shift, welcome to use and feedback, can also help click a star

background

One of the tasks during the internationalization of the front-end project is to replace the Chinese string literal with a reference to the corpus resource $t(‘common.text’). For large projects (400 files and 12,000 lines of code in my own), manual manipulation is time-consuming and error-prone. Wouldn’t it be nice to have a tool for automatic internationalization?

Train of thought

Project planning

  1. Achieve an automated front-end internationalization of the whole process solution
  2. Open source and make it available to other projects

Program planning

  • Rely on regular matching: Regular schemes were quickly abandoned due to the complexity and maintainability issues of code flexibility
  • The source code is first converted to AST, then analyzed and transformed
    1. Comb through the functions that automatic internationalization tools need to provide (extract, replace, export corpus, import corpus, etc.)

    2. Investigate the implementation ideas of internationalization tools in the industry

implementation

  1. It mainly deals with.vue and.js files. The style codes in.vue generally do not involve Chinese string literals and are directly ignored<style></style>Part of the
  2. Use vue-template-complier to parse. Vue files, using TS to parse JS code into AST. Vue-template-complier also provides a way to parse Vue template code into AST
  3. useString.prototype.replace()Direct operation source replacement,AST as promised
  4. Import and export is to process corpus resources and then use the Node-Xlsx build and export API
  5. Others are packages common to command line tools

refactoring

why

  • As used in point 4 aboveString.prototype.replace(), the code is complex and difficult to maintain, want to find a better solution
  • For less common syntax, extract and replace can be problematic, such as
[' invalid ', 'valid '][+scope.row.index]' template ${a} string 'Copy the code

The results of

  • Try to rebuild the extract/replace logic using jscodeshift. The extract implementation is not difficult, but includes different statement types. The implementation of the substitution is hampered by the fact that the template string still cannot be processed (mainly due to its AST structure), and the type of statement to be processed by the substitution is very complex, which is not changed from the previous string substitution. To give up
  • Try to usevue-eslint-parserInstead of tovue-template-complierThe VUE template is parsed just to solve some syntax recognition problems.[' invalid ', 'valid '][+scope.row.index]That’s fine, but it brings up a problem that wasn’t there before. Later, considering that there is no essential change even if successful, they gave up

thinking

  1. There must be a validation process before you start refactoring code, otherwise it’s easy to be overconfident
  2. Knowledge domains are important, otherwise you’ll just waste time on low-level solutions, so learn as much as you can