菜单

开发工作流

相关源文件

本文档概述了 30 秒代码网站项目的开发工作流。它涵盖了本地开发使用的关键命令和流程,包括如何运行开发服务器、监视更改以及构建项目。有关初始设置开发环境的信息,请参阅设置与安装

概述

30 秒代码开发工作流围绕着一个内容准备过程构建,该过程使用 Astro 将源内容转换为静态网站。该工作流涉及几个步骤:

  1. 使用自定义脚本进行内容准备
  2. 用于本地测试的开发服务器
  3. 监视内容以进行自动重建
  4. 为生产环境构建

该项目使用 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运行测试套件

来源:package.json43-55

开发工作流

开发工作流围绕内容准备和 Astro 构建系统进行。此图显示了命令及其底层进程之间的关系。

来源:package.json43-55

内容准备流程

内容准备是开发工作流的关键部分。bin/prepare脚本处理内容准备的各个方面,包括处理内容文件、生成搜索索引和优化资源。

来源:package.json43-51

开发服务器

在本地开发时,Astro 开发服务器提供网站的实时预览。开发服务器会自动反映源代码的更改。

基本开发工作流

  1. 启动开发服务器

    这会首先执行 predev 脚本(bin/prepare dev --fast-highlight),该脚本以快速高亮模式准备内容,然后启动 8000 端口的 Astro 开发服务器。

  2. http://:8000 查看网站。

  3. 修改源文件。Astro 会自动刷新浏览器以反映对组件和页面的更改。

来源:package.json44-45

监视内容更改

内容更改(例如代码片段或集合的修改)需要重新运行内容准备过程。watch命令会自动执行此过程。

此命令启动开发服务器并监视内容更改,在需要时自动重新构建。

来源:package.json46

内容创作

要创建新内容(代码片段或集合),项目提供了一个专用脚本。

这会运行 bin/prepare create 脚本,该脚本可能提供创建新内容的交互式提示。

来源:package.json53

为生产环境构建

当您准备好为生产环境构建网站时,请执行以下操作:

  1. 运行构建命令

    这会首先执行 prebuild 脚本(bin/prepare full),该脚本执行完整的内容准备,然后使用 Astro 构建网站。

  2. 预览生产版本

    这会在 9000 端口启动一个预览服务器来查看生产构建。

来源:package.json50-52

高级开发工作流

对于更高级的开发需求,请考虑以下选项:

完整内容处理

当您需要完整(非快速)内容处理时,请使用

这会使用 bin/prepare dev,但不带 --fast-highlight 标志,以进行完整的內容处理。

来源:package.json47-48

持续内容处理

对于持续的完整内容处理,请使用:

这会使用完整的内容处理来运行开发服务器,并监视更改。

来源:package.json49

控制台实用程序

对于高级操作和调试,项目提供了一个控制台实用程序。

这会运行 bin/console 脚本,该脚本可能提供与项目交互的实用函数。

来源:package.json54

测试

该项目使用 Vitest 进行测试。

这会使用 Vitest 运行测试套件。

来源:package.json55

开发环境要求

项目要求 Node.js 版本为 22.14.0 或更高版本,具体规定在 package.json 中。请确保在开始之前,您的开发环境满足此要求。

来源:package.json68-70

工作流最佳实践

  1. 在处理组件或布局的快速开发时,请使用 npm run dev
  2. 修改内容时,请使用 npm run watch 来自动查看更改。
  3. 在部署之前,务必运行 npm run buildnpm run preview 来验证生产构建。
  4. 通过 npm run test 运行测试,以确保代码质量。

总结

30 秒代码的开发工作流围绕着内容准备和 Astro 构建系统进行。项目中提供的 npm 脚本可以简化从内容创建到生产构建的开发过程。通过理解不同命令及其用途,您可以为特定的开发任务选择最有效的工作流。