Skip to content

编译插件

@voerkai18n/plugins是基于unplugin开发的编译期插件,用于实现包括自动文本映射和自动导入t函数等功能。

安装

@voerkai18n/plugins只需要作为开发依赖安装即可。

bash
npm install --save-dev @voerkai18n/plugins
bash
yarn add -D @voerkai18n/plugins
bash
pnpm 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插件。

javascript
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插件开发者使用。上例中安装后,就可以查看Voerkai18nPluginVue文件干了什么事,可以加深理解,正常使用不需要安装

提示

vite/webpack/farm/rspack/nuxt/rollup/esbuild/astro等插件的配置请参考对应的文档。

插件功能

文本映射

  • @voerkai18n/plugins插件配置启用后,同时会扫描源代码文件(包括vue,js等),根据idMap.js文件里面的文本映射表,将t('"xxxx")转换成t("<id>")的形式。

提示

文本映射可以缩小源码文件的体积!但是如果不启用也不会影响国际化的功能。

自动导入t函数

针对js文件,能通过指定autoImport=true来自动导入t函数。我们知道本质上翻译就是导入执行t函数,这样在一个复杂应用中可能就会存在这样的导入

javascript
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

一些正则表达式匹配规则,用来过滤匹配哪一些文件需要进行扫描和处理。

默认的规则如下:

ts
const patterns=[/.(js|mjs|cjs|ts|jsx|tsx|vue|svelte|mdx|astro)$/]

patterns的匹配规则语法支持正则表达式字符串正则表达式两种,用来对经vite处理的文件名称进行匹配和处理。

  • 正则表达式比较容易理解,匹配上的就进行处理。
  • 正则表达式字符串支持一些简单的语法扩展,包括:
  • !符号:添加在字符串前面来进行排除匹配。
  • **:将**替换为.*,允许使用类似"/code/apps/test/**/node_modules/**"的形式来匹配连续路径。
  • :将替换为[^\/]?,用来匹配单个字符
  • *:将*替换为[^\/]*,匹配路径名称

debug

可选的,开启后会在控制台输出一些调试信息