企业官网建设流程全解析

Assignment de Web-Dev-For-Beginners: Cómo Explorar y Evaluar Herramientas Modernas de Desarrollo Web

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners

导读

本文是《Web-Dev-For-Beginners》课程第一课（Introducción a los Lenguajes de Programación）配套作业（assignment）的完整技术指南。该作业要求学习者在课程已覆盖的代码编辑器、浏览器与命令行工具之外，自主调研三类现代 Web 开发工具，并给出用途、官方文档与真实工作流场景。读完本文后，你将掌握该作业的全部要求、9 大工具类别选型参考、交付格式模板、质量评分标准，并看到本仓库自身（如 quiz-app 与 memory-game）如何真实使用 Vite、Webpack、ESLint、Prettier、Next.js、Tailwind CSS 等工具，从而把作业从“罗列工具”升级为“理解工具链”。

作业的定位：从“学语法”到“认识生态”

本作业属于 translations/es/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md（英文原版见 1-getting-started-lessons/1-intro-to-programming-languages/assignment.md）。在完成它之前，对应课程 translations/es/1-getting-started-lessons/1-intro-to-programming-languages/README.md 已经带你走过了三个核心工具域：

作业的意义正在于此：以上三类工具已经“消耗”掉了，你必须把视野投向他们之外。课程 README 中的时间分配饼图也提示，专业开发者的时间有相当比例花在测试、阅读文档与调试上——这正是本作业想让你提前建立的职业习惯。

La misión: 选择三件“课程之外”的工具

作业的核心指令如下：

Tu misión:Seleccionatres herramientasqueno se hayan cubierto en esta lección(evita elegir editores de código, navegadores o herramientas de línea de comandos ya listadas). Enfócate en herramientas que resuelven problemas específicos en los flujos de trabajo modernos de desarrollo web.

也就是说，挑选标准有两条硬约束：

1. 不在课程已覆盖名单内：不能选代码编辑器、浏览器或已列出的命令行工具（如 VS Code、Chrome、Git、npm、Vite、ESLint、Prettier 本身）；
2. 聚焦现代工作流中的具体问题：工具要能对应一个明确的开发环节（构建、测试、设计、部署、版本控制、样式、依赖、无障碍、API 等）。

对每件工具，你需要交付四项内容

1. Nombre de la herramienta y categoría—— 例如"Figma - Herramienta de diseño"或"Jest - Framework de pruebas"；
2. Propósito y beneficios—— 用 2～3 句话说明开发者为何使用它、解决了什么问题；
3. Enlace a la documentación oficial—— 必须是工具官方文档/官网链接，而不是教程聚合站；
4. Contexto en el mundo real—— 说明它如何嵌入一个真实的专业开发工作流。

Categorías sugeridas: 九个候选方向

作业给出了九大类别作为选型起点，每类都附了代表工具与职责说明。下表与原文一致，是规划选题的最佳地图：

选型策略建议：优先从不同类别中各选一件（如“构建 + 测试 + 部署”），这既满足作业“Selección diversa”的要求，也能让你在答辩/评分时展示生态全景。

Formato de entrega: 模板必须逐项填写

作业要求对每件工具严格按以下模板输出，不要自由发挥格式：

### [Tool Name] - [Category] **Purpose:** [2-3 sentences explaining why developers use this tool] **Documentation:** [Official website/documentation link] **Workflow Integration:** [1 sentence about how it fits into development process]

字段含义对照（结合作业原文）：

• ### [Tool Name] - [Category]：标题 = 工具名 + 类别，一眼定位；
• **Purpose:**：2～3 句，讲“为什么用”和“解决什么问题”，避免只描述“它是干什么的”；
• **Documentation:**：官方文档链接（工具官网/官方文档库）；
• **Workflow Integration:**：1 句话说明它如何嵌入开发流程（例如“在 CI 流水线的 merge request 阶段自动运行”）。

Directrices de calidad: 五项质量准则

作业明确列出了评价“好答案”的五条标准，答题前应逐条自检：

• Elige herramientas actuales: Selecciona herramientas que estén activamente mantenidas y ampliamente usadas en 2025（选 2025 年仍在积极维护、被广泛使用的工具）；
• Centra en el valor: Explica los beneficios específicos, no solo qué hace la herramienta（讲具体收益，而非复述功能）；
• Contexto profesional: Considera herramientas utilizadas por equipos de desarrollo, no solo aficionados individuales（面向团队工作流，而非个人爱好）；
• Selección diversa: Escoge herramientas de categorías diferentes para mostrar la amplitud del ecosistema（跨类别选题，展示生态广度）；
• Relevancia moderna: Prioriza herramientas que estén alineadas con tendencias y buenas prácticas actuales de desarrollo web（与当下最佳实践对齐）。

Rúbrica: 评分标准即自我检查清单

作业附带的评分表（Rubric）从四个维度区分“Excelente / Bueno / Necesita Mejorar”。写作前把它当成 checklist：

可以这样解读四个维度：价值解释（为什么用）>官方信源（链接权威性）>时效与多样性（2025 年 + 跨类别）>工作流语境（嵌入流程）。四条全绿即为“Excelente”。

Consejo de investigación: 去哪里找“好工具”

作业结尾给出的研究建议（Research Tip）是三条可操作的搜索路径：

Busca herramientas mencionadas en ofertas de trabajo para desarrolladores web, revisa encuestas populares a desarrolladores o explora las dependencias utilizadas por proyectos open source exitosos en GitHub.

即：① 看 Web 开发者招聘 JD 中反复出现的工具名；② 查主流开发者年度调查（如 State of JS/CSS 类问卷）；③ 直接翻优秀开源项目的依赖清单。第三条在本仓库内就能立刻实践——见下一节。

仓库实证：Web-Dev-For-Beginners 自己就在用这些工具

本作业最棒的学习素材之一，就是这个仓库本身。它旗下的子项目真实依赖了作业分类表中的大量工具，你可以打开它们的配置文件逐条对照：

• quiz-app/package.json：一个基于Vite（构建工具）与 Vue 3 的测验应用。devDependencies 中声明了vite: ^6.4.2、eslint（代码质量）、eslint-plugin-vue（Vue 规则），并配置了dev（vite）、build（vite build）、preview、lint四个 npm scripts。其 vite.config.js 通过@vitejs/plugin-vue加载 Vue 单文件组件，并用resolve.alias把@指向./src——这正是“构建工具如何工作”的活例子；
• memory-game/package.json：基于Next.js 16+React 19+Tailwind CSS v4的记忆翻牌游戏，scripts 使用next dev --turbopack与next build --turbopack。Tailwind CSS 对应作业分类表中的“Frameworks de CSS”，Next.js 框架本身则代表现代元框架工作流（SSR/静态生成），入口组件见 memory-game/app/page.js；
• 7-bank-project/api/package.json：银行项目后端 API 使用Express（API 开发/服务端框架），devDependencies 同时声明了ESLint（lint 脚本）与Prettier（format脚本，--single-quote风格化输出）——一次展示“代码质量工具链”如何与 Express 共存；
• 5-browser-extension/solution/package.json：Chrome/Edge 浏览器扩展使用webpack 5作为打包器（"build": "webpack"、"watch": "webpack --watch"），并依赖axios发起网络请求，对应分类表中的“Herramientas de Build”与“Desarrollo de API”；

💡 把这些 package.json 当作“参考答案”来读：观察一个专业项目如何用dependencies（运行时依赖）与devDependencies（开发期工具）区分工具角色、如何通过 scripts 固化dev/build/lint/format流程。这本身就是“Workflow Integration”维度最真实的论据。

一个示例思路：如何组织你的三项选题

作业没有固定答案，但结合质量准则与仓库证据，一个“Excelente”级别的答题结构可以这样走（示例，非标准答案）：

1. Herramientas de Build —— esbuild：说明它用 Go 编写、以极快打包速度著称，适合作为大型 Vite/Webpack 链路中的底层转译器；官方文档链接放在**Documentation:**；工作流句可写“作为 CI 中快速压缩/转译 TS 的步骤”。
2. Frameworks de Pruebas —— Playwright：讲清它解决“端到端测试跨浏览器一致性问题”，可在部署前自动回归关键用户路径。
3. Plataformas de Despliegue —— Vercel：说明它与 Git 仓库联动、提交即触发 CI/CD 预览部署，与 Next.js 生态天然契合（本仓库的 memory-game 正是 Next.js 项目，可作上下文佐证）。

每一条都填满模板四字段、附官方文档、强调“解决什么问题”而非“是什么”，即满足全部五项质量准则。

结语与自检清单

完成三份工具报告后，建议按顺序做最后四步自检：

1. 约束检查：确认三件工具都不在课程已覆盖名单（编辑器/浏览器/命令行）内；
2. 信源检查：三个**Documentation:**链接是否全部指向官方文档/官网；
3. 多样性检查：三件工具是否来自不同类别（对照九类表）；
4. 价值检查：每段的Purpose是否回答“为什么用 / 解决什么问题”，而非机械复述功能。

这门课程的本意是让你在写第一行代码前，先以“开发者侦探”的视角看清整个工具生态。本作业正是这个旅程的第一站——完成它，你就已经掌握了专业开发者日常使用工具、阅读文档、评估依赖链的基本方法，后续所有项目（从 3-terrarium 到 10-ai-framework-project）都会在这些工具的支撑下展开。

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners