客户端工具概述

随着时间的推移，为网络编写软件变得越来越复杂。虽然完全可以用“手工”编写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 扩展允许你使用变量、嵌套规则、mixin、函数和许多其他功能，其中一些功能在原生 CSS 中可用（例如变量），而另一些则不可用。
   • TypeScript：TypeScript 是 JavaScript 的超集，提供了一系列附加功能。TypeScript 编译器在构建生产环境时将 TypeScript 代码转换为 JavaScript。
   • React、Ember 和Vue 等框架：框架免费提供了许多功能，并允许你通过构建在原生 JavaScript 之上的自定义语法来使用它。在后台，框架的 JavaScript 代码努力解释此自定义语法并将其呈现为最终的 Web 应用程序。
3. 优化。这是由打包器提供的，打包器是使你的代码准备好用于生产环境的工具，例如通过“tree-shaking”确保仅将你实际使用的代码库部分放入最终的生产代码中，或者通过“压缩”删除生产代码中的所有空格，使其在上传到服务器之前尽可能小。例如
   • Webpack 长期以来一直是最流行的打包器，它具有大量的插件和强大的配置系统。但是，它也以设置相当复杂且与更新的替代方案相比速度较慢而闻名。

   • Vite 是一款更现代化的构建工具，因其速度快、简单易用且功能丰富而广受欢迎。

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

您希望在这个开发阶段尽可能减少主动交互，以便在配置完成后，它能够基本自动运行，只有在出现错误时才会提示。

测试工具

这些工具通常会自动对您的代码进行测试，以确保其正确性，然后再进行下一步操作（例如，当您尝试将更改推送到 GitHub 仓库时）。这可能包括代码风格检查，但也包括更复杂的流程，例如单元测试，您可以在其中运行部分代码，并确保其按预期运行。

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

部署工具

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

GitHub Pages 与 GitHub 本身很好地集成，并且所有公共仓库都可以免费使用。其他服务，例如 Netlify 和 Vercel，也非常受欢迎，它们提供慷慨的免费套餐配额、流畅的部署工作流程以及 GitHub 集成。

其他

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

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

新的开发工具通常需要一段时间才能稳定其复杂性。其中一个最著名的工具 Webpack 因其过于复杂的易用性而闻名，但在最新的主要版本中，开发团队大力推动了简化常用功能，因此所需的配置减少到最低限度。

当然，没有万能的工具可以保证使用工具的成功，但随着您经验的增长，您会找到适合**您**或您的团队及其项目的流程。一旦流程中的所有问题都得到解决，您的工具链就应该成为您可以忽略的东西，并且它**应该**能够正常工作。

大多数工具往往是独立编写和发布的，因此尽管几乎肯定有可用的帮助，但它们从未出现在相同的位置或格式中。因此，可能难以找到使用工具的帮助，甚至难以选择要使用的工具。关于哪些是最佳工具的知识有点像“部落知识”，这意味着如果您还没有加入 Web 社区，很难确切地知道哪些工具适合您！这就是我们撰写本系列文章的原因之一，希望能提供这个最初的步骤，否则很难找到。

您可能需要结合以下内容

• 经验丰富的教师、导师、同学或同事，他们具有一定的经验，以前解决过此类问题，并且可以提供建议。
• 一个有用的特定搜索位置。除非您已经知道要搜索的工具的名称，否则一般性的前端开发工具网络搜索通常毫无用处。
  • 例如，如果您使用 npm 包管理器来管理您的依赖项，那么最好访问 npm 主页 并搜索您要查找的工具类型，例如，如果您想要一个日期格式化实用程序，可以尝试搜索“date”，或者如果您正在搜索一个通用的代码格式化程序，可以搜索“formatter”。注意受欢迎程度、质量和维护分数，以及包上次更新的时间。还可以点击工具页面，了解包每月下载量，以及是否有良好的文档可以帮助您确定它是否满足您的需求。根据这些标准，date-fns 库 看起来是一个不错的日期格式化工具。您将在本模块的第 3 章中看到此工具的实际应用，并了解有关包管理器的更多信息。
  • 如果您正在寻找一个插件来将工具功能集成到您的代码编辑器中，请查看代码编辑器的插件/扩展页面——例如，请查看 VSCode 扩展。查看首页上的特色扩展，并再次尝试搜索您想要的扩展类型（或工具名称，例如在 VSCode 扩展页面上搜索“ESLint”）。获得结果后，查看扩展的星级或下载量等信息，作为其质量的指标。
• 与开发相关的论坛，例如 MDN Learn Discourse 或 Stack Overflow，您可以在这里询问有关使用哪些工具的问题。

当您选择了一个要使用的工具后，首先应该访问工具项目的主页。这可能是一个完整的网站，也可能是一个代码存储库中的单个自述文件。例如，date-fns 文档 非常棒，完整且易于理解。但是，有些文档可能相当技术性和学术性，不适合您的学习需求。

相反，您可能希望找到一些专门的教程，以了解如何开始使用特定类型的工具。一个很好的起点是在 CSS Tricks、Dev、freeCodeCamp 和 Smashing Magazine 等网站上搜索，因为它们是针对 Web 开发行业的。

同样，您可能会尝试使用多个不同的工具，以找到适合您的工具，尝试它们以查看它们是否有意义、是否得到良好支持以及是否满足您的需求。这很好——这对学习都有好处，并且随着您获得更多经验，这条道路会变得越来越平坦。

至此，我们完成了对客户端 Web 工具主题的高级概述。接下来，我们将为您提供一个关于命令行的速成课程，许多工具都是从这里调用的。我们将了解命令行可以做什么，然后尝试安装和使用我们的第一个工具。

• 概述：了解客户端 Web 开发工具
• 下一步