Vite插件

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

安装

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

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

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

插件功能

@voerkai18n/vite插件配置启用后，vite在进行dev或build时，就会在<script setup>....</script>自动注入import { t } from "languages" ，同时会扫描源代码文件（包括vue,js等），根据idMap.js文件里面的文本映射表，将t('"xxxx")转换成t("<id>")的形式。

不同于@voerkai18n/babel插件，@voerkai18n/vite插件不需要配置location和autoImport参数，能正确地处理导入languages路径。

插件参数

vite插件支持以下参数：

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

location：可选的，用来指定当前工程目录，一般情况是不需要配置的，会自动取当前文件夹。并且假设languages文件夹在<location>/src/languages文件夹下。
autoImport：可选的，默认true，用来配置是否自动导入t函数。当vue文件没有指定导入时才会自动导入，并且根据当前vue文件的路径处理好导入位置。
debug：可选的，开启后会在控制台输出一些调试信息，对一般用户没有用。

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

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/**"的形式来匹配连续路径。
- ？：将？替换为[^\/]?，用来匹配单个字符
- *：将*替换为[^\/]*，匹配路径名称

4.3 KiB Raw Blame History Unescape Escape

Vite插件

安装

启用插件

插件功能

插件参数

4.3 KiB

Raw Blame History