Astro 是一个面向内容型网站的现代 Web 框架，采用岛屿架构，默认不向客户端发送 JavaScript。随着 Deno 2 的发布，以及它现在对 Node 和 npm 的向后兼容，搭配 Astro 与 Deno 的开发体验进一步改善。
Deno 2 向后兼容 Node 和 npm，因此你可以使用自己喜欢的 JavaScript 框架。观看 Deno 2 的完整发布视频。
下面介绍如何使用 Deno 构建一个简单的 Astro 项目：
你可以直接查看源代码，也可以按照下面的步骤操作！
🚨 立即试用 Deno 2。 🚨
Deno 提供 Node/npm 向后兼容、内置包管理、一体化零配置工具链、原生 TypeScript 支持等能力。
创建 Astro 项目骨架
Astro 提供一个 CLI 工具，可以快速生成新项目。在终端运行 deno -A npm:create-astro@latest，用 Deno 创建新的 Astro 项目。本教程选择“Empty”模板，从空项目开始；先跳过依赖安装，稍后再用 Deno 安装：
deno -A npm:create-astro@latest
astro Launch sequence initiated.
dir Where should we create your new project?
./dino-app
tmpl How would you like to start your new project?
Empty
ts Do you plan to write TypeScript?
Yes
use How strict should TypeScript be?
Strict
deps Install dependencies?
No
◼ No problem!
Remember to install dependencies after setup.
git Initialize a new git repository?
Yes
✔ Project initialized!
■ Template copied
■ TypeScript customized
■ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./dino-app
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀
╰──🍫─╯从 Deno 2 开始，Deno 也能使用新的 deno install 命令安装包。现在运行 deno install，并加上 --allow-scripts 标志，允许执行 npm 生命周期脚本：
deno install --allow-scripts要查看有哪些命令，可以运行 deno task：
deno task
Available tasks:
- dev (package.json)
astro dev
- start (package.json)
astro dev
- build (package.json)
astro check && astro build
- preview (package.json)
astro preview
- astro (package.json)
astro使用 deno task dev 启动 Astro 服务器：
更新首页，列出所有恐龙
我们的应用将展示多种恐龙的资料。首先创建首页，列出“数据库”中所有恐龙的链接。
先创建应用需要的数据。本例把数据硬编码在 JSON 文件里；实际项目可以使用任意数据存储。在项目根目录创建 data 文件夹，然后创建 dinosaurs.json 文件，并把这份内容写入其中。
⚠️ 本教程使用硬编码数据，不过你也可以通过 Deno 连接各种数据库，甚至使用 Prisma 等 ORM。
有了数据，就可以创建列出所有恐龙的首页。在 ./src/pages/index.astro 页面中写入以下内容：
---
import data from "../../data/dinosaurs.json";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Dinosaurs</title>
</head>
<body>
<h1>Dinosaurs</h1>
<ul>
{data.map((dinosaur) => (
<li>
<a href={`/${dinosaur.name.toLowerCase()}`}>{ dinosaur.name }</a>
</li>
))}
</ul>
</body>
</html>用 deno task dev 启动服务器，然后在浏览器打开 localhost:4321：
很好！不过，点击某只恐龙时会出现 404。接下来解决这个问题。
添加动态 SSR 页面
为了展示每只恐龙的资料，我们将创建一个动态服务端渲染（SSR）页面，这样可以改善终端用户的性能体验，同时提升页面的 SEO。
接下来在 /src/pages/ 中创建名为 [dinosaur].astro 的文件。文件顶部添加逻辑，读取硬编码数据源，并根据 URL 路径中的 dinosaur 参数筛选数据；底部渲染结果。文件内容如下：
---
import data from "../../data/dinosaurs.json";
const { dinosaur } = Astro.params;
const dinosaurObj = data.find((item) => item.name.toLowerCase() === dinosaur);
if (!dinosaurObj) return Astro.redirect("/404");
const { name, description } = dinosaurObj;
---
<h1>{ name }</h1>
<p>
{ description }
</p>⚠️ Deno 语言服务器目前不支持
.astro文件，因此编辑器可能显示误报的红色波浪线。我们正在改善这一体验。
使用 deno task dev 运行，然后在浏览器打开 localhost:4321/abrictosaurus：
页面正常显示！
下一步
希望本教程能帮助你了解如何开始使用 Astro 与 Deno。你可以继续了解 Astro，以及它渐进式构建网站的方法。如果想替换硬编码数据源，可以参考使用 Deno 连接数据库的资料，包括 Planetscale、Redis等。你也可以学习如何把 Astro 项目部署到 Deno Deploy，或按这些指南在 AWS、Digital Ocean和 Google Cloud Run 上自行托管 Deno。
🚨 介绍 Learn Deno。🚨
欢迎查看新的短视频教程系列 Learn Deno，学习 Deno 的一体化工具链、Web 平台 API和 Deno 命名空间 API等功能。
暂无评论内容