关于javascript:翻译-JavaScript-Everywhere第1章-开发环境

JavaScript Everywhere 是一本令人难以置信的书，它将为你提供在任何平台上应用JavaScript构建应用程序所需的所有。
题目是事实：JavaScript无处不在，并且本书做出了独特的壮举，就是在本文中为所有级别的开发人员写了所有的内容。
浏览本书，而后编写代码，并自信地做出技术决策。
Eve Porcello，Moon Highway的软件开发人员和讲师
JavaScript Everywhere 是疏导一直变动的古代JavaScript生态系统的完满搭档。Adam以清晰易懂的形式传授React，React Native和GraphQL，以便你能够构建强壮的Web、挪动和桌面应用程序。
Apollo GraphQL的工程经理Peggy Rayzis

奉献精神

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

序言

1997年，我在读初中。

我和我的一个敌人在在学校图书馆中的联网计算机上忙时，他向我展现了：你能够单击View→源代码来查看网页的代码，

几天后，另一个敌人向我展现了如何公布本人的HTML。我的想法被点燃了。

在那之后，我迷上了。

我到处浏览本人喜爱的网站，以构建本人的Franken网站。

我的大部分闲暇工夫都在家里饭厅中花在了组装电脑上，我甚至“编写”（好吧，是复制和粘贴）我的第一个JavaScript，实现在链接上实现悬停款式，而这对于简略的CSS而言尚不可行。

我过来感觉本人是个书呆子，然而，产生了事件的转折，就像是有益健康的电影《Almost Famous 》，在我本人的音乐网站上，我失去了相当的好评。

因而，我收到了邮件中的促销CD，并被安顿在音乐会的嘉宾名单上。然而，对我而言，更重要的是，我正在与世界各地的其他人分享我的趣味。

我只是一个无聊的市区少年，酷爱音乐，然而可能接触到我从未见过的人。那已经是，当初依然是这样的激励。

明天，咱们能够仅应用Web技术来构建功能强大的应用程序，但入门可能会令人生畏。

APIs是提供数据的不可见的背景。

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

身份验证和安全性令人蛊惑。将所有这些货色放在一起可能是让人产生压倒性压力的。

如果咱们可能越过这些令人困惑的细节，咱们可能会留神到，我过来20年前应用的一些技术，当初能够被用于构建功能强大的Web应用程序、原生代码移动用程序，创立功能强大的桌面应用程序，设计3D动画，甚至是程序机器人。

作为一名教育者，我发现咱们大部分人学习一个新事物，最好的形式是，合成他们，而后使用它们在咱们理论利用案例中。这就是本书的指标。

如果你理解一些HTML，CSS和JavaScript，但不确定如何应用这些内容来并构建你梦寐以求的弱小应用程序，那么这本书就适宜你。

我将全程疏导你构建Web应用程序、挪动应用程序和桌面应用程序的用户界面提供能源的API。最重要的是，你将理解所有这些局部如何组合在一起，以便能够构建和发明美妙的事物。

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

————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/javascript...。

如果你在应用代码示例时遇到技术问题或疑难，请发送电子邮件至 bookquestions@oreilly.com。

这本书能够帮忙你实现工作。

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

咱们感激，但通常不须要申请。出处通常包含题目，作者，出版者和ISBN。例如：Adam D. Scott（O'Reilly）的“ JavaScript Everywhere ” 。版权2020 Adam D.Scott，978-1-492-04698-1。”

如果你认为应用代码示例超出正当应用范畴或取得上述容许，请随时与咱们分割 Permissions@oreilly.com。

第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 mongodb-community@4.2

要启动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服务：

找到Windows服务控制台。
查找MongoDB服务。
右键单击MongoDB服务。
单击开始。

请留神，无论何时重新启动计算机并打算应用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日

书封面：

在这个方面，还十分缺乏经验。

看到的读者，有任何想法和倡议都能够在下方留言。心愿能够失去一些反馈。

你的倡议对我很重要。先在这里谢过了。(*￣︶￣)。

目录

为无处不在的JavaScript赞美