# Vite插件

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

## 安装

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

```javascript | pure
npm install --save-dev @voerkai18n/vite
yarn add -D @voerkai18n/vite
pnpm add -D @voerkai18n/vite 
```

## 启用插件

接下来在`vite.config.js`中配置启用`@voerkai18n/vite`插件。

```javascript | pure
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`插件支持以下参数：

```javascript | pure
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`：可选的，一些正则表达式匹配规则，用来过滤匹配哪一些文件需要进行扫描和处理。默认的规则：

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