translate-language-webpack-plugin v5.0.3

English | 简体中文

Introduction

This plug-in was born in the scenario of converting simplified Chinese to traditional Chinese, and other scenarios have not been tested，In theory, you only need to write the regularity of the corresponding language, you can convert it into any other language.

Please try not to use it in the development environment, because this will frequently request the Google translation interface, and if the comments in the development environment are not removed, the translation is very slow, slowing down the construction speed in the development environment.

Pre-Wrok

The plugin relies on Google Translate API, but Google API is charged. Fortunately, there is a free API based on Puppeteer. In theory, the service based on Puppeteer will not hang, so you need to start from Translateer(git@ github.com:ywymoshi/Translateer.git) or translate-language-webpack-plugin Pull the code from the api directory of the repository and deploy the service locally or on the server.

Note: The server deploying the API service needs to be able to access https://translate.google.cn/ (Scientific Internet).

Clone Code

git clone git@github.com:ywymoshi/Translateer.git

Install Dependencies

npm install

Run

npm run dev

The default port is 8999. If your current IP is 127.0.0.1, then your translation api address is: http://127.0.0.1:8999/api/post (Modify it yourself)

Install

Webpack5.0

  npm i --save-dev translate-language-webpack-plugin

  yarn add --dev translate-language-webpack-plugin

Webpack4.0

  npm i --save-dev translate-language-webpack-plugin@4

  yarn add --dev translate-language-webpack-plugin@4

Usage

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',
        from: 'zh-CN',
        to: 'zh-TW',
        separator: '-',
        regex: /[\u4e00-\u9fa5]/g,
        outputTxt: true,
      }),
    ],
  },
});

Option

Basic Principles

1. Take Simplified Chinese to Traditional Chinese as an example
2. Need a free, accurate, and easy-to-hang translation service, using Google API based on Puppeteer
3. Write a webpack plug-in, and read the content matched by the regular expression during the compilation process, in units of phrases, for example, the source code contains <p>disconnected</p><div>tie shoelaces</div> , returns: ['missing', 'tying shoelaces']
4. Separate the returned character array with a delimiter, such as ['disconnected', 'tie shoelace'] => disconnected'|'tie shoelace', the reason for separation: such as Chinese Simplified => Traditional Chinese (there are polymorphic characters): Lost contact shoelace => Lost contact shoelace, and the correct result should be lost contact shoelace, lost contact is a phrase, tie shoelace is A phrase will not change after conversion, and when connection is together, it will become connection
5. Convert the translated result into an array with the delimiter, and traverse all the simplified characters in the code to replace the traditional characters

example