background

Recently, I participated in two foreign projects of the company, in which Chinese was replaced with Portuguese and English. The project was important and time was limited, so Chinese entries needed to be replaced with one method after normal development.

Var open = intl.get(‘ key ‘).d(‘ open ‘)

Because before there was no tool, we could only replace one by one, name the key value, check whether it is repeated, check whether there is any missing… It’s a waste of time

About tool efficiency

In an international task, a colleague completed the amount of work I needed to complete in a day in ten minutes, which made me feel that I had discovered a new continent. One line of command can replace about 80% of the correct content, which is of course very fast!

However, finding and correcting errors is also an extremely painful process. People are always not satisfied with the present and hope for better.

The method used by colleagues is to read the contents of the file, and then match the Chinese fragment according to the re, and then replace it. This is easier to write, but the trouble is to write the correct content and replace it with the correct form. A portal to a gadget written by a colleague

Why develop a similar gadget again

As for my colleague’s small tool, I think it is not enough, and the expansibility may not be enough, I want to do more free some operations may be more troublesome, and if there is a new situation, it is not good to expand. The point is that re’s are long and I don’t want to watch them (although I’ve had a crush on them myself).

Tell me about my new gadget

In colleagues gadgets inspired, I think about what is the more elegant way, to take off the brain which is why cannot parse the file, find is the place where the string, and then determine whether Chinese, is it to replace, idea is the same, but I decided to file the code into the form of ast, on this basis to replace operation.

On this basis I developed an I18N-AST small tool

A brief description of the tool and what modules it uses

  • Various types when the @babel/types code is converted to ast
  • The babel-core core is used to convert code to ast
  • Babel-generator converts the AST into code
  • Chalk added color to the hint
  • Commander Command line tool
  • Glob address tool
  • Jest test tool
  • . And a whole bunch of Babel plugins

How to use

As of September 17, version 0.1.3 will cover most scenarios

There are three main steps: installation, write command line or configuration file, and execution

The installation

Use NPM:

npm install --save-dev i18n-ast
Copy the code

Using yarn:

yarn add i18n-ast --dev
Copy the code

Write the configuration

  1. Using the command line
  • -e [File path to be converted]
  • -o [Output the path of the file to be translated]
  • -x [exclude files, multiple please use “,” split]
  i18n-ast -e [path] -o [path] -x [path]
Copy the code
  1. Create the i18n-ast.config.js configuration file in the root directory. The corresponding random key value is added to the configuration file
module.exports = (a)= > ({
  entry: "File path to be converted".output: "Output file path".// Exclude file (type array)
  exclude: [],
  // You can customize random strings. The first argument is the path to the current file
  randomFuc: (filePath) = > `${filePath.split('/').pop()}-The ${Math.random()}`
})
Copy the code

See the effect

Transformation before

After the transformation

Extraction of translation entries

As shown in the picture, the translation process is perfect. Now only React is supported, but I left space for Vue. Interested partners can give a star to maintain the project together.

The project is on github at github.com/unStone/i18…

Next maintenance plan

If there is not too much demand, I will slowly maintain according to the following plan. After all, I still have to work, and most of my energy has to be focused on work

Todo List

  • [] Substitution condition
    • js
      • A Chinese string in the [x] object
      • [x] [x
      • [x] Template string (containing simple variables)
    • react
      • [x] React
      • [x] React
    • Vue (to be added)
  • [ ] excel
    • [] Translate entry file into Excel
    • [] Excel converts to translation files
  • [] Need to replace information collection
  • [] Determine whether to introduce modules. If no module is introduced automatically
  • [] The replacement method can be customized
  • [] Introduce automatic translation, translate simple words (atool-i10n)