Astro 0.23 发布说明

作者
Fred Schott

Astro v0.23.0 已发布，包含一些新功能和亮点

动态文件路由

现在，您可以使用 Astro 的新文件路由在项目中构建动态的非 HTML 文件。使用文件路由可以在构建过程中动态生成文件，例如 JSON、XML，甚至是非文本资源，如图像。这项功能是 Astro 早期以来我们最受期待的功能之一！

要在 Astro 项目中创建文件路由，请在 src/pages 目录中创建一个新的 JavaScript 或 TypeScript 文件。文件路由利用了 Astro 现有的基于文件的路由器，因此请务必在文件名中包含最终构建的文件扩展名。

src/pages/builtwith.json.ts
// Outputs: /builtwith.json


// File routes export a get() function, which gets called to generate the file.
// Return an object with `body` to save the file contents in your final build.
export async function get() {
  return {
    body: JSON.stringify({
      name: "Astro",
      url: "https://astro.js.cn/",
    }),
  }
}

此功能仅在使用 --experimental-static-build 标志时可用。了解更多信息，请查阅文档。

自动 XSS 防护

Astro v0.23 开始向 Astro 模板表达式中的自动 HTML 转义迁移。这项新功能将保护您免受意外将不可信 HTML 注入页面。如果没有它，您可能会面临跨站脚本 (XSS) 攻击，恶意用户可以劫持您的网站来在页面上运行不可信或意外的代码。

<!-- Examples of untrusted HTML injection -->
<div>{`<span>Hello, dangerous HTML</span>`}</div>
<div>{`<script>alert('oh no');</script>`}</div>
<div>{untrustedHtml}</div>

得益于 React 和其他基于组件的 UI 库，XSS 漏洞正成为过去。Astro 很高兴能达到同样无需额外努力、内置的自动 XSS 防护标准。

为了帮助用户迁移，当 Astro v0.23 在模板表达式中遇到未转义的 HTML 时，会在控制台记录警告。在下一版本中，模板表达式将始终转义其内容。

新增 set:html 和 set:text 指令

引入了两个新指令，以在需要时支持更好的 HTML 注入。正如我们在上一节中讨论的，直接设置 HTML 是有风险的。然而，在某些特殊情况下可能需要这样做。Astro 为这些情况创建了新的 set:html 指令。您可以将其视为 React 的 dangerouslySetInnerHTML。

<!-- Examples of explicit HTML setting -->
<div set:html={`<span>Hello, trusted or already escaped HTML</span>`} />
<div set:html={`<script>alert('oh yes');</script>`} />
<div set:html={trustedOrAlreadyEscapedHtml} />

如果您不想要 <div> 包装器，也可以在 Fragment 组件上使用 set:html 来实现零包装 HTML。

- {`<span>Hello, dangerous HTML</span>`}
+ <Fragment set:html={`<span>Hello, trusted or already escaped HTML</span>`} />

set:text 也可用于直接设置元素文本，类似于在浏览器中设置元素的 .text 属性。总的来说，当您需要时，这两个指令为您提供了对 Astro 输出更多的控制。

安全访问敏感环境变量

出于安全考虑，Vite 只加载明确选择以 PUBLIC_ 前缀公开的环境变量。此限制在浏览器中是合理的，并可保护您免受意外泄露秘密令牌和值的风险。然而，这也意味着私有环境变量根本无法使用，即使是在本地服务器渲染的 Astro 组件中。

在 Astro v0.23 中，import.meta.env 现在允许您在 Astro 中以及在代码本地或服务器渲染时访问私有环境变量。Astro 将继续在客户端保护您，并且只向发送给用户的前端公开 PUBLIC_ 变量。

// DB_PASSWORD is only available when building your site.
// If any code tried to run this in the browser, it will be empty.
const data = await db(import.meta.env.DB_PASSWORD)


// PUBLIC_POKEAPI is available anywhere, thanks to the PUBLIC_ prefix!
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`)

请查阅我们的环境变量文档了解更多信息。

使用 Vite v2.8 改进构建

Astro v0.23 随附了 Vite 的内部升级，带来了新功能和巨大的稳定性改进。Vite 的 npm 包处理也得到了提升，因此更多的包应该能在更多的项目中工作。查阅其更新日志了解更多信息。

使用 @astro/compiler v0.11 提升稳定性

Astro v0.23 的编译器也得到了升级，这应该会在所有项目中带来显著的性能和稳定性改进。查阅更新日志了解更多信息。

更好的构建性能

您可能已经注意到上面提到的 --experimental-static-build，以及某些新功能仅在此标志后可用。此标志在 v0.23 中并非新增，但随着我们更接近该功能的正式发布，它会持续改进。这种新的“静态构建”策略很快将成为 Astro 中的默认构建行为。

如果您还没有在构建中尝试 --experimental-static-build 标志，请务必尝试一下并在 Discord 中给我们留下反馈。查阅我们的博客文章《将 Astro 扩展到 10,000 多个页面》以了解更多关于 Astro 未来构建策略的信息。

👋

感谢您的阅读！在 Twitter 上关注我们，了解 Astro 的发布和最新消息。

如果您已经读到这里，那么您一定要加入我们的 Discord 社区。 ;)