解决i18n国际化可读性问题,傻瓜式webpack中文支持国际化插件开发

先来看最后的效果

在这里插入图片描述

问题

  1. 用过国际化i18n的朋友都知道，天下苦国际化久矣，尤其是中文为母语的开发者，在面对代码中一堆的$t('abc.def')这种一点也不直观毫无可读性的代码，根本不知道自己写了啥

    （如上图，你看得出来这是些啥吗）

  2. 第二个问题就是i18n各种语言版本的语言包难以维护，随着项目变大这个语言包会越来越难以维护，能不能自动去维护呢

解决思路

所以我们前端组的小伙伴就想了个办法，能不能直接$t('中文')呢，就像下图：

这样是不是就方便看了，但是问题依然有，使用中文做key可能会在打包时乱码或者在浏览器查看下乱码，总归就是直接使用中文不安全。

因此我们想出了一个万全之策：

  1. 针对以前做了国际化的项目，写node扫描一遍src目录，找出所有$t('xxxx')替换成$t('对应中文')
  2. 由于需要改的项目是vue2编写，所以写webpack插件做以下事：
    • 在打包开始前扫描src目录，找到 $t('对应中文')
    • 使用crc32将中文转为加密后的key，然后将'key': '对应中文'自动追加到语言包文件中,对应的语言包会长这样：
    • 在打包结束后，扫描打包后的文件，将$t('对应中文')修改为$t(key)，打包后的$t会长这样：

这样就不担心乱码问题了，而且可以自动维护语言包

将源码中的英文键替换成中文键

这一步之前没有写国际化的项目不用执行。
这一步只需要执行一次即可，因此不写进webpack插件中去，直接写nodejs脚本，具体步骤如下：

  1. 扫描src下所有文件夹，这个步骤需要用到递归，如果是文件夹就继续往下扫描，用正则表达式找出 $t('xxxx') 和 i18n.t('xxxx')这样的字符串
  2. 从之前的中文语言包中找出对应的中文并替换进源码
// replaceLang.js
const path = require('path')
const fs = require("fs");let zhLang = require("./src/utils/languages/zh.js"); // 扫描文件的根路径
let gFilePath = resolve('/src')
// 需要扫描的文件
let gExtension = ['.js','.vue','.ts','.tsx','.jsx']function resolve(dir){return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}// 提取多级嵌套结构中的中文
function getValueByAttrs(attrs){let str = '',langObj = zhLang;attrs.forEach(item=>{str = langObj[item]if(typeof str == 'object'){langObj = langObj[item]}})return str
}/*** 替换文件夹下的英文键* * folderPath: 需要扫描替换的文件夹* extension： 需要替换的文件后缀集合*/
function replaceLangs(folderPath, extension){// 读取文件夹下文件const files = fs.readdirSync(folderPath,'utf8')files.forEach((fileName) => {const filePath = path.join(folderPath, fileName)const stats = fs.statSync(filePath)if(stats.isDirectory()) {// 如果该目录是文件夹，继续往下扫描this.replaceLangs(filePath,extension)}else if(stats.isFile()) {// 如果该目录是文件，进一步判断文件类型if(extension.includes(path.extname(fileName).toLowerCase())) {//读取文件内容const fileContent = fs.readFileSync(filePath, 'utf8')// 用正则表达式找出 `$t('xxxx')` 和 `i18n.t('xxxx')`这样的字符串let results = fileContent.match(/\$t\((.+?)\)/g)||[]let results2 = fileContent.match(/i18n.t\((.+?)\)/g)||[]results.concat(results2).forEach(info=>{let regex = /(?<=\()(.+?)(?=\))/g;  let attr = info.match(regex)[0]try{let attrs = eval(attr).split('.')||[];// 从之前的语言包中获取对应的中文let str = getValueByAttrs(attrs)if(str){if(info.includes('i18n.t')){fileContent = fileContent.replace(info,"i18n.t('"+str+"')")}else{fileContent = fileContent.replace(info,"$t('"+str+"')")}}}catch(e){console.log(e)}})// 更新文件fs.writeFileSync(filePath, fileContent)}}})
}replaceLangs(gFilePath, gExtension)

webpack插件开发基础知识

可以参考插件开发文档
插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调，开发者可以在 webpack 构建流程中引入自定义的行为。

插件可以做些什么

可以在关键时间点执行一些逻辑，要改变输出，取决于我们可以获取到什么，以及对它做些什么修改操作，比如我们可以去除注释，去除空格，合并代码，压缩文件，提取公共代码，改变配置，修改，改变输出等。

webpack插件组成

webpack插件由一下组成：

  • 一个JavaScript命名函数或JavaScript类。
  • 在插件函数的prototype上定义一个 apply 方法。
  • 指定一个绑定到webpack自身的事件钩子。
  • 处理webpack内部实例的特定数据。
  • 功能完成后调用webpack提供的回调。
插件基本架构

插件是由「具有 apply 方法的 prototype 对象」所实例化出来的。这个 apply 方法在安装插件时，会被 webpack compiler 调用一次。apply 方法可以接收一个 webpack compiler 对象的引用，从而可以在回调函数中访问到 compiler 对象。一个插件结构如下：

class HelloWorldPlugin {apply(compiler) {compiler.hooks.done.tap('Hello World Plugin',(stats /* 绑定 done 钩子后，stats 会作为参数传入。 */) => {console.log('Hello World!');});}
}module.exports = HelloWorldPlugin;

然后，要安装这个插件，只需要在你的 webpack 配置的 plugin 数组中添加一个实例：

// webpack.config.js
var HelloWorldPlugin = require('hello-world');module.exports = {// ... 这里是其他配置 ...plugins: [new HelloWorldPlugin({ options: true })],
};
Compiler

Compiler 负责编译，贯穿webpack的整个生命周期，Compiler 对象包含了当前运行Webpack的配置，包括entry、output、loaders等配置，这个对象在启动Webpack时被实例化，而且是全局唯一的。Plugin可以通过该对象获取到Webpack的配置信息进行处理。

常用钩子：

  • beforeRun：
    在开始执行一次构建之前调用，compiler.run 方法开始执行后立刻进行调用。
  • watchRun：
    在监听模式下，一个新的 compilation 触发之后，但在 compilation 实际开始之前执行。
  • compilation：
    compilation 创建之后执行。
  • emit：
    输出 asset 到 output 目录之前执行。
  • done：
    在 compilation 完成时执行。这个钩子 不会 被复制到子编译器。
Compilation

Compilation对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 Compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息，简单来讲就是把本次打包编译的内容存到内存里。Compilation 对象也提供了插件需要自定义功能的回调，以供插件做自定义处理时选择使用拓展。
简单来说,Compilation的职责就是构建模块和Chunk，并利用插件优化构建过程。

Compiler 和 Compilation 的区别

Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译，只要文件有改动，compilation就会被重新创建。

注意

有些插件钩子是异步的。我们可以像同步方式一样用 tap 方法来绑定，也可以用 tapAsync 或 tapPromise 这两个异步方法来绑定。

  • 当我们用 tapAsync 方法来绑定插件时，必须 调用函数的最后一个参数 callback 指定的回调函数。
  • 当我们用 tapPromise 方法来绑定插件时，必须 返回一个 pormise ，异步任务完成后 resolve 。

Language插件开发

流程

  1. 在编译开始前扫描src目录下的所有文件，将 $t('中文') 字符串找到，将其通过crc32加密得到key,并追加到语言包中
  2. 检测到文件变化时，重新执行步骤1，更新语言包
  3. 编译完成后，输出到dist目录前，将打包好的文件中的 $t('中文') 换成 $t('key')，再输出到目标目录

源码

//languagePlugin.js
const path = require('path')
const { crc32 } = require('crc')
const fs = require("fs");// 扫描文件的根路径
let gFilePath = resolve('/src')
// 需要扫描的文件
let gExtension = ['.js','.vue','.ts','.tsx','.jsx']function resolve(dir){return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}class LanguagePlugin {constructor(config) {this.config = {// 指定中文语言包zh: resolve(config.zh),// 需要生成的语言包，注意需要包含中文语言包langs: config.langs.map(path => resolve(path))}// 中文语言包内容this.zh = {}// 所有语言包内容this.keyFileList = []// key引用计数，引用为0的key会被删除this.keyUseNumber = {}}apply(compiler) {// 编译开始前执行的钩子compiler.hooks.run.tap('LanguagePluginRun',() => {this.saveZhToCrc32JSON()})// 文件发生改变时执行的钩子compiler.hooks.watchRun.tap('LanguagePluginWatch',() => {this.saveZhToCrc32JSON()})compiler.hooks.emit.tapAsync('LanguagePlugin', (compilation, callback) => {const now = Date.now()const zh = this.zh// 检索每个（构建输出的）chunk：compilation.chunks.forEach(chunk => {// 检索由 chunk 生成的每个资源(asset)文件名：chunk.files.forEach(filename => {// 文件类型是js才做检测和替换var fileType = filename.split('.').pop()if(fileType==='js' && compilation.assets[filename] && compilation.assets[filename].source) {// 获取到源码var source = compilation.assets[filename].source();var newVal = sourcevar reg = /((i18n\.t)|(\$t))\((\\)*(\'|\")(.+?)(\\)*(\'|\")\)/g// 替换源码newVal = newVal.replace(reg, function(val) {let str = val.replace(/((i18n\.t)|(\$t))\((\\)*(\'|\")/g,'').replace(/(\\)*(\'|\")\)/g,'').replace(/\"/g,'\"').replace(/\'/g,'\'')let hashKey = crc32(str).toString(16)if(zh[hashKey]) {let ret = val.replace(str, hashKey)return ret}else{return val}})// 覆盖文件compilation.assets[filename] = {source: function () {return newVal},size: function () {return newVal.length}}}});});// 计时console.log((Date.now() - now) / 1000)callback();});}saveZhToCrc32JSON() {this.keyFileList = []this.keyUseNumber = {}// 判断几个XXkey.js文件存不存在，如果不存在就创建一个this.config.langs.forEach(filePath => {const { dir, base } = path.parse(filePath);try {fs.accessSync(dir, fs.constants.F_OK)try {fs.accessSync(filePath, fs.constants.F_OK)} catch(err) {console.log(filePath + '不存在,将为您自动创建')fs.writeFileSync(filePath,"const lang = {\n}\nexport default lang")}} catch (err) {console.log(dir + '不存在,将为您自动创建')fs.mkdirSync(dir)fs.writeFileSync(filePath,"const lang = {\n}\nexport default lang")}})// 提取出langs文件夹下文件的内容this.config.langs.forEach(filePath => {let langFileContent = fs.readFileSync(filePath,'utf8')// 提取{}之间的有效内容langFileContent = langFileContent.match(/\{[\S\s]+\}/g)[0]const obj = JSON.parse(langFileContent)const origin = JSON.parse(langFileContent)for(let key in obj) {// 去掉首尾空格obj[key] = obj[key].replace(/^\s*/g,'').replace(/\s*$/g,'')}this.keyFileList.push({path: filePath,val: obj,origin: JSON.stringify(origin)})for(let key in obj) {this.keyUseNumber[key] = 0}})// 更新langs文件this.updateLangsByFiles(gFilePath, gExtension)this.keyFileList.forEach((keyFileItem) => {// 删除没有使用到的keyfor(let key in this.keyUseNumber) {if(this.keyUseNumber[key] === 0) {console.log("["+keyFileItem.val[key]+"]没有被使用，将为您自动删除")delete keyFileItem.val[key]}}// 语言包有改动才更新if(JSON.stringify(keyFileItem.val) !== keyFileItem.origin) {console.log("更改了文件"+keyFileItem.path)let content = 'const lang = {'for(let key in keyFileItem.val) {content += '\n"' + key + '":"' + keyFileItem.val[key] + '",'}// 去掉最后一个逗号content = content.substring(0, content.length - 1)content += '\n}\nexport default lang'fs.writeFileSync(keyFileItem.path, content)}if(this.config.zh === keyFileItem.path) {this.zh = keyFileItem.val}})}/*扫描文件更新语言包*/updateLangsByFiles(folderPath, extension) {// 读取文件夹下的内容const files = fs.readdirSync(folderPath,'utf8')files.forEach((fileName) => {const filePath = path.join(folderPath, fileName)const stats = fs.statSync(filePath)// 判断是文件夹还是文件if(stats.isDirectory()) {this.updateLangsByFiles(filePath,extension)}else if(stats.isFile()) {if(extension.includes(path.extname(fileName).toLowerCase())) {const fileContent = fs.readFileSync(filePath, 'utf8')let results = fileContent.match(/((i18n\.t)|(\$t))\((\'|\")(.+?)(\'|\")\)/g)if(results) {results.forEach(result => {// 获取中文并且获取crclet str = result.replace(/((i18n\.t)|(\$t))\((\'|\")/g,'').replace(/(\'|\")\)/g,'').replace(/\"/g,'\\"').replace(/\'/g,"\\'")let hashKey = crc32(str).toString(16)// 更新语言包数据以及计数数据this.keyFileList.forEach((keyFileItem) => {const obj = keyFileItem.valif(!obj[hashKey]) {obj[hashKey] = strthis.keyUseNumber[hashKey] = 0}this.keyUseNumber[hashKey]++})})}}}})}
}module.exports = LanguagePlugin;

插件使用

  1. 项目的根目录下添加languagePlugin.js
  2. package.json 的 devDependencies 加上 “crc”:“^4.3.2”，运行npm install安装crc依赖
  3. vue.config.js中使用该插件
configureWebpack(config) {return {plugins: [new LanguagePlugin({zh: '/src/langs/zhKey.js',langs: [// 这里有中文版，中文繁体版，英文版语音包'/src/langs/zhKey.js','/src/langs/zhTWKey.js','/src/langs/enKey.js']})]}
}
  1. 修改国际化i18n插件引入语言包的路径
  2. 运行npm run dev，能看到语言包自动更新，页面效果正常。
  3. 运行npm run build正常打包。

后记

这个插件其实不难，就是我的正则表达式水平不太行，后面我可能会专门花时间去学习正则表达式。
webpack的各种钩子我理解的不是很深刻，目前这个代码里的钩子都是我一个一个试出来的。
关于这个插件我其实还有一些想法想实现，比如可以调用AI翻译的API自动翻译出来对应的语言包，国际化从此以后完全傻瓜式啦。
还可以写个vite版本的插件，不过这是以后的事情啦。。。公司的国际化改造告一段落，撒花~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/495719.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【漏洞复现】鸿运(通天星CMSV6车载)主动安全监控云平台存在敏感信息泄露漏

【漏洞复现】鸿运(通天星CMSV6车载)主动安全监控云平台存在敏感信息泄露漏

漏洞描述 鸿运(通天星CMSV6车载)主动安全监控云平台实现对计算资源、存储资源、网络资源、云应用服务进行7*24小时全时区、多地域、全方位、立体式、智能化的IT运维监控，保障IT系统安全、稳定、可靠运行。 免责声明 技术文章仅供参考，任何个人和组织使用网络应当遵守宪法…
阅读更多...
osi模型,tcp/ip模型(名字由来+各层介绍+中间设备介绍)

osi模型,tcp/ip模型(名字由来+各层介绍+中间设备介绍)

目录 网络协议如何分层 引入 osi模型 tcp/ip模型 引入 命名由来 介绍 物理层 数据链路层 网络层 传输层 应用层 中间设备 网络协议如何分层 引入 我们已经知道了网络协议是层状结构,接下来就来了解了解下网络协议如何分层 常见的网络协议分层模型是OSI模型 和 …
阅读更多...
如何使用ArcGIS Pro为栅格图添加坐标信息

如何使用ArcGIS Pro为栅格图添加坐标信息

在某些时候&#xff0c;我们从网上获取的资源是一张普通的栅格图&#xff0c;没有任何的坐标信息&#xff0c;如果想要和带坐标信息的数据一起使用就需要先添加坐标信息&#xff0c;在GIS上&#xff0c;我们把这个过程叫做地理配准&#xff0c;这里为大家介绍一下地理配准的方法…
阅读更多...
网络初识（概念入门）

网络初识（概念入门）

目录 1.局域网VS广域网 1.1局域网 1.2广域网 2.五元组 2.1 IP和端口 2.1.1 IP 2.1.2端口号 2.2协议 3.协议分层 4. TCP/IP五层模型 5.封装和分用 5.1封装 5.2分用 1.局域网VS广域网 1.1局域网 简单介绍&#xff1a;指在某一特定区域内由多台计算机组成的互联网组…
阅读更多...
贪心算法

贪心算法

贪心算法 例题1、股票买卖题目信息思路题解 2、货仓选址题目信息思路题解 3、糖果传递题目信息思路题解 4、雷达设备题目信息思路题解 例题 1、股票买卖 题目信息 思路 相邻两天&#xff0c;后>前&#xff0c;则交易一次 题解 #include <bits/stdc.h> #define en…
阅读更多...
maven的私服

maven的私服

什么是maven的私服就是把自己写的工具类共享给别人这样大家都能用到你写的工具类不用重复写提示效率 maven的上传与下载示意图 1.什么是发行版本&#xff1f;发行版本指定的是功能稳定可以共大家使用的版本 2.什么是快照版本&#xff1f;快照版本指定的是指正在开发的版本 3…
阅读更多...
leetcode 2.27

leetcode 2.27

leetcode hot 100 哈希1.字母异位词分组2.最长连续序列 双指针1.盛最多水的容器2.和为 K 的子数组 数组1.除自身以外数组的乘积 哈希 1.字母异位词分组 49. 字母异位词分组 方法一&#xff1a;排序 由于互为字母异位词的两个字符串包含的字母相同&#xff0c;因此对两个字符…
阅读更多...
【医学影像】LIDC-IDRI数据集的无痛制作

【医学影像】LIDC-IDRI数据集的无痛制作

LIDC-IDRI数据集制作 0.下载0.0 链接汇总0.1 步骤 1.合成CT图reference 0.下载 0.0 链接汇总 LIDC-IDRI官方网址&#xff1a;https://www.cancerimagingarchive.net/nbia-search/?CollectionCriteriaLIDC-IDRINBIA Data Retriever 下载链接&#xff1a;https://wiki.canceri…
阅读更多...
VUE3搭载到服务器

VUE3搭载到服务器

1.搭建服务器 使用 Windows 自带的 IIS 作为服务器。 步骤如下&#xff1a;https://blog.csdn.net/qq_62464995/article/details/130140673 同时&#xff0c;上面的步骤中&#xff0c;还使用了 cpolar 将 IIS 本地网址映射到公共网址。 注&#xff1a; cpolar客户端&#xf…
阅读更多...
在TMP中计算书名号《》高度的问题

在TMP中计算书名号《》高度的问题

1&#xff09;在TMP中计算书名号《》高度的问题 2&#xff09;FMOD设置中关于Virtual Channel Count&Real Channel Count的参数疑问 3&#xff09;Unity 2021.3.18f1 ParticleSystemTrailGeometryJob粒子拖尾系统崩溃 4&#xff09;XLua打包Lua文件粒度问题 这是第375篇UWA…
阅读更多...
python 基础绘图函数 实例

python 基础绘图函数 实例

简介 在 Python 中&#xff0c;有许多用于绘图的库。以下是一些常用的 Python 绘图库及其基本绘图函数的简要介绍&#xff1a; Matplotlib: matplotlib.pyplot.plot(x, y): 绘制线图。matplotlib.pyplot.scatter(x, y): 绘制散点图。matplotlib.pyplot.bar(x, height): 绘制条…
阅读更多...
4核8g服务器能支持多少人访问？

4核8g服务器能支持多少人访问？

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023