翻译 | 《JavaScript Everywhere》第1章 开发环境（^_^）

翻译 | 《JavaScript Everywhere》第1章 开发环境（^_^）

写在最前面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了提高大家的阅读体验，对语句的结构略有调整和内容的增删。如果发现本文中有存在瑕疵的地方，或者您有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。(σﾟ∀ﾟ)σ..:*☆哎哟不错哦

为无处不在的JavaScript赞美

JavaScript Everywhere 是一本令人难以置信的书，它将为你提供在任何平台上使用JavaScript构建应用程序所需要的一切。标题就是事实：JavaScript无处不在。本书做出了独特的壮举，就是在本文中为所有级别的开发人员写了所有的内容。你阅读本书，然后编写代码，并自信地做出技术决策。

——Eve Porcello，Moon Highway的软件开发人员和讲师

JavaScript Everywhere 是引导不断变化的现代JavaScript生态系统的完美伙伴。Adam以清晰易懂的方式传授着React，React Native和GraphQL，以便你可以构建健壮的Web、移动和桌面应用程序。

——Apollo GraphQL的工程经理Peggy Rayzis

奉献精神

对于我父亲来说，他们既带回了我的第一台被黑客入侵的计算机，又对我写的每篇论文进行了校对。没有你，我不会在这里。想念你。

序言

1997年，我在读初中。我和我的一个朋友在学校图书馆中的联网计算机上忙着时，他向我展示了：你可以单击View→源代码来查看网页的代码。几天后，另一个朋友向我展示了如何发布自己的HTML。我觉得我的想法被点燃了。在那之后，我迷上了HTML。我到处浏览自己喜欢的网站，用于构建自己的Franken网站。

我大部分空闲的时间都在家里饭厅中，花在了组装电脑上，我甚至“编写”（好吧，是复制和粘贴）了我的第一个JavaScript，实现在链接上实现悬停样式，而这对于简单的CSS而言尚不可行。过去我觉得自己是个书呆子，但是，现在不一样了，就像是有益健康的电影《Almost Famous 》，我在我自己的音乐网站上，受到了相当多的好评。而且，我收到了邮件中的促销CD，并被安排在音乐会的嘉宾名单上。但是，对我而言，更重要的是，我正在与世界各地的其他人分享我的兴趣。我只是一个无聊的郊区少年，热爱音乐，但是却能够接触到我从未见过的人。那过去是、现在仍然是这样的令人激动。

今天，我们可以只需要使用Web技术来构建功能强大的应用程序，但入门可能会令人生畏。

• APIs是访问隐藏的数据的接口。

• View视图→Source源代码 显示链接和压缩的代码。

• 身份验证和安全性令人困惑。

将所有这些东西放在一起可能是让人产生压倒性压力的。

如果我们能够越过这些令人困惑的细节，我们可能会注意到，过去20年前我使用的一些技术，现在可以仍被用于构建功能强大的Web应用程序、原生代码移动应用程序，并创建功能强大的桌面应用程序，设计3D动画，甚至是程序机器人。

作为一名教育者，我发现我们大部分人学习一个新事物，最好的方式是，分解它们，然后在我们实际的应用案例中运用它们。这就是本书的目标。

如果你了解一些HTML、CSS和JavaScript，但不确定如何使用这些内容来并构建你梦寐以求的强大应用程序，那么这本书就适合你。

我将全程引导你如何构建Web应用程序、移动应用程序和桌面应用程序。最重要的是，你将了解所有这些部分如何组合在一起，以便可以构建和创造美好的事物。

我等不及想要看看你做了什么。

————Adam

前言

写完了我的第一个电子桌面应用程序后，我产生了写这本书的想法。作为一名web开发人员，我立即沉迷于使用web技术构建跨平台应用程序了。与此同时，React、React Native和GraphQL都在迅速发展。我寻找了一些资源来学习这些东西是如何组合在一起的，但总是不够用。这本书是我希望自己所拥有的指南。

本书的最终目标是介绍使用单一编程语言JavaScript来构建各种应用程序。

这本书适合谁

本书适用于具有HTML，CSS和JavaScript经验的中级开发人员，或有志于学习引导业务或副业项目中所需工具的有抱负的初学者。

本书的组织方式

本书旨在引导你开发适用于各种平台的示例应用程序。

它可以分为以下几部分：

第1章将指导你设置JavaScript开发环境。

章2 - 10套构建有Node，Express，MongoDB，和Apollo Server的API项目。

第11 – 25章回顾了使用React，Apollo和各种工具构建跨平台用户界面的详细信息。特别：

第11章介绍用户界面开发和React。

第12至17章演示了如何使用React，Apollo Client和CSS-in-JS构建Web应用程序。

第18 – 20章将指导你构建简单的Electron应用程序。

第21 – 25章介绍了如何使用React Native和Expo构建iOS和Android的移动应用程序。

本书中使用的约定

本书使用以下印刷约定：

• 斜体

  指示新的术语，URL，电子邮件地址，文件名和文件扩展名。

• 宽体

  用于程序清单，以及在段落中用于引用程序元素，例如变量或函数名称，数据库，数据类型，环境变量，语句和关键字。

• 粗体

  显示应由用户直接输入的命令或其他文本。

• 斜体

  显示应由用户提供的值或由上下文确定的值替换的文本。

TIP建议

该元素表示提示或建议。

注意

此元素表示一般注释。

警告

此元素表示警告或注意。

使用代码示例

补充材料（代码示例，练习等）可从以下网站下载： https://github.com/javascripteverywhere。

如果你在使用代码示例时遇到技术问题或疑问，请发送电子邮件至 [email protected]。

这本书可以帮助你完成工作。

通常，如果本书提供了示例代码，则可以在程序和文档中使用它。除非你要复制大部分代码，否则无需与我们联系以获取许可。例如，编写使用本书中若干代码段的程序无需许可。出售或分发O'Reilly书籍中的示例确实需要获得许可。引用本书并引用示例代码来回答问题无需许可。确实需要将本书中的大量示例代码合并到产品的文档中。

我们感谢，但通常不需要请求。出处通常包括标题，作者，出版者和ISBN。例如：Adam D. Scott（O'Reilly）的“ JavaScript Everywhere ” 。版权2020 Adam D.Scott，978-1-492-04698-1。”

如果你认为使用代码示例超出合理使用范围或获得上述允许，请随时与我们联系 [email protected]。

第1章我们的开发环境

约翰-伍德是UCLA男子篮球队的已故教练，是有史以来最成功的教练之一，在12年内赢得了10项全国冠军。他的团队由顶尖的新兵组成，包括名人堂球员，如卢·阿尔辛多（Kewem Abdul-Jabbar）和比尔·沃尔顿（Bill Walton）。练习的第一天，伍登让他所有的新兵坐下，他们是美国高中最好的球员，并教他们正确的穿袜子。当被问到这个，伍登说 ：“细节决定了事情的重大发展。”厨师使用“ mise en place ”一词来表示“各就各位”，来描述烹饪前准备菜单所需工具和配料的做法。因为已经考虑过了小细节，所以这种准备工作使得厨房的厨师能够在繁忙的忙碌时间里成功准备好饭菜。就像Coach Wooden的球员和厨师准备晚饭一样，这值得花时间来建立我们的开发环境。

有用的开发环境并不需要昂贵的软件或顶级硬件。实际上，我鼓励你从简单开始，使用开源软件，并且发挥你的工具。尽管跑步者更喜欢特定品牌的运动鞋，而木匠可能一直喜欢使用她最喜欢的锤子，但是这要花些时间和经验来确定这些偏好。试用工具，观察其他工具，随着时间的流逝，你将创建最适合你自己的环境。

在本章中，我们将安装文本编辑器、Node.js、Git、MongoDB和一些有用的JavaScript包，并找到我们的终端应用程序。你可能已经拥有了一个适合你的开发环境，但是，我们还将安装将在整本书中使用的一些必需工具。如果你像我一样，通常跳过说明手册，我仍然希望你通读本指南。

任何时候，如果你发现自己有疑惑，请与JavaScript Everywhere 的社区交流，通过我们的论坛渠道 spectrum.chat/jseverywhere。

你的文本编辑器

文本编辑器很像衣服，我们所有人都需要它们，但是我们的偏好可能会千差万别。有些人喜欢简单和便捷的结构。有些人喜欢华丽的佩斯利模式。没有错误的决定，你应该使用最舒适的方式。

如果你还没有偏好，我强烈建议Visual Studio代码（VSCode）。这是一个开放源代码的编辑器，可用于Mac，Windows和Linux。此外，它提供了内置功能来简化开发，并且可以通过社区扩展轻松进行修改。它甚至是使用JavaScript构建的！

终端

如果你使用的是VSCode，它自带集成终端。对于大多数的开发任务，这可能就是你所需要的。就个人而言，我发现最好使用专用的终端客户端，因为这样可以更轻松地管理多个选项卡，并在计算机上使用更多的专用窗口空间。我建议你同时尝试这两种方法，然后找出最适合你的方法。

使用专用的终端应用程序

所有操作系统都带有内置的终端应用程序，这是上手的好地方。在macOS上，它恰当地称为终端。在Windows操作系统（从Windows 7开始）上，该程序为PowerShell。Linux发行版的终端名称可能有所不同，但通常包括“ Terminal”。

使用VSCode

要使用VSCode访问终端，请单击终端→新建终端。这将为你提供一个终端窗口。提示将出现在与当前项目相同的目录中。

浏览文件系统

找到终端后，你将需要具有更换文件系统目录的关键能力。你可以使用命令来完成此操作，该命令代表“更改目录”：cd。

命令行提示

终端指令通常在行首包含·$ 或>。这些只用于提示指定，不应被复制。在本书中，我将用美元符号（$）指示终端提示。在终端应用程序中输入说明时，请勿键入 $ 。

当你打开终端应用程序时，将出现一个光标提示，你可以在其中输入命令。默认情况下，你位于计算机的主目录中。如果你还没有，我建议创建一个 Projects 文件夹，该文件夹是你的主目录中的子目录。该文件夹可以容纳你所有的开发项目。你创建一个 Projects 目录并按如下方式导航到该文件夹：

# first type cd, this will ensure you are in your root directory
$ cd
# next, if you don't already have a Projects directory, you can create one
# this will create Projects as a subfolder in your system's root directory
$ mkdir Projects
# finally you can cd into the Projects directory$ cd Projects

接下来，你可以按以下方式导航到 Projects目录：

$ cd 
# ensure you are in the root directory
$ cd Projects

现在，假设你在 Projects 目录中有一个名为jseverywhere的文件夹 。你可以从 Projects 目录键入 以导航到该文件夹。要向后导航到目录（在本例中为 Projects），请键入 cd..（ 命令后跟两个句点）。

总之，这看起来像：

> $ cd 
# ensure you are in your root directory
> $ cd Projects 
# navigate from root dir to Projects dir/Projects 
> $ cd jseverywhere 
# navigate from Projects dir to jsevewehre dir/Projects/jseverwhere 
> $ cd .. 
# navigate back from jseverwhere to Projects/Projects 
> $ 
# Prompt is currently in the Projects dir

如果这对你来说是全新的，请花一些时间浏览文件，直到你感到舒适为止。我发现文件系统问题是新手开发人员经常遇到的问题。掌握这一点将为你建立工作流奠定坚实的基础。

命令行工具和Homebrew（仅Mac）

某些命令行实用程序只有在安装了Xcode之后才对macOS用户可用。

你可以通过终端进行安装，而无需安装Xcode，就可以跳过这个 。为此，请运行以下命令，然后单击安装提示：xcode-select

$ xcode-select --install

Homebrew是macOS的软件包管理器。它使安装开发依赖项（如编程语言和数据库）变得像运行命令行提示符一样简单。如果你使用Mac，它将大大简化你的开发环境。要安装Homebrew，请前往brew.sh 复制并粘贴安装命令，或在一行中键入以下内容：

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

Node.js和NPM

Node.js 是“基于Chrome浏览器的V8 JavaScript引擎构建的JavaScript运行时。”

一个JavaScript 运行器，建立在Chrome的V8 JavaScript引擎上。

实际上，这意味着Node是一个平台，允许开发人员在浏览器环境之外编写JavaScript。Node.js随附NPM（默认软件包管理器）。NPM使你可以在项目中安装数千个库和JavaScript工具。

管理Node.js版本

如果计划管理大量的Node项目，则可能会发现还需要管理计算机上的多个版本的Node。如果是这种情况，我建议你使用Node版本管理器（NVM） 来安装Node。NVM是使你能够管理多个活动Node版本的脚本。对于Windows用户，我建议使用 nvm-windows。我不会介绍Node版本控制，但是它是一个有用的工具。如果这是你第一次使用Node，建议对你的系统按照以下说明进行操作。

为macOS安装Node.js和NPM

macOS用户可以使用Homebrew安装Node.js和NPM。要安装Node.js，请在终端中键入以下命令：

$ brew update
$ brew install node

安装了Node后，打开你的终端应用程序以验证其是否正常运行。

$ node --version
## Expected output v12.14.1, your version number may differ
$ npm --version
## Expected output 6.13.7, your version number may differ

键入这些命令后，如果看到版本号，那么恭喜，你已成功安装了适用于macOS的Node和NPM！

为Windows安装Node.js和NPM

对于Windows，安装Node.js的最直接方法是访问nodejs.org 并下载安装程序为你的操作系统。

首先， 按照你的操作系统的安装步骤，访问 nodejs.org并安装LTS版本（在撰写本文时为12.14.1）。安装了Node后，打开你的终端应用程序以验证其是否正常运行。

$ node --version
## Expected output v12.14.1, your version number may differ
$ npm --version
## Expected output 6.13.7, your version number may differ

什么是LTS？

LTS代表“长期支持”，这意味着Node.js Foundation致力于为该主要版本号（在本例中为12.x）提供支持和安全更新。该版本的初始发行后，标准支持窗口将持续三年。在Node.js中，偶数版本是LTS版本。我建议使用偶数版本进行应用程序开发。

键入这些命令后，如果你看到版本号，那么恭喜你，你已经成功安装了Windows版Node和NPM！

MongoDB

MongoDB是我们在开发API时将使用的数据库。Mongo是使用Node.js的一种流行选择，因为它将我们的数据视为JSON（JavaScript对象表示法）文档。这意味着JavaScript开发人员从一开始就可以轻松使用。

官方的MongoDB安装文档

MongoDB文档提供了有关在各个操作系统上安装MongoDB Community Edition的定期更新的指南。如果你在安装过程中遇到问题，建议你参考以下位置的文档docs.mongodb.com/manual/administration/install-community。

安装和运行适用于macOS的MongoDB

要安装适用于macOS的MongoDB，请首先使用Homebrew进行安装：

$ brew update
$ brew tap mongodb/brew
$ brew install [email protected]

要启动MongoDB，我们可以将其作为macOS服务运行：

$ brew services start mongodb-community

这将启动MongoDB服务，并使它作为后台进程运行。请注意，无论何时重新启动计算机，并计划使用Mongo进行开发，都可能需要再次运行此命令来重新启动MongoDB服务。要验证MongoDB是否已安装并正在运行， 请在终端中键入键入 ps -ef | grep mongod。这将列出当前正在运行的Mongo进程。

安装和运行Windows MongoDB

要安装Windows版MongoDB，请首先从以下位置下载安装程序：

MongoDB下载中心。下载文件后，请按照安装向导运行安装程序。我建议选择“完整”安装类型，将其配置为“服务”。所有其他值都可以保留为默认值。

安装完成后，我们可能需要创建Mongo将在其中写入数据的目录。在你的终端中，运行以下命令：

$ cd C:\
$ md "\data\db"

要验证是否已安装MongoDB并启动Mongo服务：

1. 找到Windows服务控制台。
2. 查找MongoDB服务。
3. 右键单击MongoDB服务。
4. 单击开始。

请注意，无论何时重新启动计算机并计划使用Mongo进行开发，都可能需要重新启动MongoDB服务。

Git

Git是最流行的版本控制软件，它允许你执行诸如复制代码存储库，与他人合并代码以及创建自己的代码分支而不会互相影响的事情。Git将有助于“克隆”本书的示例代码存储库，这意味着它将允许你直接复制示例代码文件夹。根据你的操作系统，可能已经安装了Git。在终端窗口中输入以下内容：

$ git --version

如果返回了一个数字，那么恭喜你-一切就绪！如果没有，请访问git-scm.com 安装Git，或将Homebrew用于macOS。完成安装步骤后，再次输入git --version 你的终端以验证它是否有效。

Expo

Expo是一个工具链，可通过React Native简化iOS和Android项目的引导和开发。我们将需要安装Expo命令行工具，以及可选的（尽管推荐）（适用于iOS或Android的Expo应用）。我们将在本书的移动应用程序部分中对此进行更详细的介绍，但是如果你有兴趣入门，请访问expo.io 了解更多。要安装命令行工具，请在终端中键入以下内容：

npm install -g expo-cli

使用 -g 全局标志将使该 expo-cli工具在你的计算机的Node.js安装中全局可用。

要安装Expo移动应用程序，请在设备上访问Apple App Store或Google Play商店。

Prettier

Prettier是一种代码格式化工具，支持多种语言，包括JavaScript，HTML，CSS，GraphQL和Markdown。它使遵循基本格式设置规则变得很容易，这意味着当你运行Prettier命令时，你的代码将自动设置格式以遵循一组标准。更好的是，你可以将编辑器配置为在每次保存文件时自动执行此操作。这意味着你永远不会再有一个项目出现空格不一致和引号混合的问题。

我建议在你的计算机上全局安装Prettier并为你的编辑器配置一个插件。要全局安装Prettier，请转到命令行并输入：

npm install -g prettier

一旦安装了Prettier，请访问Prettier.io 查找文本编辑器的插件。安装了编辑器插件后，建议你在编辑器的设置文件中添加以下设置：

"editor.formatOnSave": true,
"prettier.requireConfig": true

只要.prettierrc 配置文件在项目中，这些设置将在保存时自动格式化文件 。该 .prettierrc 文件指定了Prettier遵守的标准。现在，只要存在该文件，你的编辑器就会自动重新格式化你的代码，以满足项目的约定。本书中的每个项目都将包含一个.prettierrc文件。

ESLint

ESLint是JavaScript的代码linter。linter与诸如Prettier这样的格式化程序的不同之处在于，linter还会检查代码质量规则，例如未使用的变量，无限循环和返回后的无法访问的代码。与Prettier一样，我建议为你喜欢的文本编辑器安装ESLint插件。这将在你编写代码时实时提示你的错误。你可以在以下位置找到编辑器插件列表ESLint网站。

与Prettier相似，项目可以在.eslintrc 文件中指定要遵循的ESLint规则 。这为项目维护者提供了对其代码首选项的细粒度控制，以及自动执行编码标准的方法。本书中的每个项目都将包含一组有用的ESLint规则，旨在帮助你避免常见的陷阱。

使事情看起来更美

这是可选的，但是当我发现美化自己的设置后，我发现自己更喜欢编程。我受不了丑陋，毕竟我拥有艺术学位。可以花一些时间来尝试不同的颜色主题和字体。就我个人而言，我已经开始喜欢 Dracula主题，它是几乎所有文本编辑器和终端都可以使用的颜色主题，以及Adobe的 Source Code Pro字体。

结论

在本章中，我们在我们电脑上建立了一个可工作且灵活的JavaScript开发环境。编程的最大乐趣之一就是个性化你的环境。我希望你尝试使用主题、颜色和工具来配置自己的环境。在本书的下一部分中，我们将通过开发API应用程序来使该环境正常工作。

译者语和书籍详情

如果有理解不到位的地方，欢迎大家纠错。如果觉得还可以，麻烦您点赞收藏或者分享一下，希望可以帮到更多人。

有看的么？有看的么？有看的么？

有的话，可以点个赞么？让我知道有人在看。(ಥ_ಥ)

英文书名：《JavaScript Everywhere: Building Cross-Platform Applications with GraphQL, React, React Native, and Electron》

中文译名：《随处可见的JavaScript:使用GraphQL、React、React Native和Electron构建跨平台应用程序》

作者：Adam D. Scott

译者：毛毛

出版时间：2020年2月6日。

翻译时间：2020年10月10日

书封面：

目录

• 前言

• 第1章 我们的开发环境

• 第2章 API简介

• 第3章 具有Node和Express的Web应用程序

• 第4章 我们的第一个GraphQL API

• 第5章 数据库

• 第6章 CRUD操作

• 第7章 用户帐户和身份验证

• 第8章 用户操作

• 第9章 详细信息

• 第10章 部署我们的API

• 第11章 用户界面和React

• 第12章 使用React构建Web客户端

• 第13章 设置应用程序样式

• 第14章 使用Apollo Client

• 第15章 Web身份验证和状态

• 第16章 创建，读取，更新和删除操作

• 第17章 部署Web应用程序

• 第18章 带Electron的桌面应用程序

• 第19章 将现有的Web应用程序与Electron集成

• 第20章 Electron部署

• 第21章 使用React Native创建移动应用程序

• 第22章 移动应用程序shell

• 第23章 GraphQL和React Native

• 第24章 移动应用程序认证

• 第25章 移动应用程序发布

• 后记

• 附录A.在本地运行API

• 附录B.在本地运行Web App

本文由博客群发一文多发等运营工具平台 OpenWrite 发布