A plug-in for automatic language conversion, unlike i18N, no need to write multiple sets of language files, using Google API for translation, only need to write a language, can be converted to any other language

If you like this project, you can click a star on Github and support it. Author natural (゚ヮ゚ natural): translate-language-webpack-plugin

Introduction to the

This plug-in is born in the scene of Chinese simplified to Traditional, and other scenes are not tested. In theory, it only needs to write the re matching the corresponding language, and then it can be transferred to any other language.

Please try not to use it in the development environment, because it frequently requests Google Translate interface, and the translation is slow if the comments are not removed in the development environment, which slows down the build speed in the development environment.

Pre – work

The plugin relies on the Google Translate API, but Google’S API is paid for, and fortunately, There is a free API based on Puppeteer, theoretically the service will not fail based on Puppeteer, The service needs to be deployed locally or on the server first by pulling code from the API directory of the Translateer or translate-language-webpack-plugin repository.

Note: the deployment server API services need to be able to visit https://translate.google.cn/ (science) on the Internet.

Clone code

  git clone [email protected]:ywymoshi/Translateer.git

Copy the code

Install dependencies

npm install

Copy the code

run

npm run dev

Copy the code

The default port is 8999, such as the current IP 127.0.0.1 for you, then you translate API address is: http://127.0.0.1:8999/api/post (modified)

The installation

Webpack5.0

  npm i --save-dev translate-language-webpack-plugin
Copy the code
  yarn add --dev translate-language-webpack-plugin
Copy the code

Webpack4.0

  npm i --save-dev translate-language-webpack-plugin@4
Copy the code
  yarn add --dev translate-language-webpack-plugin@4
Copy the code

use

vue.config.js

const TranslateWebpackPlugin = require('translate-language-webpack-plugin'); module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [new TranslateWebpackPlugin ({translateApiUrl: 'http://127.0.0.1:8999/api/post', the from: 'useful - CN, to: 'zh-TW', separator: '|', regex: /[\u4e00-\u9fa5]/g, outputTxt: true, }), ], }, });Copy the code

options

The name of the type The default value describe
translateApiUrl String ' ' Address of the API
from String 'zh-CN' The source language
to String 'zh-TW' The target language
separator String The '-' Language separator, used internally to separate multiple phrase characters, adjusting default values as appropriate
regex RegExp /[\u4e00-\u9fa5]/g A regular expression that matches the source language
outputTxt Boolean false Used to output the source language and target language comparison, convenient to check for errors
limit number 850 Used to limit the maximum character length, default is 850, because each Chinese character after encode is 9 times, Google supports the maximum URL length of 8124 (trying Api using FireFox)

The basic principle of

  1. Take simplified Chinese to traditional Chinese as an example
  2. You need a free, accurate, non-hangable translation service using the Google API based on Puppeteer
  3. Write webpack plug-in, in the compilation process to read the regular expression matched by the content, in the unit of phrase, such as, the source contains<p> Lost </p><div> Fasten shoelaces </div>, return: [' lost ', 'fasten shoelaces ']
  4. Will return the character array toDelimiter, such as[' Lost contact ', 'lace up ']= >Lost in '|' tie his shoes', the reason for separation: such as Chinese simplified => Chinese traditional (there are polygons) : missing shoelaces => missing shoelaces, and the correct result should beDisconnected shoelace.Lost inIt’s a phrase,Tie his shoesIt’s a phrase that doesn’t change when you switch, andcontactWhen we’re together, it becomescontact
  5. Will translate the results toThe separatorConvert to array, traversal will replace all simplified code traditional

case