vite-plugin-pag-loader

一个在不同环境中无缝将 .pag 文件作为 ArrayBuffer 加载的 Vite 插件。 它通过自动检测环境来解码 Base64 字符串，支持微信小程序、UniApp 和 H5 浏览器。

安装

npm install vite-plugin-pag-loader -D
# 或
yarn add vite-plugin-pag-loader -D
# 或
pnpm add vite-plugin-pag-loader -D

使用

在你的 vite.config.ts 或 vite.config.js 中：

import { defineConfig } from 'vite';
import pagBufferPlugin from 'vite-plugin-pag-loader';

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

然后你可以在代码中直接导入 .pag 文件，它们将被解析为 ArrayBuffer：

import myPagFile from './assets/animation.pag';

console.log(myPagFile); // 它将是一个 ArrayBuffer！

// 配合 pag 库使用
// const pagFile = await PAG.PAGFile.load(myPagFile);

TypeScript 声明

为了在导入 .pag 文件时获得 TypeScript 的类型支持，你可以添加一个声明文件（例如 src/vite-env.d.ts 或 src/pag.d.ts）：

declare module '*.pag' {
  const content: ArrayBuffer;
  export default content;
}

工作原理

该插件在构建时将 .pag 文件转换为 Base64 字符串，并返回 JavaScript 代码以便在运行时将其转换回 ArrayBuffer。 它支持环境检测：

1. 微信小程序使用 wx.base64ToArrayBuffer。
2. UniApp（支付宝、抖音等）使用 uni.base64ToArrayBuffer。
3. 标准 H5 浏览器使用 window.atob。

开源协议

MIT