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
- Take simplified Chinese to traditional Chinese as an example
- You need a free, accurate, non-hangable translation service using the Google API based on Puppeteer
- 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 ']
- Will return the character array to
Delimiter
, 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 in
It’s a phrase,Tie his shoes
It’s a phrase that doesn’t change when you switch, andcontact
When we’re together, it becomescontact
- Will translate the results to
The separator
Convert to array, traversal will replace all simplified code traditional