Skip to content

Latest commit

 

History

History
637 lines (392 loc) · 30.5 KB

File metadata and controls

637 lines (392 loc) · 30.5 KB

三、建立开发环境

既然您已经熟悉了 WebAssembly 的元素,那么是时候设置一个合适的开发环境了。用 WebAssembly 开发相当于用 C 或 C++ 开发。区别在于构建过程和输出。在本章中,我们将介绍开发工具,以及如何在您的系统上安装和配置它。

本章的目标是理解以下内容:

  • 如何安装所需的开发工具(Git、Node.js 和 Visual Studio 代码)
  • 如何使用扩展将 Visual Studio 代码配置为与 C/C++ 和 WebAssembly 一起使用
  • 如何设置本地 HTTP 服务器来提供 HTML、JavaScript 和.wasm文件
  • 正在检查您的浏览器是否支持 WebAssembly
  • 有哪些有用的工具可以简化和改进开发过程

安装开发工具

您需要安装一些应用和工具来开始开发 WebAssembly。我们将使用 Visual Studio Code(一个文本编辑器)来编写我们的 C/C++、JavaScript、HTML 和 Wat。我们还将使用 Node.js 来提供文件,并使用 Git 来管理我们的代码。我们将使用包管理器来安装这些工具,这使得安装过程比手动下载和安装它们简单得多。在本节中,我们将介绍操作系统,以及每个平台的包管理器。我们还将回顾每个应用,简要概述它们在开发过程中的作用。

操作系统和硬件

为了确保安装和配置过程顺利进行,了解我将在本书示例中使用的操作系统非常重要。如果您遇到问题,可能是因为您正在使用的平台和我正在使用的平台不兼容。在大多数情况下,你不应该有问题。为了避免操作系统版本成为潜在的问题原因,我在下面的列表中提供了我正在使用的操作系统的详细信息:

苹果电脑

  • 高塞拉,版本 10.13.x
  • 2.2 GHz 英特尔 i7 处理器
  • 16 GB 内存

人的本质

  • 运行在 VMware Fusion 中的 Ubuntu 16.04 LTS
  • 2.2 千兆赫英特尔 i7 处理器
  • 4 GB 内存

Windows 操作系统

  • 在 VMware Fusion 中运行的 Windows 10 Pro
  • 2.2 千兆赫英特尔 i7 处理器
  • 8 GB 内存

包管理器

包管理器是简化软件安装过程的工具。它们允许我们从命令行升级、配置、卸载和搜索可用软件,而不必去网站下载和运行安装程序。它们还简化了软件的安装过程,这些软件可能有多个依赖项,或者在使用前需要手动配置。在本节中,我将介绍每个平台的包管理器。

苹果电脑自制程序

Homebrew 是一个优秀的 macOS 软件包管理器,它允许我们安装大部分开箱即用的工具。自制就像在终端中粘贴以下命令并运行它一样简单:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

您将在终端中看到消息,这些消息将引导您完成安装过程。一旦完成,你将需要为自制程序安装一个名为自制程序-木桶的扩展,允许你安装 macOS 应用,而不必下载安装程序,安装它,并将应用拖到Applications文件夹中。您可以通过运行以下命令来安装:

brew tap caskroom/cask

就这样!您现在可以通过运行以下任一命令来安装应用:

# For command line tools: brew install <Tool Name> 
# For desktop applications:
brew cask install <Application Name>

适合 Ubuntu

Apt 是 Ubuntu 提供的包管理器;没有必要安装它。它允许您安装现成的命令行工具和应用。如果 Apt 的存储库中没有应用,您可以使用以下命令添加存储库:

add-apt-repository 

窗户巧克力

巧克力是 Windows 的一个包管理器。它类似于 Apt,因为它允许您安装命令行工具和应用。要安装巧克力,您需要以管理员身份运行命令提示符(cmd.exe)。您可以通过按“开始”菜单按钮,键入 cmd,右键单击命令提示符应用并选择“以管理员身份运行”来完成此操作:

Running the Command Prompt as an administrator

然后只需运行以下命令:

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" &amp;&amp; SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

The easiest way to get the command text is through Chocolatey's installation page at https://chocolatey.org/install. There's a button to copy the text to your clipboard under the Install with cmd.exe section. You could also install the application using PowerShell if you follow the steps on the Installation page.

饭桶

Git 是一个版本控制系统(【VCS】),允许您跟踪文件的更改,并管理贡献相同代码库的多个开发人员之间的工作。Git 是为 GitHub 和 GitLab 提供动力的 VCS,也可以在 Bitbucket 上获得(他们也提供 Mercurial,这是另一个 VCS)。Git 将允许我们从 GitHub 克隆存储库,并且是 EMSDK 的先决条件,我们将在下一章中介绍。在本节中,我们将介绍 Git 的安装过程。

在 macOS 上安装 Git

如果你正在使用苹果操作系统,Git 可能已经可用了。macOS 与 Apple Git 捆绑在一起,这可能会比最新版本落后几个版本。就本书而言,您已经安装的版本应该足够了。如果您希望升级,您可以通过在终端中运行以下命令,使用自制程序安装最新版本的 Git:

# Install Git to the Homebrew installation folder (/usr/local/bin/git):
brew install git

# Ensure the default Git is pointing to the Homebrew installation:
sudo mv /usr/bin/git /usr/bin/git-apple

如果运行这个命令,应该会看到/usr/local/bin/git:

which git

您可以通过运行以下命令来确保安装成功:

git --version

在 Ubuntu 上安装 Git

可以使用apt安装 Git 只需在终端中运行以下命令:

sudo apt install git

您可以通过运行以下命令来确保安装成功:

git --version

在 Windows 上安装 Git

你可以用巧克力来安装 Git。打开命令提示符或 PowerShell 并运行以下命令:

choco install git

您可以通过运行以下命令来确保安装成功:

git --version

You can bypass the confirmation messages by adding a -y to the end of the install command (for example, choco install git -y). You can also opt to always skip the confirmation by entering the   choco feature enable -n allowGlobalConfirmation command.

Node.js

Node.js 的官方网站将其描述为异步事件驱动的 JavaScript 运行时。Node 旨在构建可扩展的网络应用。我们将在本书中使用它来提供我们的文件,并在浏览器中使用它们。Node.js 自带npm,这是一个用于 JavaScript 的包管理器,它将允许我们全局安装包并通过命令行访问它们。在本节中,我们将介绍使用节点版本管理器 ( nvm )的每个平台的安装过程。

nvm

我们将使用 Node.js(版本 8)的长期稳定的 ( LTS )版本来确保我们使用的是平台最稳定的版本。我们将使用nvm来管理 Node.js 版本。如果您的计算机上已经安装了较高(或较低)版本的 Node.js,这将防止冲突。nvm允许您安装多个版本的 Node.js,您可以在单个终端窗口的上下文中快速切换和隔离。

在 macOS 上安装 nvm

在终端中运行以下命令:

brew install nvm

遵循家酿指定的安装后步骤,以确保您可以开始使用它(您可能需要重新启动您的终端会话)。如果在执行这些步骤之前清除了终端内容,则可以运行此命令再次查看安装步骤:

brew info nvm

您可以通过运行以下命令来确保安装成功:

nvm --version

在 Ubuntu 上安装 nvm

Ubuntu 附带了wget,可以使用 HTTP/S 和 FTP/S 协议检索文件。nvm(https://github.com/creationix/nvm)的 GitHub 页面包含以下使用wget进行安装的命令:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安装完成后,重新启动终端以完成安装。您可以通过运行以下命令来检查以确保安装成功:

nvm --version

在 Windows 上安装 nvm

nvm目前不支持 Windows,所以你实际上是在安装一个名为nvm的不同应用——Windows。nvm视窗的 GitHub 页面可以在https://github.com/coreybutler/nvm-windows找到。有些命令略有不同,但我们运行的安装命令将是相同的。要安装nvm窗口,请打开命令提示符或 PowerShell 并运行以下命令:

choco install nvm

您可以通过运行以下命令来检查以确保安装成功:

nvm --version

使用 nvm 安装 Node.js

安装nvm后,需要安装我们在本书中要用到的 Node.js 版本:8.11.1 版本。要安装它,请运行以下命令:

nvm install 8.11.1

如果您之前没有安装 Node.js 或nvm,它会自动将其设置为默认的 Node.js 安装,因此该命令的输出应该是v8.11.1:

node --version

如果您已经安装了现有的 Node.js 版本,您可以使用 v8.11.1 作为默认版本,或者确保在阅读本书中的示例时运行此命令来使用 v8.11.1:

nvm use 8.11.1

You can create a file named .nvmrc in the folder with your code and populate it with the contents v8.11.1. You can run nvm use within this directory and it will set the version to 8.11.1 without having to specify it.

GNU make 和 rimraf

learn-webassembly存储库中,代码示例使用 GNU Make 和 VS Code 的 Tasks 特性(我们将在第 5 章创建和加载 WebAssembly 模块中介绍)来执行本书中定义的构建任务。GNU Make 是一个优秀的跨平台工具,用于自动化构建过程。你可以在https://www.gnu.org/software/make阅读更多关于 GNU Make 的内容。让我们回顾一下每个平台的安装步骤。

macOS 和 Ubuntu 上的 GNU Make

如果你用的是 macOS 或者 Linux,应该已经安装了 GNU make。要验证这一点,请在终端中运行以下命令:

make -v

如果你看到版本信息,你就准备好了。跳到安装轮辋部分。否则,请遵循您的平台的 GNU Make 安装说明。

在 macOS 上安装 GNU Make

要在 macOS 上安装 GNU Make,请从终端运行以下命令:

brew install make

您可以通过运行以下命令来确保安装成功:

make -v

如果您看到版本信息,请跳到安装 rimraf 部分。

在 Ubuntu 上安装 GNU Make

要在 Ubuntu 上安装 GNU Make,请从终端运行以下命令:

sudo apt-get install make

您可以通过运行以下命令来确保安装成功:

make -v

如果看到版本信息,跳到安装轮圈部分。

在 Windows 上安装 GNU make

你可以用巧克力在 Windows 上安装 GNU make。打开命令提示符或 PowerShell 并运行以下命令:

choco install make

您可能需要重新启动命令行界面才能使用make命令。重新启动后,运行以下命令来验证安装:

make -v

如果您看到版本信息,请继续下一节。如果遇到问题,可能需要在http://gnuwin32.sourceforge.net/packages/make.htm下载安装安装包。

安装 rimraf

在生成文件或 VS 代码任务中定义的一些构建步骤会删除文件或目录。删除文件或文件夹所需的命令因平台和 shell 而异。为了解决这个问题,我们将使用rimraf npm包(https://www.npmjs.com/package/rimraf)。全局安装软件包提供了一个rimraf命令,用于对操作系统和外壳执行正确的删除操作。

要安装rimraf,请确保安装了 Node.js,并从命令行界面运行以下命令:

npm install -g rimraf

要确保安装成功,请运行以下命令:

rimraf --help

您应该会看到使用说明和命令行标志列表。让我们继续进行 VS 代码安装。

VS 代码

VS Code 是一个跨平台的文本编辑器,具有多语言支持和丰富的扩展生态系统。内置了集成调试和 Git 支持,并且一直在添加新功能。在本书的整个过程中,我们可以在整个 WebAssembly 开发过程中使用它。在本节中,我们将介绍每个平台的安装步骤:

Screenshot from Visual Studio Code's website

在苹果电脑上安装 Visual Studio 代码

使用自制酒桶安装 VS 代码。在终端中运行以下命令进行安装:

brew cask install visual-studio-code

一旦完成,您应该能够从Applications文件夹或启动板启动它。

在 Ubuntu 上安装 Visual Studio 代码

在 Ubuntu 上安装 VS 代码的过程有一些额外的步骤,但仍然相对简单。首先从 VS Code 的下载页面(https://code.visualstudio.com/Download下载.deb文件。下载完成后,运行以下命令来完成安装:

# Change directories to the Downloads folder
cd ~/Downloads

# Replace <file> with the name of the downloaded file
sudo dpkg -i <file>.deb

# Complete installation
sudo apt-get install -f

如果出现缺失依赖错误,可以在sudo dpkg之前运行以下命令进行修复:

sudo apt-get install libgconf-2-4
sudo apt --fix-broken install

你现在应该可以从启动器打开 VS 代码了。

在 Windows 上安装 VS 代码

你可以用巧克力来安装 VS 代码。从命令提示符或 PowerShell 运行此命令:

choco install visualstudiocode

安装后,您可以从“开始”菜单访问它。

You can open VS Code with the current working directory as the project by running code . in the CLI.

配置 VS 代码

开箱即用,VS Code 是一个功能强大的文本编辑器,有很多很棒的功能。除了高度可配置和可定制之外,它还拥有极其丰富的扩展生态系统。我们需要安装其中的一些扩展,这样我们就不需要为不同的编程语言使用不同的编辑器。在本节中,我们将介绍如何配置 VS 代码以及安装哪些扩展来简化 WebAssembly 开发过程。

管理设置和自定义

定制和配置 VS 代码既简单又直观。您可以通过选择“代码|首选项| macOS 上的设置”或“文件|首选项| Windows 上的设置”来管理自定义设置,如编辑器字体和选项卡大小。用户和工作区设置是在 JSON 文件中单独管理的,并且提供了自动完成功能,以防您记不住设置的确切名称。您也可以通过在“首选项”菜单中选择适当的选项来更改主题或键盘快捷键。设置文件也是您可以为安装的任何扩展设置自定义设置的地方。默认情况下,有些设置是在安装扩展时添加的,因此更改它们就像更新和保存此文件一样简单。

扩展概述

作为配置过程的一部分,我们需要安装一些扩展。在 VS 代码中有多种方法可以找到并安装扩展。我更喜欢单击扩展按钮(编辑器左侧活动栏顶部的第四个按钮),在搜索框中输入我要查找的内容,然后按下我要安装的扩展的绿色安装按钮。您也可以访问位于https://marketplace.visualstudio.com/vscode的 VS 代码市场,搜索并选择您想要安装的扩展,然后按下扩展页面上的绿色安装按钮。您也可以通过命令行管理扩展。更多信息,请访问https://code.visualstudio.com/docs/editor/extension-gallery:

Installing extensions in VS Code

C/C++ 和网络程序集的配置

VS Code 不支持现成的 C 和 C++ 语言,但是有一个很好的扩展可以让你使用这些语言。它也不支持 WebAssembly 文本格式的语法高亮显示,但是有一个扩展也添加了这一功能。在本节中,我们将介绍用于 VS 代码的 C/C++ 和用于 VS 代码扩展的WebAssembly 工具包的安装和配置。

为 VS 代码安装 C/C++

VS 代码的 C/C++ 扩展包括几个用于编写和调试 C 和 C++ 代码的特性,例如自动完成、符号搜索、类/方法导航、逐行代码步进以及许多其他特性。要安装扩展,请在扩展中搜索 C/C++,然后安装名为 C/C++(由微软创建)的扩展,或者导航到位于https://marketplace.visualstudio.com/items?的扩展官方页面 itemName=ms-vscode.cpptools 并按下绿色的安装按钮。

安装后,您可以通过从 VS 代码中的扩展列表中选择扩展并选择贡献选项卡来查看扩展的配置详细信息。此选项卡包含各种设置、命令和调试器详细信息:

Contributions tab for the C/C++ extension

为 VS 代码配置 C/C++

微软有一个扩展的官方页面,你可以在https://code.visualstudio.com/docs/languages/cpp查看。该页面描述了如何通过使用 JSON 文件进行配置。让我们从创建一个新的配置文件来管理我们的 C/C++ 环境开始。按下 F1 键,输入 C/C,选择 C/Cpp:编辑配置…,即可生成新的配置文件;

Command Palette with C/C++ extension options

这将在当前项目的.vscode文件夹中生成一个新的c_cpp_properties.json。该文件将包含基于您的平台的 C/C++ 编译器的配置选项、要使用的 C 和 C++ 标准以及头文件的包含路径。文件生成后,您可以将其关闭。我们将在配置 EMSDK 时重新讨论它。

虚拟代码 WebAssembly 工具包

目前有几种不同的 VS 代码的 WebAssembly 扩展可用。我使用的是 VSCode 扩展的 WebAssembly 工具包,因为它允许你右击一个.wasm文件并选择 Show WebAssembly,它会显示文件的 Wat 表示。您可以通过扩展面板(搜索 WebAssembly)或从 VS 代码市场(https://marketplace.visualstudio.com/items?)的官方扩展页面安装此扩展 itemName=dtsvet.vscode-wasm ):

Viewing the Wat for a .wasm file using the WebAssembly Toolkit for the VS Code extension

安装完成后,您就可以出发了!现在您已经获得了所有必需的扩展,让我们来评估一些可以简化常见任务的可选扩展。

其他有用的扩展

VS Code 有一些很棒的扩展来提高效率和定制界面。在本节中,我将介绍一些我已经安装的扩展,它们简化了常见任务以及用户界面/图标主题。对于本书中的示例,您不需要安装任何这些扩展,但是您可能会发现其中一些很有用。

自动重命名标签

这个扩展在处理 HTML 时非常有用。如果您更改标签类型,它会自动更改结束标签的名称。例如,如果您有一个<div>元素,并且您想要使它成为一个<span>,将开始元素的文本更改为span将会更新结束元素的文本(</div></span>):

Auto renaming tag renaming HTML tag

括号对着色

这个扩展为代码中的括号、大括号和圆括号着色,以便快速识别左括号和右括号。WebAssembly 的文本格式广泛使用括号,因此能够确定哪些元素包含在哪个列表中使得调试和评估更加简单:

Bracket pair colorizer color matching parentheses in a Wat file

材质图标主题和原子一光主题

VS 代码市场上有 1000 多个图标和界面主题。我将材质图标主题和 Atom One Light 主题包含在这一部分中,因为它们在本书的截图中使用。材质图标主题非常受欢迎,下载量超过 200 万次,而 Atom One Light 主题的下载量超过 7 万次:

Icons in the Material Icons theme

为网络设置

与 Wasm 模块的交互和调试将在浏览器中完成,这意味着我们需要一种方法来提供一个包含示例文件的文件夹。正如我们在第 2 章中讨论的 WebAssembly 元素——Wat、Wasm 和 JavaScript API ,WebAssembly 被集成到浏览器的 JavaScript 引擎中,但是您需要确保您使用的是支持它的浏览器。在本节中,我们将提供克隆书籍示例存储库的说明。我们还将回顾如何快速设置本地 web 服务器来测试和评估浏览器选项,以确保您能够在本地开发。

克隆图书范例库

现在,您可能想用本书中包含的所有示例来克隆 GitHub 存储库。您肯定需要有第 7 章的可用代码,从零开始创建应用,因为应用的代码库太大,无法放入单个章节。选择硬盘上的一个文件夹,并运行以下命令来克隆存储库:

git clone https://github.com/mikerourke/learn-webassembly

克隆过程完成后,您会发现示例是按章节组织的。如果一个章节中有几个例子,它们会被章节文件夹中的子文件夹分解。

If you're using Windows, do not clone the repository into the \Windows folder or any other folder with limited permissions. Otherwise, you will run into issues when attempting to compile the examples.

安装本地服务器

我们将使用npmserve来提供文件。要安装,只需运行以下命令:

npm install -g serve

安装完成后,您可以在任何文件夹中提供文件。为了确保它正常工作,让我们尝试提供一个本地文件夹。该部分的代码位于learn-webassembly存储库的/chapter-03-dev-env文件夹中。按照以下说明验证您的服务器安装:

  1. 首先,让我们创建一个文件夹,其中包含我们将在本书剩余部分中处理的代码示例(示例使用名称book-examples)。

  2. 启动 VS 代码并选择文件|打开...从 macOS/Linux 的菜单栏中,选择文件|打开文件夹...对于 Windows。

  3. 接下来,选择文件夹,book-examples,并按下打开(或选择文件夹)按钮。

  4. 一旦 VS 代码完成加载,在 VS 代码文件浏览器中右键单击,从菜单中选择新建文件夹,并命名文件夹chapter-03-dev-env

  5. 选择chapter-03-dev-env文件夹,按【新建文件】按钮(或Cmd/Ctrl+N)新建一个文件。命名文件index.html并用以下内容填充:

<!doctype html>
<html lang="en-us">
  <title>Test Server</title>
</head>
<body>
  <h1>Test</h1>
  <div>
    This is some text on the main page. Click <a href="stuff.html">here</a>
    to check out the stuff page.
  </div>
</body>
</html>
  1. 在名为stuff.htmlchapter-03-dev-env文件夹中创建另一个文件,并用以下内容填充:
<!doctype html>
<html lang="en-us">
<head>
  <title>Test Server</title>
</head>
<body>
  <h1>Stuff</h1>
  <div>
    This is some text on the stuff page. Click <a href="index.html">here</a>
    to go back to the index page.
  </div>
</body>
</html>
  1. 我们将使用 VS Code 的集成终端来提供文件。您可以通过选择查看|集成终端,或使用键盘快捷键 Ctrl + * (在 *Esc* 键下的 * 是倒勾键)进行访问。加载后,运行以下命令来提供工作文件夹:
serve -l 8080 chapter-03-dev-env

您应该会看到以下内容:

Results of running the serve command in terminal

-l 8080标志告诉serve在港口8080提供文件夹。第一个链接(http://127.0.0.1:8080)只能在您的计算机上访问。以下可用于从本地网络上的另一台计算机访问页面的任何链接。如果您导航到浏览器中的第一个链接(http://127.0.0.1:8080/index.html),您应该会看到:

Test page served up in Google Chrome

点击此处链接将带您进入素材页面(地址栏将显示127.0.0.1:8080/stuff.html。如果一切正常,是时候验证你的浏览器了。

验证您的浏览器

为了确保您能够在浏览器中测试示例,您需要确保有一个全局WebAssembly对象可用。为了防止与浏览器兼容性相关的任何问题,我建议您安装谷歌 Chrome 或 Mozilla Firefox 进行开发。如果您事先安装了这些浏览器中的任何一个,那么您的浏览器很有可能已经有效了。为了彻底起见,我们仍将介绍验证过程。在本节中,我将回顾您可以采取的步骤,以确保您的浏览器支持 WebAssembly。

验证谷歌浏览器

验证 Chrome 的过程非常简单。选择看起来像三个垂直点的按钮(地址栏旁边),选择更多工具 | 开发者工具或使用键盘快捷键Cmd/Ctrl+Shift+I:

Accessing Developer Tools in Google Chrome

出现开发者工具窗口后,选择控制台选项卡,输入WebAssembly,按*回车。*如果你看到这个,你的浏览器是有效的:

Results of WebAssembly validation in Google Chrome's Developer Tools console

正在验证 Mozilla Firefox

火狐的验证过程与谷歌 Chrome 几乎完全相同。从菜单栏中选择工具 | 网络开发人员 | 切换工具或使用键盘快捷键Cmd/Ctrl+Shift+I:

Accessing Developer Tools in Mozilla Firefox

选择控制台选项卡,在命令输入框内点击,输入WebAssembly,按进入。如果您的火狐版本有效,您将会看到以下内容:

Results of WebAssembly validation in Mozilla Firefox's Developer Tools console

正在验证其他浏览器

其他浏览器的验证过程基本相同;不同浏览器之间唯一不同的验证方面是如何访问开发人员工具。如果通过您正在使用的浏览器的控制台可以获得一个WebAssembly对象,您可以使用该浏览器进行 WebAssembly 开发。

其他工具

除了我们在前面几节中介绍的应用和工具之外,还有一些非常棒的工具可以免费使用,并且功能丰富,可以极大地改进您的开发过程。我没有时间一一介绍,但我想强调一下我经常使用的那些。在这一节中,我将简要回顾一些适用于每个平台的流行工具和应用。

用于 macOS 的 iTerm2

默认的 macOS 安装包括终端应用,终端,这在本书中已经足够使用了。如果你想要一个功能更全的终端,iTerm2 是一个很好的选择。它提供了诸如拆分窗口、广泛定制、多个配置文件等功能,以及可以显示注释、运行作业、命令历史等的 Toolbelt 功能。您可以从官方网站(https://www.iterm2.com/)下载镜像文件并手动安装,或者使用以下命令用自制酒桶安装 iTerm:

brew cask install iterm2

这是 iTerm2 在工具带打开和多个编辑器窗口的情况下运行:

ITerm instance with multiple panes and Toolbelt

Ubuntu 的终结者

Terminator 是 Ubuntu 的 iTerm 和cmder,终端仿真器,允许在一个窗口中有多个标签和窗格。Terminator 还提供了拖放、查找功能以及大量插件和主题等功能。可以通过apt安装终结者。要确保您使用的是最新版本,请在终端中运行以下命令:

sudo add-apt-repository ppa:gnome-terminator
sudo apt-get update
sudo apt-get install terminator 

参考截图:

Terminator screenshot taken from http://technicalworldforyou.blogspot.com B09984_03_17

Windows 的 cmder

cmder是 Windows 的控制台模拟器,为标准的命令提示符或 PowerShell 增加了很多功能和特性。它提供了多个选项卡和自定义等功能。它允许您在同一个程序中打开不同外壳的实例。您可以从官方网站(cmder.net)下载并安装它,或者使用以下命令用巧克力安装它:

choco install cmder

事情是这样的:

cmder screenshot from the official website

Zsh 和 Oh-我的-Zsh

Zsh 是一个在 Bash 基础上改进的交互式外壳。Oh-My-Zsh 是 Zsh 的一个配置管理器,有很多有用的插件。你可以在他们的网站上看到整个名单(https://github.com/robbyrussell/oh-my-zsh)。例如,如果您想要命令行界面中强大的自动完成和语法突出显示功能,可以使用 zsh-autosuggestion 和 zsh-语法突出显示等插件。您可以在 macOS、Linux 和 Windows 上安装和配置 Zsh 和 Oh-My-Zsh。Oh-My-Zsh 页面有安装说明以及主题和插件列表。

摘要

在本章中,我们介绍了开发工具的安装和配置过程,我们将使用该工具开始使用 WebAssembly。我们讨论了如何使用针对您的操作系统的包管理器(例如,用于 macOS 的自制程序)快速轻松地安装 Git、Node.js 和 VS Code。介绍了配置 VS 代码的步骤,以及可以添加以增强开发体验的必需和可选扩展。我们讨论了如何安装本地 web 服务器进行测试,以及如何验证您的浏览器以确保支持 WebAssembly。最后,我们简要回顾了一些您可以为您的平台安装的辅助开发工具。

第 4 章安装所需的依赖项中,我们将安装所需的依赖项并测试工具链。

问题

  1. 操作系统应该使用的软件包管理器的名称是什么?
  2. BitBucket 支持 Git 吗?
  3. 为什么我们使用 8 版的 Node.js 而不是最新的版本?
  4. 如何在 Visual Studio Code 中更改颜色主题?
  5. 如何在 Visual Studio 代码中访问命令面板?
  6. 如何检查浏览器是否支持 WebAssembly?
  7. 这三个操作系统都支持其他工具部分的哪个工具?

进一步阅读