第 2 章 为您的项目安装强大的工具

查尔斯·F·凯特琳（Charles F.Kettering）的一句名言：

我的兴趣是未来，因为我将在那里度过余生。

这位才华横溢的发明家在我们开始思考如何编写软件之前，就给软件工程师留下了一条最重要的建议。然而，半个世纪后，我们仍在弄清楚为什么我们最终会出现意大利面条代码或“意大利面条心理模型”。

你是否曾经遇到过这样的情况：从以前的开发人员那里拿到代码，花了数周时间试图了解一切是如何工作的，因为没有可用的蓝图，非自解释代码变得难以调试？更遭的是，该项目不断增长，其复杂性也在不断增加。做出或破坏更改是危险的，没有人愿意触碰“丑陋”的遗留代码。重写整个代码库太昂贵了，所以现在的代码库每天都会引入新的 bug 修复和补丁。维护软件的成本远远高于开发软件的原始成本。

今天为未来编写软件意味着什么？我认为这归结为创建一个简单的心理模型，无论你的项目随着时间的推移变得多大，它都不会改变。当项目规模增长时，复杂性始终保持不变。这个心理模型是你的蓝图，一旦你理解了它，你就会明白你的软件是如何工作的。

如果你看一下现代 Web 开发，特别是前端开发，你会发现我们生活在一个令人兴奋的时代。互联网公司和个人开发者正在解决开发速度和成本与代码和用户体验质量之间的问题。

2013 年，Facebook 发布了 React，这是一个用于构建用户界面的开源 JavaScript 库。你可以访问 http://facebook.github.io/react/ 了解更多。2015 年初，Facebook 的 Tom Occhino 总结了 React 如此强大的原因：

React 用声明式 API 包装了一个命令式 API。React 的真正威力在于它如何让你编写代码。

声明式编程导致代码更少。它告诉计算机该做什么而不指定如何做，而命令式编程则描述如何做。

JavaScript 调用 DOM API 是命令式编程的一个例子。jQuery 是另一个这样的例子。

Facebook 多年来一直与 Instagram 和其他公司一起在生产中使用 React。它也适用于小型项目；下面是一个用 React 构建的购物清单示例：

http://fedosejev.github.io/shopping-list-react。我认为 React 是当下开发人员用于构建用户界面的最好的 JavaScript 库之一。

我的目标是让你了解 React 的基本原理。为了实现这一点，我将一次向你介绍一个 React 概念，解释它，并展示如何应用它。我们将逐步构建一个实时 web 应用，提出重要问题，并讨论 React 为我们提供的解决方案。

你将了解 Flux/Redux 和单向数据流。与 Flux/Redux 和 React 一起，我们将创建一个可预测和可管理的代码库，你可以通过添加新功能来扩展该代码库，而不会增加其复杂性。无论以后添加多少新功能，web 应用工作方式的思维模式都将保持不变。

与任何新技术一样，有些东西的工作原理与传统技术非常不同，就像你习惯的那样 React 也不例外。事实上，一些核心概念 React 可能看起来违反直觉，发人深省，甚至像是倒退。不要急于下结论。正如你所料，经验丰富的 Facebook 工程师在业务关键型应用的生产中构建和使用 React，他们对 React 的工作原理进行了大量思考。我给你的建议是，在学习 React 时，要保持开放的心态。我相信，在本书的结尾，这些新概念将融入其中，对你来说意义重大。

加入我学习 React 并听从 Charles F.Kettering 的建议的旅程。让我们照顾好我们的未来！

走近我们的项目

我坚信，学习新技术的最佳动机是一个让你兴奋的项目，你迫不及待地想建立它。作为一名经验丰富的开发人员，你可能已经构建了许多成功的商业项目，这些项目共享某些产品功能、设计模式，甚至目标受众。在这本书中，我希望你建立一个感觉像呼吸新鲜空气的项目。一个你很可能不会在日常工作中构建的项目。这必须是一项有趣的努力，它不仅能教育你，还能满足你的好奇心，拓展你的想象力。然而，假设你是一个忙碌的专业人士，这个项目对你来说也不应该是一个耗时的长期承诺。

进入 Snapterest，这是一个 web 应用，允许你发现和收集发布在 Twitter 上的公开照片。把它想象成一个 Pinterest（www.pinterest.com），图片的唯一来源是Twitter。我们将实现一个功能齐全的网站，具有以下核心功能：

• 实时接收和显示推文
• 向集合添加推文或从集合中删除推文
• 查看收集的推文
• 将推文集合导出为可以共享的 HTML 片段

当你开始从事一个新项目时，你要做的第一件事就是准备好你的工具。对于这个项目，我们将使用许多你可能不熟悉的工具，因此让我们讨论它们是什么，以及如何安装和配置它们。

如果你在安装和配置本章中的工具和模块时遇到任何问题，请转到 https://github.com/PacktPublishing/React-Essentials-Second-Edition 并新建问题：描述你正在做的事情以及收到的错误消息，我相信社区将帮助你解决问题。

在本书中，我将假设你正在使用 Macintosh 或 Windows 计算机。如果你是 Unix 用户，那么你很可能非常了解你的包管理器，安装本章将要学习的工具应该很容易。

让我们从 Node.js 的安装开始。

安装 Node 和 npm

Node.js 是一个平台，它允许我们使用我们都熟悉的 JavaScript 客户端语言编写服务器端应用。然而，Node 的真正好处。js 的优点是它使用了事件驱动的非阻塞 I/O 模型，这非常适合构建数据密集型实时应用。这意味着 Node.js，我们应该能够处理传入的推文流，并在它们到达时立即处理它们；这正是我们项目所需要的。

让我们安装 Node.js。我们将使用 8.7.0 版本，因为在编写本书时，这是 Node.js 的最新版本。Jest 是 Facebook 的一个测试框架，你将在第 9 章使用 Jest 测试你的 React 应用中了解它。

从以下链接之一下载操作系统的安装包：

• OSX：http://nodejs.org/dist/v8.7.0/node-v8.7.0.pkg
• Windows 64 位：http://nodejs.org/dist/v8.7.0/node-v8.7.0-x64.msi
• Windows 32 位：http://nodejs.org/dist/v8.7.0/node-v8.7.0-x86.msi

运行下载的软件包并按照 Node 的安装步骤进行操作。js 将提示你。完成后，检查是否已成功安装 Node.js。打开终端/命令提示符，然后键入以下命令：

node -v

输出如下（如果你的版本不完全匹配，请不要担心）：

v8.7.0

Node.js 有一个非常丰富的模块生态系统，可供我们使用。模块是 Node.js 应用，你可以在自己的 Node 中重用 Node.js 应用。

在撰写本文时，有超过 500000 个模块。你如何管理如此多样的 Node.js 模块？认识 npm，一个管理 Node 的包管理器 Node.js 模块。事实上，npm 与 Node 一起提供 Node.js，所以你已经安装了它。在终端/命令提示符中键入以下命令：

npm -v

你应该看到以下输出（如果你的版本不完全匹配，请不要担心）：

5.5.1

有关 npm 的更多信息，请访问www.npmjs.com。现在，我们准备开始安装Node.js应用。

安装 Git

在本书中，我们将使用 Git 安装 Node.js 模块。如果你尚未安装 Git，请访问 https://git-scm.com/book/en/v2/Getting-Started-Installing-Git 并遵循操作系统的安装说明。

从 Twitter 流 API 获取数据

React 应用的数据将来自 Twitter。Twitter 有一个 Streaming API，任何人都可以插入该 API，并开始接收 JSON 格式的无休止的公共推文流。
要开始使用 Twitter 流 API，你需要执行以下步骤：

1. 创建 Twitter 帐户。为此，请转到 https://twitter.com 并注册；如果你已经有帐户，请登录。
2. 通过转到创建新的 Twitter 应用 https://apps.twitter.com，然后单击 Create New App。你需要填写 Application Details 表，同意 Developer Agreement，然后单击 Create your Twitter application。现在你应该看到应用的页面。切换到 Keys and Access Tokens 选项卡。

在本页的 Application Settings 区，你将发现以下信息：

• Consumer Key (API Key)，比如 jqRDrAlKQCbBu2o4ipnvm
• Consumer Secret (API Secret)，比如
  wJcdogJih7uLpjzcs2JtAvdSyCVlqHIRUWI70aHOAf7E3wWIgD

记下这些；我们将在后面的章节用到它们。

现在我们需要生成一个访问令牌。在同一页上，你将看到 YourAccess Token 区为空。单击 Create my access token 按钮。它创建了两条信息：

• Access Token，比如，12736172-R017ah2pE2OCtmi46IAE2n0z3u2DV6IqsEcPa0THR
• Access Token Secret，比如，4RTJJWIezIDcs5VX1PMVZolXGZG7L3Ez7Iz1gMdZucDaM

记下这些。访问令牌对你是唯一的，你不应与任何人共享。

现在，我们拥有了开始使用 Twitter Streaming API 所需的一切。

使用 Snapkite-engine 过滤数据

你将通过 Twitter Streaming API 接收到的推文数量超过了你的消费量，因此我们需要找到一种方法，将这些数据流过滤成一组有意义的推文，以便显示和交互。我建议你快速查看 Twitter Streaming API 文档，网址为 https://dev.twitter.com/streaming/overview，重点看看这个 介绍如何过滤传入流 的页面。你会注意到 Twitter 提供的过滤器很少，所以我们需要找到一种方法来进一步过滤数据流。

幸运的是，有一个 Node.js 应用。它叫做 Snapkite-engine。它连接到 Twitter Streaming API，使用可用的过滤器并根据你定义的规则对其进行过滤，并将过滤后的 tweet 输出到 web 套接字连接。我们提出的 React 应用可以监听套接字连接上的事件，并在它们到达时处理推文。

让我们安装 Snapkite-engine。首先，你需要克隆 Snapkite-engine 存储库。克隆意味着将源代码从 GitHub 服务器复制到本地目录。在本书中，我将假设你的本地目录是你的主目录。打开终端/命令提示符并键入以下命令：

cd ~
git clone https://github.com/snapkite/snapkite-engine.git

这将创建~/snapkite-engine/文件夹。现在我们将安装 snapkite-engine 所依赖的所有其他节点模块。其中一个是 node-gyp 模块。根据你使用的平台（Unix 或 Windows），你需要安装此网页上列出的其他工具：https://github.com/TooTallNate/node-gyp#installation。

安装它们后，就可以安装 node-gyp 模块了：

npm install -g node-gyp

现在转到 ~/snapkite-engine 目录：

cd snapkite-engine

然后运行以下命令：

npm install

此命令将安装 Node.js 模块。现在让我们来配置 Snapkite-engine。假设当前目录为 ~/snapkit-engine/ 目录，请运行以下命令复制 ./example.config.json 文件并重命名为 ./config.json：

cp example.config.json config.json

如果你使用的是 Windows，请运行以下命令：

copy example.config.json config.json

用你最喜欢的文本编辑器打开配置 package.json。现在我们将编辑配置属性。让我们从 trackKeywords 开始。这是我们将要跟踪的关键字。如果我们想跟踪my关键字，请按如下方式设置：

"trackKeywords": "my"

接下来，我们需要设置 Twitter 流 API 密钥。将 consumerKey、consumerSecret、accessTokenKey 和 accessTokenSecret 设置为创建 Twitter 应用时保存的密钥。其他属性可以设置为默认值。如果你想了解它们是什么，请查看Snapkite-engine 文档。

我们的下一步是安装 Snapkite 过滤器。Snapkite 过滤器是一个 Node.js 模块，根据一组规则验证 tweets。有很多 Snapkite 过滤器，我们可以使用它们的任意组合来过滤我们的推文流。你可以通过https://github.com/snapkite/snapkite查看所有可用的过滤器列表。

在我们的应用中，我们将使用以下 Snapkite 过滤器：

• 可能敏感：https://github.com/snapkite/snapkite-filter-is-possibly-sensitive
• 有手机照片：https://github.com/snapkite/snapkite-filter-has-mobile-photo
• 正在转发：https://github.com/snapkite/snapkite-filter-is-retweet
• 包含文本：https://github.com/snapkite/snapkite-filter-has-text

让我们安装它们。转到~/snapkite-engine/filters/目录：

cd ~/snapkite-engine/filters/

然后通过运行以下命令 clone 所有 Snapkite 过滤器：

git clone https://github.com/snapkite/snapkite-filter-is-possibly-sensitive.git
git clone https://github.com/snapkite/snapkite-filter-has-mobile-photo.git
git clone https://github.com/snapkite/snapkite-filter-is-retweet.git
git clone https://github.com/snapkite/snapkite-filter-has-text.git

下一步是配置它们。为此，你需要为每个 Snapkite 过滤器创建一个 JSON 格式的配置文件，并在其中定义一些属性。幸运的是，每个 Snapkite 过滤器都附带一个示例配置文件，我们可以根据需要复制和编辑该文件。假设你在 ~/snapkite-engine/filters/directory，运行以下命令（Windows 使用 copy
并将正斜杠替换为反斜杠）：

cp snapkite-filter-is-possibly-sensitive/example.config.json snapkitefilter-is-possibly-sensitive/config.json
cp snapkite-filter-has-mobile-photo/example.config.json snapkite-filterhas-mobile-photo/config.json
cp snapkite-filter-is-retweet/example.config.json snapkite-filter-isretweet/config.json
cp snapkite-filter-has-text/example.config.json snapkite-filter-has-text/config.json

我们不需要在 config.json 文件中更改这些配置中的任何默认设置，因为这些配置正是我们想要的。

最后，我们需要告诉 Snapkite-engine 它应该使用哪些 Snapkite 过滤器。打开 ~/snapkite-engine/config.json 文件，并查找该文件："filters": []

现在将其替换为以下内容：

"filters": [
  "snapkite-filter-is-possibly-sensitive",
  "snapkite-filter-has-mobile-photo",
  "snapkite-filter-is-retweet",
  "snapkite-filter-has-text"
]

干得不错！你已经成功安装了 Snapkite-engine 和许多 Snapkite 过滤器。现在让我们检查一下是否可以运行它。转到 ~/snapkite-engine/ 并运行以下命令：

npm start

你应该不会看到错误消息，但如果你看到了错误消息但不确定如何修复它们，请到 https://github.com/PacktPublishing/React-Essentials-Second-Edition 并新建问题，然后复制并粘贴你收到的错误消息。

接下来，让我们设置项目的结构。

创建项目结构

现在是创建项目结构的时候了。组织源文件听起来似乎是一项简单的任务，但经过深思熟虑的项目结构组织有助于我们理解应用的底层架构。在本书的后面章节，当我们讨论 Flux 应用架构时，你将看到一个这样的例子。首先让我们在主目录 ~/snapterest/ 中创建名为 snapterest 的项目根目录。

然后，在其中，我们将创建另外两个目录：

• ~/snapterest/ source/：此处我们将保存 JavaScript 源文件
• ~/snapterest/ build/：此处我们将放置编译的 JavaScript 文件和 HTML 文件

接下来，在 ~/snapterest/ source/中，创建 components 文件夹，项目结构如下所示：

• ~/snapterest/ source/components/
• ~/snapterest/ build/

准备好基本的项目结构后，我们将开始用应用添加程序文件。首先，我们需要在 ~/snapterest/ source/目录中创建主应用文件 app.js。该文件将成为应用入口。

暂时把它留空，因为我们有一个更要紧的问题要讨论。

创建 package.json

你以前听说过 DRY 吗？它代表不要重复自己，它是促进了软件开发代码重用的核心原则之一。最好的代码是不需要编写的代码。事实上，我们在这个项目中的目标之一是尽可能少地编写代码。你可能还没有意识到这一点，但 React 帮助我们实现了这一目标。这不仅节省了我们的时间，而且如果我们也决定在未来维护和改进我们的项目，从长远来看，这将为我们节省更多的时间。

在不编写代码时，我们可以采用以下策略：

• 以声明式编程风格编写代码
• 重用他人编写的代码

在这个项目中，我们将使用这两种技术。第一个是 React。React 让我们别无选择，只能以声明式的方式编写 JavaScript 代码。这意味着，我们不用告诉 web 浏览器如何做我们想做的事情（就像我们用 jQuery 做的那样），我们用只告诉它想做什么，剩下的交给 React。

Node.js 和 npm 涵盖了第二种技术。我在本章前面提到，有几十万个不同的 Node.js 应用可供我们使用。这意味着很可能有人已经实现了我们的应用所依赖的功能。

问题是你从哪里得到这些我们想重用的 Node.js 应用呢？我们可以通过
npm install <package name>命令安装它们。在 npm 上下文中， Node.js 应用称作包，每个 npm 包都有一个 package.json 文件来描述与该包相关的元数据。要了解 package.json 中相关字段的更多信息，可以访问 https://docs.npmjs.com/files/package.json。

在安装依赖包之前，我们将为自己的项目初始化一个包。通常形况下，只有当你想将包提交到 npm 注册表以便其他人可以重用你的 Node.js 应用时，package.json 才是必需的。我们不打算创建 Node.js 应用，我们不打算将我们的项目提交给 npm。记住从技术上讲 package.json 只是 npm 命令能够理解的元数据文件，因此，我们可以使用它来存储应用所需的依赖项列表。一旦我们在 package.json 中存储了依赖项列表，就可以随时使用 npm install 命令轻松安装它们；npm 将会自动找出从哪里获取它们。

我们如何为自己的应用创建 package.json 文件呢？幸运的是，npm 附带了一个交互式工具，它向我们提出一系列问题，然后根据我们的答案创建项目所需的 package.json。

确保你位于 ~/snapterest/ 目录中。在终端/命令提示符中，运行以下命令：

npm init

它会问你的第一个问题是 package 名称。它将建议一个默认名称，即你所在目录的名称。在我们的案例中，它应该建议使用名称：（snapterest）。按 Enter 键接受默认名称（snapterest）。下一个问题是软件包的版本，即版本：（1.0.0）。按 Enter 键。如果我们计划将我们的包提交给 npm 供其他人重用，这两个配置将是最重要的。因为我们不会将其提交给 npm，所以我们可以自信地接受所有问题的默认值。一直按 Enter 键，直到 npm init 完成执行并退出。如果当前在 ~/snapterest/ 目录，将在其中找到一个新文件——package.json。

现在我们可以安装其他要重用 Node.js 应用。由多个单独应用构建应用称为模块化，而单独的应用则称为模块。这就是我们所称的 Node.js 依赖关系——Node.js 模块。

重用 Node.js 模块

正如我前面提到的，在我们的开发过程中将有一个步骤叫 building（构建）。在此步骤中，我们的构建脚本将获取源文件和所有 Node.js 依赖包，并将它们转换为 web 浏览器可以成功执行的单个文件。这个构建过程中最重要的部分叫做 packaging（打包） 。我们需要打包什么？为什么需要打包？让我们思考一下。我在前面简要提到，我们没有创建 Node.js 应用，但我们正在讨论重用 Node.js 模块。这是否意味着我们将在非 Node.js 应用重用 Node.js 模块？这可能吗？事实证明，有一种方法可以做到这一点。

Webpack 是一种工具，用于将所有依赖关系文件捆绑在一起，从而可以重用 Node.js 模块。有关 Webpack 的详细信息，请访问 http://webpack.js.org。要安装 Webpack，请在 ~/snapterest/ 目录下运行以下命令：

npm install –save-dev webpack

请注意—save-dev 标志。它告诉 npm 将 Webpack 添加到我们的包中 package.json 文件作为开发依赖项。向包中添加模块名称 package.json 文件作为依赖项允许我们记录我们使用的依赖项，如果需要，我们可以稍后使用 npm install 命令轻松安装它们。运行应用所需的依赖项与开发应用所需要的依赖项之间存在区别。Webpack 在构建时使用，而不是在运行时使用，因此它是一个开发依赖项。因此，使用--save-dev 标志。如果你检查 package.json 文件的内容，你将看到以下内容（如果你的 Webpack 版本不完全匹配，请不要担心）：

"devDependencies": {
  "webpack": "^2.2.1"
}

npm 在 ~/snapterest/ 目录中创建了一个名为 node_modules 的新文件夹。这是它放置所有本地依赖模块的地方。

祝贺你安装了第一个 Node.js 模块！Webpack 将允许我们使用 Node.js 模块。这将是我们构建过程的一部分。现在，让我们仔细看看我们的构建过程。

使用 Webpack 构建

今天，任何现代的客户端应用都代表着许多问题的混合，这些问题由各种技术单独解决。单独解决每个问题简化了管理项目复杂性的整个过程。这种方法的缺点是，在项目的某个时刻，你需要将所有单独的部分放在一个连贯的应用中。就像机器人一样，在一家汽车工厂，用单个零件组装汽车，开发人员有一种叫做构建工具的东西，可以从单个模块组装项目。这个过程称为 build(构建)，根据项目的大小和复杂性，构建过程可能需要几毫秒到几小时。

Webpack 将帮助我们自动化构建过程。首先，我们需要配置 Webpack。假设你在 ~/snapterest/ 目录中，新建一个 webpack.config.js 文件。

现在让我们在 webpack.config.js 中描述构建过程。在这个文件中，我们将创建一个 JavaScript 对象，描述如何打包源文件。我们希望将该配置对象导出为 Node.js 模块。是的，我们会将 webpack.config.js 作为 Node.js 模块。为此，我们将空的配置对象分配给一个特殊的 module.exports 属性：

const path = require('path');
module.exports = {};

module.exports 属性是 Node.js API 的一部分。它告诉 Node 只要有人导入我们的模块，他们就可以访问该对象。那么这个对象应该是什么样子的呢？这里我建议你查看 Webpack 的文档，并通过以下链接阅读 Webpack 核心概念：https://webpack.js.org/concepts/。

配置对象的第一个属性将是 entry：

module.exports = {
  entry: './source/app.js',
};

顾名思义，entry 属性描述了 web 应用的入口。在本例中，此属性的值为 ./source/app.js ——这是启动应用的第一个文件。

配置对象的第二个属性将是 output 属性：

output: {
  path: path.resolve(__dirname, 'build'),
  filename: 'snapterest.js'
}

output 属性告诉 Webpack 输出打包文件的位置。在我们的例子中，我们希望生成的打包文件为 snapterest.js，并将其保存到 ./build 目录中。

Webpack 将每个源文件视为一个模块，这意味着我们所有的 JavaScript 源文件都将被视为 Webpack 需要打包的模块。我们如何该告知 Webpack 呢？

我们通过配置对象的第三个属性 module 来实现。

module: {
  rules: [
    {
      test: /\.js$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['react', 'latest'],
            plugins: ['transform-class-properties'],
          },
        },
      ],
      exclude: path.resolve(__dirname, 'node_modules'),
    },
  ];
}

如你所见，我们的 module 属性获取一个对象作为其值。此对象有一个名为 rules 的属性，一个规则数组，其中每个规则描述如何从不同的源文件创建 Webpack 模块。让我们仔细看看我们的规则。

我们有一条规则告诉 Webpack 如何处理 JavaScript 源文件：

{
  test: /\.js$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['react', 'latest'],
        plugins: ['transform-class-properties']
      }
    }
  ],
  exclude: path.resolve(__dirname, 'node_modules')
}

此规则有三个属性：test、use 和 exclude。test 属性告诉 Webpack 该规则应用于哪些文件。它通过将源文件名与 RegEx 表达式进行匹配来实现，RegEx 表达式是我们为 test 属性指定的值：/\.js$/。如果你熟悉 RegEx，那么你知道 /\.js$/将匹配所有以.js 结尾的文件名。这正是我们想要的：打包所有 JavaScript 文件。

当 Webpack 找到并加载所有 JavaScript 源文件时，它会尝试将它们解释为纯 JavaScript 文件。然而，我们的 JavaScript 文件将不是普通的 JavaScript 文件，而是使用 ECMAScript 2016 语法以及 React 特定语法的文件。

Webpack 如何理解所有非纯 JavaScript 语法？借助 Webpack 加载器（loader），我们可以将非纯 JavaScript 语法转换为纯 JavaScript。Webpack 加载器是应用于源文件的转换。此处的 use 属性描述了要应用的转换列表：

use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['react', 'latest'],
        plugins: ['transform-class-properties']
      }
    }
  ],

此处有一个转换，负责将 React 特定语法和 ECMAScript 2016 语法转换为纯 JavaScript：

{
  loader: 'babel-loader',
  options: {
    presets: ['react', 'latest'],
    plugins: ['transform-class-properties']
  }
}

Webpack 转换使用具有 loader 和 options 属性的对象进行描述。loader 属性告诉 Webpack 哪个加载器执行转换，options 属性告诉它哪些选项应该传递给该加载器。将我们的 ECMAScript 2016 和 React 特定语法转换为纯 JavaScript 的加载器称为 babel 加载器。这种特定的转换过程被称为 transpilation（转译） 或 源代码到源代码编译（source-to-source compilation），它将以一种语法编写的源代码转换为以另一种语法撰写的源代码。我们使用的是当今最流行的 JavaScript 转换器之一 Babel。Webpack 有一个 Babel 加载器，它使用 Babel 转译器来转换我们的源代码。Babel 加载器作为一个单独的节点提供 Node.js 模块。让我们安装此模块并将其添加到开发依赖项列表中。假设你在 ~/snapterest/ 目录中，运行以下命令：

npm install babel-core babel-loader –save-dev

我们的 Webpack 加载器 options 属性有两个 Babel 预设：latest 和 react 以及一个 transform-class-properties Babel 插件：

options: {
  presets: ['react', 'latest'],
  plugins: ['transform-class-properties']
}

这些是转换不同语法的 Babel 插件：latest 插件将 ECMAScript 2015、ECMAScript2016 和 ECMAScript2017 语法转换为旧的 JavaScript 语法，react 插件将 React 特定语法转换为普通 JavaScript 语法，而 transform-class-properties 插件将转换类属性。

这些 Babel 插件作为独立 Node.js 模块分发，我们需要单独安装。假设你在 ~/snapterest/ 目录中，运行以下命令：

npm install babel-preset-latest babel-preset-react babel-plugintransform-class-properties --save-dev

最后，我们来介绍 Webpack 规则中第三个属性 exclude：

exclude: path.resolve(__dirname, 'node_modules');

此属性告诉 Webpack 从转换过程中排除 node_modules 目录。

现在 webpack.config.js 文件已经设置好了。在我们第一次运行打包之前，让我们向 package.json 文件中添加一个名为 start 的新脚本：

"scripts": {
  "start": "webpack -p --config `webpack.config.js`",
  "test": "echo \"Error: no test specified\" && exit 1"
}

如果现在运行 npm run start或 npm start，npm 将运行 webpack -p--config webpack.config.js命令。该命令将使用 webpack.config.js 文件的配置运行 Webpack，将源文件打包用于生产。

我们准备好打包源文件了！转到 ~/snapterest/ 目录并运行命令：

npm start

在输出中，你应该看到以下信息：

Version: webpack 2.2.1
Time: 1151ms
Asset Size Chunks Chunk Names
app.js 519 bytes 0 [emitted] main
[0] ./source/app.js 24 bytes {0} [built]

更重要的是，如果检查项目的 ~/snapterest/build/ 目录，你会发现它现在 snapterest.js 文件中已经有一些代码——这是我们的（空的）JavaScript 应用，带有一些 Node.js 模块，准备在 web 浏览器中运行！

新建网页

如果你渴望一些 React 的好东西，那么我有好消息告诉你！我们快看到了。剩下的就是新建 index.html 链接 snapterest.js。

在 ~/snapterest/ build/目录中新建 index.html。向其中添加以下 HTML 标签：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
    <title>Snapterest</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap.min.css"
    />
  </head>

  <body>
    <div id="react-application">
      I am about to learn the essentials of React.js.
    </div>
    <script src="./snapterest.js"></script>
  </body>
</html>

在 web 浏览器中打开 ~/snapterest/build/index.html。你应该看到以下文本：

I am about to learn the essentials of React.js.

没错，我们已经完成了项目的设置，是时候了解 React 了！

总结

在本章中，你了解了为什么我们应该使用 React 为现代 web 应用构建用户界面。然后，我们讨论了我们将在本书中构建的项目。最后，我们安装了所有正确的工具并创建了项目的结构。

下一章我们将安装 React，深入了解 React 的工作原理，并创建你的第一个 React 元素。