Deno 是一个新兴的后端 JavaScript 运行时，它提供了一种更现代和安全的方式来运行 JavaScript 代码。如果你想在 Deno 应用程序中使用静态资源，例如图像或 CSS 文件，你需要使用 Deno 的模块系统来加载这些资源。本文将教你如何在 Deno 中使用静态资源，并提供一些示例代码来帮助你入门。
加载静态资源
在 Deno 中，可以通过使用 fetch() 函数来加载静态资源。这个函数是一个全局函数，可以在任何地方使用。fetch() 函数将返回一个 Response 对象，你可以从中读取资源的内容。例如，要加载一个图像文件，可以使用以下代码：
const response = await fetch("https://example.com/my-image.png");
const image = await response.arrayBuffer();这将使用 fetch() 函数从指定的 URL 加载图像文件，并将其包装在 arrayBuffer() 中，以便稍后使用。
作为模块导入静态资源
如果你想将静态资源导入到 Deno 模块中，以便在应用程序中引用它们，就需要使用 ES 模块的导入语法。你可以使用 import 语句来导入静态资源。
例如，要导入一个 CSS 文件，你可以使用以下代码：
import styles from './styles.css'; console.log(styles);
在此示例中，你使用 import 语句将 styles.css 文件导入到模块中，并将它的内容赋值给 styles 变量。在应用程序的其他地方，你可以使用此变量来使用样式。
要导入图像文件，你可以使用以下代码：
import myImage from './my-image.png'; console.log(myImage);
在此示例中，你导入一个 PNG 图像到模块中，并将其内容赋值给 myImage 变量。你可以在应用程序的其他地方使用该变量来访问图像。
提供静态资源
如果你想在 Deno 应用程序中提供静态资源，例如 HTML 文件或图像，你需要将这些文件放置在公共目录下。然后，你可以使用 serve() 函数来提供这些文件。
以下是 Deno 应用程序的示例代码，该代码提供了在 /public 目录下的图像文件和 HTML 文件：
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
----- ------ - ------- ----- ---- ---
--- ----- ------ ------- -- ------- -
----- --- - --- ---------------- -------------------------
--- ---------
-- ------------- --- ----------------------- -
----- --------- - ----- ---------------------------------------
-------- - --- ------------------- - -------- - --------------- ----------- - ---
- ---- -- ------------- --- --------------------- -
----- -------- - ----- -------------------------------------
-------- - --- ------------------ - -------- - --------------- ----------- - ---
- ---- -
-------- - --- ------------- ------- - ------- --- ---
-
--------------------------
-在此示例中，你使用 serve() 函数创建一个 HTTP 服务器，用于服务于公共目录中的文件。然后，你使用 for-await-of 语句等待请求，并根据请求的 URL 返回不同的响应。
在此示例中，当请求的 URL 是 /public/my-image.png 时，你将读取 my-image.png 文件的内容，并将其作为 PNG 图像的响应发送回客户端。如果请求的 URL 是 /public/index.html，你将读取 index.html 文件的内容，并将其作为 HTML 的响应发送回客户端。
结论
在 Deno 应用程序中使用静态资源非常简单。无论是加载图像和其他二进制文件，还是导入 CSS 和其他文本资源，Deno 提供了丰富的 API 来处理它们。如果你需要提供静态资源，你可以使用 Deno 的 serve() 函数以及规范的 HTTP 响应来提供这些资源。希望本文对你有所帮助，以便你能够更好地使用 Deno 进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674af706da05147dd02cdec6