使用 Vite 编译微信小程序

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

安装插件

请确保你已安装 vite 7

如果还没有安装，请执行：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 7 编写

• 使用示例

  参考 examples 下的 miniprogram，使用的是微信小程序 ts 基础模版

• 运行项目

  构建完成，会生成 dist 目录，打开微信小程序开发者工具，选择 dist 目录导入

• 目录结构

  一个小程序页面由四个文件组成，分别是：

  | 文件类型 | 必需 | 作用 | |----------|------|------------| | js | 是 | 页面逻辑 | | wxml | 是 | 页面结构 | | json | 否 | 页面配置 | | wxss | 否 | 页面样式表 |

  描述页面的四个文件应该具有相同的路径与文件名

License

MIT