客户端工具概览

现代工具概览

为 Web 编写软件随着时间的推移变得越来越复杂。尽管手动编写 HTML、CSS 和 JavaScript 仍然完全合理，但现在有大量的工具可供开发人员使用，以加快构建网站或应用程序的过程。

有一些非常成熟的工具已经成为开发社区中家喻户晓的“通用名称”，每天都有新的工具被编写和发布以解决特定问题。您甚至可能会发现自己编写了一段软件来帮助自己的开发过程，以解决现有工具似乎尚未处理的特定问题。

项目可以包含的工具数量之多，很容易让人不知所措。同样，像 webpack 这样的工具的单个配置文件可以长达数百行，其中大部分是似乎能完成任务的神奇咒语，但只有资深工程师才能完全理解！

即使是最有经验的 Web 开发人员，有时也会遇到工具问题；在甚至还没有触及一行应用程序代码之前，就可能浪费数小时尝试使工具管道正常工作。如果您过去曾为此苦恼，请不要担心 — 您并不孤单。

在这些文章中，我们不会回答关于 Web 工具的所有问题，但我们会为您提供一个有用的起点，让您了解基础知识，然后您可以以此为基础进行构建。与任何复杂的主题一样，从小处着手，然后逐步达到更高级的用途是好的。

现代工具生态系统

当今现代的开发工具生态系统非常庞大，因此对工具解决的主要问题有一个大致的了解很有用。如果您在最喜欢的搜索引擎上搜索“前端开发工具”，您将得到从文本编辑器到浏览器，再到可用于做笔记的笔的各种结果。

尽管您的代码编辑器选择无疑是一种工具选择，但本系列文章将超越这一点，专注于帮助您更高效地生成 Web 代码的开发工具。我们将推荐一些特定的工具，接下来的教程将向您展示如何使用它们。它们是撰写本文时流行且标准的工具。如果您了解其他工具的相对优势，这并不妨碍您使用它们。

从宏观角度来看，您可以将客户端工具分为以下四大类待解决问题：

• 环境 — 帮助您设置开发环境的工具，例如安装和运行其他工具。
• 安全网 — 在代码开发过程中有用的工具。
• 转换 — 以某种方式转换代码的工具，例如，将中间语言转换为浏览器可以理解的 JavaScript。
• 开发后 — 编写代码后有用的工具，例如测试和部署工具。

让我们更详细地了解这些。

环境

编辑器、操作系统和浏览器都是开发环境。我们将假设您已经选择了最适合您的环境。但是，在安装和运行其他工具之前，还需要做出两个选择：

• 您将在何处运行这些工具。大多数本地运行的工具都是用 JavaScript 编写的，因此您需要在计算机上安装一个可以从命令行调用的 JavaScript 解释器（而不是浏览器中的）。Node.js 仍然是行业标准，我们将使用它。Bun 旨在替代 Node.js，以其速度和强大的 API 而闻名。
• 您将如何安装工具，换句话说，就是包管理器。Node 默认提供 npm，所以我们将使用它。Yarn 和 pnpm 是其他流行的选择，各自具有速度、项目管理等优势。

安全网

这些工具使您编写的代码更好一点。

工具的这一部分应特定于您自己的开发环境，尽管公司通常会提供某种策略或预设配置供安装，以便所有开发人员都使用相同的流程。

这包括任何使您的开发过程更容易生成稳定可靠代码的东西。安全网工具还应帮助您防止错误或自动纠正错误，而无需每次都从头开始构建代码。

以下是一些开发人员常用的安全网工具类型。

代码检查工具

代码检查工具是检查代码并告诉您存在的任何错误、错误类型以及它们所在的行号的工具。通常，代码检查工具不仅可以配置为报告错误，还可以报告您团队可能正在使用的指定样式指南的任何违规行为（例如，使用错误数量的空格进行缩进，或使用 模板字面量 而不是常规字符串字面量）。

ESLint 是行业标准的 JavaScript 代码检查工具 — 一个高度可配置的工具，用于捕获潜在的语法错误并在您的代码中鼓励“最佳实践”。一些公司和项目还共享了他们的 ESLint 配置。

您还可以找到其他语言的代码检查工具，例如 stylelint。

源代码控制

源代码控制，也称为版本控制系统（VCS），对于备份工作和团队协作至关重要。典型的 VCS 涉及代码的本地版本，您对其进行更改。然后，您将更改“推送”到存储在某个服务器上的远程存储库中的代码的“主”版本。通常有一种方法可以控制和协调对代码“主”副本所做的更改以及何时进行更改，这样一组开发人员就不会一直互相覆盖工作。

Git 是当今大多数人使用的源代码控制系统。它主要通过命令行访问，但也可以通过友好的用户界面访问。将代码放在 Git 仓库中后，您可以将其推送到自己的服务器实例，或者使用托管的源代码控制网站，例如 GitHub、GitLab 或 Bitbucket。

我们将在本模块中使用 GitHub。您可以在 Git 和 GitHub 上找到更多相关信息。

代码格式化工具

代码格式化工具与代码检查工具有些相关，不同之处在于它们不是指出代码中的错误，而是通常确保您的代码根据您的样式规则正确格式化，理想情况下会自动修复它们发现的错误。

Prettier 是一个非常流行的代码格式化工具示例，我们将在本模块后面使用它。

类型检查器

类型检查器是帮助您编写更可靠代码的工具，它们通过检查您的代码是否在正确的位置使用正确的数据类型。这可以防止常见的错误类别，例如访问不存在的属性、意外的 undefined 等。

TypeScript 是 JavaScript 的事实标准类型检查器。它提供自己的类型注解语法，并且在某种程度上是一种独立的语言，因此我们不会在本模块中介绍它。

转换

Web 应用程序生命周期的这个阶段通常允许您编写“未来代码”（例如浏览器可能尚未原生支持的最新 CSS 或 JavaScript 功能）或完全使用另一种语言（例如 TypeScript）编写代码。然后，转换工具将为您生成与浏览器兼容的代码，以用于生产。

通常，Web 开发被认为是三种语言：HTML、CSS 和 JavaScript，并且所有这些语言都有转换工具。转换提供了三个主要好处（除其他外）：

1. 能够使用最新的语言功能编写代码，并将其转换为可在日常设备上运行的代码。例如，您可能希望使用尖端的新语言功能编写 JavaScript，但仍希望最终的生产代码在不支持这些功能的旧浏览器上运行。很好的例子包括：

   • Babel：一个 JavaScript 编译器，允许开发人员使用尖端 JavaScript 编写代码，然后 Babel 将其转换为更多浏览器可以理解的旧式 JavaScript。开发人员还可以编写和发布 Babel 插件。
   • PostCSS：做与 Babel 相同的事情，但用于尖端 CSS 功能。如果没有使用旧 CSS 功能的等效方法，PostCSS 将安装 JavaScript polyfill 来模拟您想要的 CSS 效果。

2. 选择用完全不同的语言编写代码，并将其转换为 Web 兼容语言。例如：

   • Sass/SCSS：此 CSS 扩展允许您使用变量、嵌套规则、混合、函数和许多其他功能，其中一些功能在原生 CSS 中可用（例如变量），而另一些则不可用。
   • TypeScript：TypeScript 是 JavaScript 的超集，提供了许多额外功能。TypeScript 编译器在生产构建时将 TypeScript 代码转换为 JavaScript。
   • 诸如 React、Ember 和 Vue 等框架：框架免费提供大量功能，并允许您通过基于原生 JavaScript 构建的自定义语法来使用它们。在后台，框架的 JavaScript 代码努力解释这种自定义语法并将其渲染为最终的 Web 应用程序。

3. 优化。这由打包工具提供，这些工具将您的代码准备好用于生产，例如通过“摇树”以确保只有您实际使用的代码库部分被放入最终生产代码中，或“压缩”以删除生产代码中的所有空格，使其在上传到服务器之前尽可能小。例如：

   • Webpack 长期以来一直是最受欢迎的打包工具，拥有大量的插件和强大的配置系统。然而，它也以设置复杂且与更现代的替代品相比速度慢而闻名。
   • Vite 是一种更现代的构建工具，以其速度、简单性和丰富的功能而闻名。

开发后

开发后工具确保您的软件发布到网络并持续运行。这包括部署流程、测试框架、审计工具等。

开发过程的这个阶段是您希望主动交互最少的阶段，因此一旦配置完成，它就会大部分自动运行，只有在出现问题时才会弹出打个招呼。

测试工具

这些通常采用工具的形式，该工具会自动对您的代码运行测试，以确保在您进一步操作之前（例如，当您尝试将更改推送到 GitHub 存储库时）它是正确的。这可以包括代码检查，但也可以包括更复杂的过程，例如单元测试，您可以在其中运行部分代码，确保它们按预期运行。

• 编写测试的框架包括 Jest、Mocha 和 Jasmine。
• 自动化测试运行和通知系统包括 Travis CI、Jenkins、Circle CI 和 其他。

部署工具

部署系统允许您发布网站，可用于静态和动态站点，并且通常与测试系统协同工作。例如，典型的工具链会等待您将更改推送到远程仓库，运行一些测试以查看更改是否正常，如果测试通过，则会自动将您的应用程序部署到生产站点。

GitHub Pages 与 GitHub 本身很好地集成在一起，并且对所有公共仓库都是免费的。其他服务，如 Netlify 和 Vercel 也非常受欢迎，它们具有慷慨的免费层配额、流畅的部署工作流和 GitHub 集成。

其他

在开发后阶段还有其他几种工具类型可供使用，包括用于收集代码质量指标的 Code Climate、用于执行跨浏览器兼容性和其他检查的运行时分析的 Webhint 浏览器扩展、用于提供更强大的 GitHub 功能的 GitHub bots、用于提供应用程序正常运行时间监控的 Updown 等等！

关于工具类型的一些思考

不同的工具类型在开发生命周期中确实有其应用顺序，但请放心，您不必为了发布一个网站而必须拥有所有这些工具。事实上，您不需要任何这些工具。然而，在您的流程中包含其中一些工具将改善您自己的开发体验，并可能提高您代码的整体质量。

新的开发工具通常需要一些时间才能在复杂性方面稳定下来。最著名的工具之一 webpack 以其过于复杂而闻名，但在最新的主要版本中，大力推动简化常见用法，因此所需的配置减少到绝对最低限度。

使用工具肯定没有万无一失的保证成功的方法，但随着经验的增加，您会找到适合您或您的团队及其项目的工作流程。一旦流程中的所有问题都解决了，您的工具链应该是一个您可以忘记它，并且它应该正常工作的东西。

如何选择特定工具并获得帮助

大多数工具倾向于独立编写和发布，因此尽管几乎肯定有可用的帮助，但它从不在同一个地方或以相同的格式。因此，很难找到使用工具的帮助，甚至很难选择使用哪种工具。关于哪些是最好的工具的知识有点部落化，这意味着如果您不是已经身处网络社区中，就很难确切地找出应该选择哪些工具！这就是我们撰写本系列文章的原因之一，希望能够提供否则难以找到的第一步。

您可能需要以下各项的组合：

• 有经验的老师、导师、同学或同事，他们有一些经验，以前解决过此类问题，可以提供建议。

• 一个有用的特定搜索地点。除非您已经知道要搜索的工具名称，否则针对前端开发工具的一般网络搜索通常毫无用处。

  • 例如，如果您使用 npm 包管理器管理依赖项，那么最好去 npm 主页 搜索您正在寻找的工具类型，例如，如果您想要日期格式化实用程序，可以尝试搜索“date”，如果您正在搜索通用代码格式化程序，可以搜索“formatter”。请注意流行度、质量和维护分数，以及包最近一次更新的时间。还要点击进入工具页面，了解一个包的月下载量，以及它是否有良好的文档，您可以用来判断它是否能满足您的需求。根据这些标准，date-fns 库 看起来是一个很好的日期格式化工具。您将在本模块的第 3 章中看到此工具的实际应用，并了解有关包管理器的更多信息。
  • 如果您正在寻找一个插件来将工具功能集成到您的代码编辑器中，请查看代码编辑器的插件/扩展页面——例如，参见 VS Code 扩展。查看首页上的特色扩展，并再次尝试搜索您想要的扩展类型（或工具名称，例如在 VS Code 扩展页面上搜索“ESLint”）。当您获得结果时，请查看诸如扩展有多少星级或下载量等信息，作为其质量的指标。

• 与开发相关的论坛，可以在上面提出关于使用哪些工具的问题，例如 MDN Learn Discourse 或 Stack Overflow。

当您选择要使用的工具时，第一个目的地应该是工具项目主页。这可能是一个功能完善的网站，也可能是一个代码仓库中的单一自述文件。date-fns 文档 例如，就非常出色、完整且易于遵循。然而，有些文档可能过于技术化和学术化，不适合您的学习需求。

相反，您可能想找一些专门的教程来学习如何使用特定类型的工具。一个很好的起点是搜索像 CSS Tricks、Dev、freeCodeCamp 和 Smashing Magazine 这样的网站，因为它们是针对 Web 开发行业的。

同样，您可能会在寻找适合您的工具时尝试多种不同的工具，试用它们，看看它们是否有意义、是否受到良好支持以及是否能实现您的预期。这很好——这都是学习的好机会，随着经验的增加，道路会变得更加顺畅。

总结

到此为止，我们对客户端 Web 工具的主题进行了高级的初步介绍。接下来我们将研究包管理器。

• 概述：理解客户端 Web 开发工具
• 下一页