本文档概述了 30 秒代码网站项目的开发工作流。它涵盖了本地开发使用的关键命令和流程,包括如何运行开发服务器、监视更改以及构建项目。有关初始设置开发环境的信息,请参阅设置与安装。
30 秒代码开发工作流围绕着一个内容准备过程构建,该过程使用 Astro 将源内容转换为静态网站。该工作流涉及几个步骤:
该项目使用 npm 脚本来标准化跨开发环境的这些流程。
该项目提供了一些 npm 脚本来促进开发工作流。
| 命令 | 描述 |
|---|---|
npm run dev | 启动开发服务器,支持快速高亮显示 |
npm run watch | 运行开发服务器并监视内容更改 |
npm run start | 启动开发服务器,支持完全高亮显示 |
npm run observe | 运行开发服务器,支持完全高亮显示并监视更改 |
npm run build | 为生产环境构建网站 |
npm run preview | 预览生产构建 |
npm run create | 创建新内容 |
npm run console | 打开一个包含实用程序的控制台 |
npm run test | 运行测试套件 |
开发工作流围绕内容准备和 Astro 构建系统进行。此图显示了命令及其底层进程之间的关系。
内容准备是开发工作流的关键部分。bin/prepare脚本处理内容准备的各个方面,包括处理内容文件、生成搜索索引和优化资源。
在本地开发时,Astro 开发服务器提供网站的实时预览。开发服务器会自动反映源代码的更改。
启动开发服务器
这会首先执行 predev 脚本(bin/prepare dev --fast-highlight),该脚本以快速高亮模式准备内容,然后启动 8000 端口的 Astro 开发服务器。
在 http://:8000 查看网站。
修改源文件。Astro 会自动刷新浏览器以反映对组件和页面的更改。
内容更改(例如代码片段或集合的修改)需要重新运行内容准备过程。watch命令会自动执行此过程。
此命令启动开发服务器并监视内容更改,在需要时自动重新构建。
要创建新内容(代码片段或集合),项目提供了一个专用脚本。
这会运行 bin/prepare create 脚本,该脚本可能提供创建新内容的交互式提示。
当您准备好为生产环境构建网站时,请执行以下操作:
运行构建命令
这会首先执行 prebuild 脚本(bin/prepare full),该脚本执行完整的内容准备,然后使用 Astro 构建网站。
预览生产版本
这会在 9000 端口启动一个预览服务器来查看生产构建。
对于更高级的开发需求,请考虑以下选项:
当您需要完整(非快速)内容处理时,请使用
这会使用 bin/prepare dev,但不带 --fast-highlight 标志,以进行完整的內容处理。
对于持续的完整内容处理,请使用:
这会使用完整的内容处理来运行开发服务器,并监视更改。
对于高级操作和调试,项目提供了一个控制台实用程序。
这会运行 bin/console 脚本,该脚本可能提供与项目交互的实用函数。
该项目使用 Vitest 进行测试。
这会使用 Vitest 运行测试套件。
项目要求 Node.js 版本为 22.14.0 或更高版本,具体规定在 package.json 中。请确保在开始之前,您的开发环境满足此要求。
npm run dev。npm run watch 来自动查看更改。npm run build 和 npm run preview 来验证生产构建。npm run test 运行测试,以确保代码质量。30 秒代码的开发工作流围绕着内容准备和 Astro 构建系统进行。项目中提供的 npm 脚本可以简化从内容创建到生产构建的开发过程。通过理解不同命令及其用途,您可以为特定的开发任务选择最有效的工作流。