Vite插件

@voerkai18n/babel插件在vite应用中不能正常使用，需要使用@voerkai18n/vite插件来完成类似的功能，包括自动文本映射和自动导入t函数。

安装

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

javascript

npm install --save-dev @voerkai18n/vite
yarn add -D @voerkai18n/vite
pnpm add -D @voerkai18n/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/vite"
export default defineConfig({
    plugins: [
        Inspect(),  // 可选的
        Voerkai18nPlugin({debug:true}),
        vue()
    ]
})

vite-plugin-inspect是开发vite插件时的调试插件，启用后就可以通过localhost:3000/__inspect/ 查看Vue源码文件经过插件处理前后的内容，一般是Vite插件开发者使用。上例中安装后，就可以查看Voerkai18nPlugin对Vue文件干了什么事，可以加深理解，正常使用不需要安装。

插件功能

文本映射

@voerkai18n/vite插件配置启用后，同时会扫描源代码文件（包括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函数而自动导入。

注意：

自动导入默认是关闭的，需要手动配置@voerkai18n/vite插件的参数autoImport=true才能生效。
启用autoImport=true后, 在typescript开发时会导入类型丢失，所有不建议开启。
不同于@voerkai18n/babel插件，@voerkai18n/vite插件不需要配置location和autoImport参数，能正确地处理导入languages路径。

插件参数

vite插件支持以下参数：

javascript

import Voerkai18nPlugin from "@voerkai18n/vite"
export default defineConfig({
    plugins: [
        Inspect(),  										// 可选的
        Voerkai18nPlugin({
            location: "./",                                 // 可选的，指定当前工程目录
            autoImport: false,                              // 不自动导入t函数
            // autoImport: true,                            // 自动导入t函数
            // autoImport: [".js"],                         // 仅在js文件中自动导入t函数
            debug:false,                                    // 是否输出调试信息，当=true时，在控制台输出转换匹配的文件清单
            patterns:[
                "!(?<!.vue\?.*).(css|json|scss|less|sass)$",          // 排除所有css文件
                /\.vue(\?.*)?/,                                     // 所有vue文件
            ]    
        }),
        vue()
    ]
})

location：可选的，用来指定当前工程目录，一般情况是不需要配置的，会自动取当前文件夹。并且假设languages文件夹在<location>/src/languages文件夹下。
autoImport：可选的，用来配置是否自动导入t函数。默认false代表不自动导入t函数。true代表自动导入t函数。autoImport=[".<扩展名>",".<扩展名>"]列出源码扩展名列表，代表仅仅在这些扩展名文件中自动导入t函数，如autoImport=[".js"]代表仅在js源文件中自动导入t函数。由于在typescript下自动导入t函数会导致类型错误提示，所以一般仅建议在nodejs下使用。
debug：可选的，开启后会在控制台输出一些调试信息，对一般用户没有用。

patterns：可选的，一些正则表达式匹配规则，用来过滤匹配哪一些文件需要进行扫描和处理。默认的规则：

javascript

const patterns={
   	"!(?<!.vue\?.*).(css|json|scss|less|sass)$",          	// 排除所有css文件
   	/\.vue(\?.*)?/,                                     	// 所有vue文件
   	"!.*\/node_modules\/.*",								// 排除node_modules
   	"!/.*\/languages\/.*",           					 	// 默认排除语言文件
      "!\.babelrc",											// 排除.babelrc
	    "!babel\.config\.js",									// 排除babel.config.js
      "!package\.json$",										// 排除package.json
      "!vite\.config\.js",									// 排除vite.config.js
      "!^plugin-vue:.*"										// 排除plugin-vue
}

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

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

Vite插件 ​

安装 ​

启用插件 ​

插件功能 ​

文本映射 ​

自动导入t函数 ​

插件参数 ​

Vite插件

安装

启用插件

插件功能

文本映射

自动导入`t`函数

插件参数