编译插件
@voerkai18n/plugins是基于unplugin开发的编译期插件,用于实现包括自动文本映射和自动导入t函数等功能。
安装
@voerkai18n/plugins只需要作为开发依赖安装即可。
npm install --save-dev @voerkai18n/pluginsyarn add -D @voerkai18n/pluginspnpm add -D @voerkai18n/plugins@voerkai18n/plugins支持导出以下插件:
@voerkai18n/plugins/vite@voerkai18n/plugins/webpack@voerkai18n/plugins/farm@voerkai18n/plugins/rspack@voerkai18n/plugins/nuxt@voerkai18n/plugins/rollup@voerkai18n/plugins/esbuild@voerkai18n/plugins/astro
启用插件
以vite插件为例,在vite.config.js中配置启用@voerkai18n/vite插件。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Inspect from 'vite-plugin-inspect'// 可选的
import Voerkai18nPlugin from "@voerkai18n/plugins/vite"
export default defineConfig({
plugins: [
Inspect(), // 可选的
Voerkai18nPlugin({debug:true}),
vue()
]
})vite-plugin-inspect是开发vite插件时的调试插件,启用后就可以通过localhost:3000/__inspect/查看Vue源码文件经过插件处理前后的内容,一般是Vite插件开发者使用。上例中安装后,就可以查看Voerkai18nPlugin对Vue文件干了什么事,可以加深理解,正常使用不需要安装。
提示
vite/webpack/farm/rspack/nuxt/rollup/esbuild/astro等插件的配置请参考对应的文档。
插件功能
文本映射
@voerkai18n/plugins插件配置启用后,同时会扫描源代码文件(包括vue,js等),根据idMap.js文件里面的文本映射表,将t('"xxxx")转换成t("<id>")的形式。
提示
文本映射可以缩小源码文件的体积!但是如果不启用也不会影响国际化的功能。
自动导入t函数
针对js文件,能通过指定autoImport=true来自动导入t函数。我们知道本质上翻译就是导入执行t函数,这样在一个复杂应用中可能就会存在这样的导入
import { t } from "languages"
import { t } from "../languages"
import { t } from "../../languages"
import { t } from "../../../languages"
import { t } from "../../languages"@voerkai18n/vite插件可以实现自动导入功能,在js文件中不需要导入该函数,而是由@voerkai18n/vite插件在翻译阶段根据当前文件是否有使用了t函数而自动导入。
注意:
- 自动导入默认是关闭的,需要手动配置
autoImport参数才能生效。 - 启用
autoImport=true后, 在typescript开发时会导入类型丢失,所有不建议开启。
提示
自动导入t函数也可以使用插件unplugin-auto-import来实现。
插件参数
插件支持以下参数:
autoImport
可选的,用来配置是否自动导入t函数。默认false代表不自动导入t函数。true代表自动导入t函数。autoImport=[".<扩展名>",".<扩展名>"]列出源码扩展名列表,代表仅仅在这些扩展名文件中自动导入t函数,如autoImport=[".js"]代表仅在js源文件中自动导入t函数。
由于在typescript下自动导入t函数会导致类型错误提示,所以一般仅建议在nodejs下使用。
patterns
一些正则表达式匹配规则,用来过滤匹配哪一些文件需要进行扫描和处理。
默认的规则如下:
const patterns=[/.(js|mjs|cjs|ts|jsx|tsx|vue|svelte|mdx|astro)$/]patterns的匹配规则语法支持正则表达式字符串和正则表达式两种,用来对经vite处理的文件名称进行匹配和处理。
正则表达式比较容易理解,匹配上的就进行处理。正则表达式字符串支持一些简单的语法扩展,包括:!符号:添加在字符串前面来进行排除匹配。**:将**替换为.*,允许使用类似"/code/apps/test/**/node_modules/**"的形式来匹配连续路径。?:将?替换为[^\/]?,用来匹配单个字符*:将*替换为[^\/]*,匹配路径名称
debug
可选的,开启后会在控制台输出一些调试信息