@ cf-wasm/ 插件

使Cloudflare工人兼容模块的插件与维特等现代构建工具无缝地工作.

云浮模块

Vite 插件导出自 @cf-wasm/plugins/vite-additional-modules 亚模块能够正确解决在Cloudflare工人身上得到本土支持的无害环境管理型进口,例如:

• .wasm?module
• .wasm
• .txt
• .bin

这些导入类型通常在标准开发环境中失败,因为它们依赖于Cloudflare的模块加载器行为. 这个插件通过在开发时模拟 Cloudflare 的模块导入系统并构建时间来弥补差距 .

为什么你需要它

当使用针对Cloudflare工人的框架或适配器时(例如, @sveltejs/adapter-cloudflare 在SvelteKit应用程序中,您可能会遇到构建时的错误,例如:

error during build:
[vite:wasm-fallback] Could not load /home/user/svelte-kit-app/src/lib/resvg.wasm (imported by src/routes/resvg/+server.ts): "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use `.wasm?init` or `.wasm?url`. See https://vite.dev/guide/features.html#webassembly for more details.

之所以发生这种情况,是因为Vite(以及大多数捆绑者)在本地并不理解Cloudflare的特殊模块查询语法.

这个 vite-additional-modules 插件通过教Vite如何处理这些导入来解决这个问题.

安装

npm install @cf-wasm/plugins --save-dev

使用量

将插件添加到您的 vite.config.js (或 vite.config.ts:

// vite.config.{ts|js}
import additionalModules from "@cf-wasm/plugins/vite-additional-modules";
import { defineConfig } from "vite";

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

[注] 如果依赖使用Cloudflare支持的无害环境管理进口语法(例如, @cf-wasm/satori),您需要确保 Vite 不外部化 @cf-wasm/satori 安全部门改革捆绑过程中的模块:

// vite.config.{ts|js}
import additionalModules from "@cf-wasm/plugins/vite-additional-modules";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [additionalModules()],
  ssr: {
    noExternal: [/^@cf-wasm\/.*/],
  },
});

示例: SvelteKit + Cloudflare 适应器

使用时 @sveltejs/adapter-cloudflare,只需在您的 Vite 配置中包含此插件 :

// vite.config.{ts|js}
import additionalModules from "@cf-wasm/plugins/vite-additional-modules";
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

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

// svelte.config.js
import adapter from "@sveltejs/adapter-cloudflare";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://svelte.dev/docs/kit/integrations
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter(),
  },
};

export default config;

现在,你可以安全地使用进口,例如:

// src/routes/api/+server.ts
import wasmModule from "$/lib/my-module.wasm?module";
import textData from "$/lib/my-schema.txt";

export async function GET() {
  //...
}

两者在 development 并部署到 Cloudflare Workers。 。 。 .

支持的扩展

如何运作

• 单位 development,插件会截取Vite的模块解析度,并模拟 Cloudflare 的导入行为,根据需要编译或服务文件.
• 单位 production builds,插件确保这些文件被正确释放,并作为符合 Cloudflare 工人运行时间的标准的无害环境管理导入物引用.