@dafengzhen/vite-plugin-mp NPM

使用 Vite 编译微信小程序

该插件使用 Vite 对原生微信小程序编译

安装插件

请确保你已安装 vite 6

如果还没有安装，请执行：npm install -D vite

npm install -D @dafengzhen/vite-plugin-mp

使用插件

配置插件

import VitePluginMp from '@dafengzhen/vite-plugin-mp';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [VitePluginMp()],
});

编译打包

npm run build

输入输出

# 输入
miniprogram
├── app.json
├── app.ts
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.json
│   │   ├── index.ts
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.json
│       ├── logs.ts
│       ├── logs.wxml
│       └── logs.wxss
└── utils
    └── util.ts
project.config.json
project.private.config.json

# 输出
dist
├── miniprogram
│    ├── app.js
│    ├── app.json
│    ├── app.wxss
│    ├── pages
│    │   ├── index
│    │   │   ├── index.js
│    │   │   ├── index.json
│    │   │   ├── index.wxml
│    │   │   └── index.wxss
│    │   └── logs
│    │       ├── logs.js
│    │       ├── logs.json
│    │       ├── logs.wxml
│    │       └── logs.wxss
│    └── utils
│        └── util.js
└── project.config.json

插件选项

`compress?: (html: string | Uint8Array) => Promise<string | Uint8Array> | string | Uint8Array`

自定义函数，用于压缩 HTML 字符串或 Uint8Array 输入

参数：
- html：待压缩的内容，可以是字符串或 Uint8Array
返回值：
- 返回压缩后的内容，可以是同步或异步的 string 或 Uint8Array

配置示例：

import { minify } from 'html-minifier-terser';

compress: (source) => {
  return minify(source as string, {
    caseSensitive: true,
    collapseBooleanAttributes: true,
    collapseWhitespace: true,
    conservativeCollapse: true,
    ignoreCustomFragments: [/\{\{[\s\S]*?}}/],
    keepClosingSlash: true,
    removeComments: true,
    removeEmptyAttributes: true,
    removeOptionalTags: true,
    removeRedundantAttributes: true,
    sortAttributes: true,
    sortClassName: true,
  });
}

`debug?: boolean`

是否启用详细日志输出，仅有被复制匹配的文件才有日志输出

默认值：false

`isTsProject?: boolean`

是否为 TypeScript 项目

默认值：true

`jsonIgnore?: string | string[]`

指定要排除处理的 JSON 文件或目录的 glob 匹配模式

`jsonInclude?: string | string[]`

指定要包含处理的 JSON 文件或目录的 glob 匹配模式

配置示例：

jsonInclude: ['project.private.config.json']

`outputDir?: string`

默认值："miniprogram"

`rootDir?: string`

用于解析文件路径的根目录

默认值："miniprogram"

`targets?: { src: string; dest: string; }[]`

要复制的目标列表

每个对象代表一个复制规则：

src: 相对于 rootDir 的源文件 glob 匹配模式
dest: 相对于 outputDir 的目标目录，匹配的文件将被复制到此目录中

配置示例：

targets: [
  {
    dest: 'assets',
    src: 'assets/**/*.txt',
  },
]

`rpxToVw?: boolean`

是否启用将 rpx 自动转换为 vw 的功能

仅对 wxss 样式文件有效

默认值：false

`designWidth?: number`

设计稿的宽度，通常用于将 rpx 单位转换为 vw 单位时的基准宽度

例如，在 750 的设计稿下，1rpx = 0.133vw（100 / 750）

默认值：750

其他问题

适用场景
原生微信小程序
插件版本
基于 vite 6 编写
使用示例
参考 examples 下的 miniprogram，使用的是微信小程序 ts 基础模版
运行项目
构建完成，会生成 dist 目录，打开微信小程序开发者工具，选择 dist 目录导入
目录结构
一个小程序页面由四个文件组成，分别是：
文件类型必需作用
js 是页面逻辑
wxml 是页面结构
json 否页面配置
wxss 否页面样式表
描述页面的四个文件应该具有相同的路径与文件名