安装基础软件

在这篇文章中,我们将讨论进行简单 Web 开发所需的软件以及哪些软件是现在就需要安装的,包括代码编辑器和现代 Web 浏览器。

前提: 基本熟悉你的电脑操作系统。
学习成果:
  • 理解入门需要使用哪些软件。
  • 安装一个代码编辑器,一些现代浏览器以及一个测试服务器。
  • 探索其他常见类型应用的可选项。

代码编辑器

对于任何开发人员来说,一个像样的代码编辑器都是他们机器上最重要的东西之一。除了编写代码之外,代码编辑器还提供了一系列其他功能。在本系列的后续文章中,我们将专门用一整篇文章介绍代码编辑器。

对于当前阶段,我们建议安装 Visual Studio Code,它支持多种平台,功能强大,支持丰富,而且是我们主要使用的编辑器。现在先安装它,本文的其余部分会以它为例展开。

现代 Web 浏览器

现代 Web 浏览器对于 Web 开发至关重要,你可以在访客使用的浏览器上测试你的网站或应用。此外,最好保持你的 Web 浏览器处于最新版本,以确保它们支持最新的 Web 技术并应用最新的安全修复。

备注: 大多数浏览器都会自动安装更新,在重启时切换到新版本。你通常也可以在浏览器的“关于”页面检查更新,例如(对于 macOS 的 Firefox/Chrome)在 Firefox > 关于 Firefox 或 Chrome > 关于 Google Chrome 中,或者(对于 Windows 的 Firefox/Chrome)在菜单图标 > 帮助 > 关于 Firefox 或菜单图标 > 帮助 > 关于 Google Chrome 中。

对于当前阶段,你应该安装几个桌面和移动/替代设备浏览器来测试你的代码。尽管 Web 浏览器通常在桌面端、笔记本电脑和移动设备上出现,但其他设备上的 Web 浏览器也并不罕见,例如平板电脑、手表和电视。如果可能的话,确保下面列表中每一行你都安装了至少一个浏览器(这样以避免仅在基于相同的渲染引擎的多个浏览器中测试):

本地 Web 服务器

通常情况下,当你在浏览器中输入网址加载网站时,浏览器会从世界某个地方的远程服务器上获取文件来组合渲染该网站。你将在本系列的下一篇文章中深入了解它是如何工作的。

当在本地(在你自己的机器上)创建网站时,你通常可以直接在浏览器中打开主 HTML 索引文件来进行测试。然而,一些例子需要在本地安装的 Web 服务器中运行。

我们找到的让本地服务器在你的电脑上可用的最简单方法之一,就是使用代码编辑器扩展——这样,你就可以直接在代码编辑器中使用了。在 Visual Studio Code 中,请按照以下步骤操作:

  1. 使用查看 > 扩展菜单选项打开扩展面板。
  2. 在面板顶部的“在应用商店中搜索扩展”框中,输入“live preview”。搜索结果的第一个应该就是微软创建的“Live Preview”扩展。
  3. 点击该选项,即可打开一个包含使用说明的扩展详情页。
  4. 点击安装按钮安装扩展。
  5. 现在,当你使用编辑器编辑 HTML 文件时,你就可以点击“Show Preview”按钮,在单独的标签页中打开实时示例。

上面的方案很简单,但不够灵活。在未来的开发中,你可能会需要一个更灵活的本地服务器方案,以便在其他浏览器中加载示例。有关其他可选方案(以及关于为什么我们需要本地服务器的更多背景信息),参见如何设置一个本地测试服务器?

图像编辑器

Web 开发者通常需要处理图像文件,以便在他们创建的网站上使用。这通常意味着设计/创建图像资产,同时,图像通常由图形设计师(可能是团队成员或第三方)提供,在这种情况下,Web 开发者可能需要裁剪或调整他们收到的文件。

MDN 学习区的文章不需要你创建自己的图像,但其中一些可能需要你调整我们提供的文件。

有很多图形编辑工具可供选择。如果你觉得你需要它,我们建议你在学习后期再考虑购买昂贵的商业产品。现在有很多免费软件工具和在线服务可能已经足够好了。

比如:

  • macOS 自带一个名为预览的工具。它主要用于查看图片和 PDF 文件,同时也具备一些非常实用的图像编辑功能,包括调整大小、旋转、裁剪、添加标记以及在不同文件类型之间转换。
  • Windows 内置的照片也有许多类似的功能。
  • tinypng 网站提供免费服务,可以压缩 PNG、JPEG 等格式的图片,这也是在为网站准备资源时经常会做的工作。

如果你有更实质性的图形编辑/创作需求,你可能需要一个完整的图形软件包。在商业产品中,Adobe Photoshop 长期以来一直是行业标杆,同时也有一些受欢迎的新兴产品,如 FigmaSketchCanva 可画

如果你预算有限,上述大多数应用都提供试用版或免费模式,值得一试。还有一些备受推崇的免费应用,如 GIMPAdobe ExpressPaint.NET

版本控制工具

版本控制工具被开发者用来管理服务器上的文件、与团队协作项目、共享代码和资源以及避免编辑冲突。目前,Git 是最受欢迎的版本控制系统,与 GitHubGitLab 等托管服务一起使用。

尽管版本控制工具对于 Web 开发团队至关重要,但你暂时无需担心这些。我们在核心模块系列的末尾专门有一个模块专门讲解版本控制

网站部署应用

完成网站或应用(在本地计算机或开发服务器上)的开发后,你可能想将其上传到远程 Web 服务器,这样用户就可以输入与之关联的网址,在 Web 上查看它了!

有各种方法可以做到这一点,比如购买托管服务并使用 SFTP 应用、使用 GitHub PagesNetlify 等服务,甚至使用 GlitchCodePen 等工具构建一个快速演示与他人分享。

这样的选项列表可能看起来令人眼花缭乱,但别担心——你暂时不需要了解任何关于发布网站的知识。我们会在课程中多次探讨这个主题,你很快就会在我们的你的第一个网站模块中获得实际经验。