模块支持 · Cloudflare Pages docs

Pages Functions 支持多种模块类型，与 Workers ↗ 类似。这意味着你可以在 Functions 代码中导入并使用外部模块，如 WebAssembly（Wasm）、text 和 binary 文件。

本指南介绍如何在 Pages Functions 中使用这些不同的模块类型。

ECMAScript 模块

ECMAScript 模块（简称 ES 模块）是 JavaScript 的官方标准化 ↗ 模块系统。它是编写模块化和可复用 JavaScript 代码的推荐方式。

ES 模块 ↗ 通过 import 和 export 语句定义。以下是使用 ES 模块格式编写的脚本示例，以及导入该模块的 Pages Function：

export function greeting(name: string): string {
  return `Hello ${name}!`;
}

import { greeting } from "../src/greeting.ts";

export async function onRequest(context) {
	return new Response(`${greeting("Pages Functions")}`);
}

WebAssembly 模块

WebAssembly（简称 Wasm）允许你将 Rust、Go 或 C 等语言编译为可在多种环境中运行的二进制格式，包括 Web 浏览器、Cloudflare Workers、Cloudflare Pages Functions 及其他 WebAssembly 运行时。

WebAssembly 中可分发、可加载、可执行的代码单元称为模块 ↗。

以下是在 Pages Functions 代码中导入 Wasm 模块的基本示例：

import addModule from "add.wasm";

export async function onRequest() {
	const addInstance = await WebAssembly.instantiate(addModule);
	return new Response(
		`The meaning of life is ${addInstance.exports.add(20, 1)}`,
	);
}

文本模块

文本模块是一种非标准化方式，可将 HTML 文件等资源作为 String 导入。

若要将以下 HTML 文件导入 Pages Functions 代码：

<!DOCTYPE html>
<html>
	<body>
		<h1>Hello Pages Functions!</h1>
	</body>
</html>

使用以下脚本：

import html from "../index.html";

export async function onRequest() {
	return new Response(html, {
		headers: { "Content-Type": "text/html" },
	});
}

二进制模块

二进制模块是一种非标准化方式，可将图片等二进制数据作为 ArrayBuffer 导入。

以下是在 Pages Functions 代码中从二进制文件导入数据的基本示例：

import data from "../my-data.bin";

export async function onRequest() {
	return new Response(data, {
		headers: { "Content-Type": "application/octet-stream" },
	});
}