作者：iKcamp
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
移动Web前端高效开发实战：HTML5+CSS3+JavaScript+Webpack+ReactNative+Vue.js+Node.js试读：
前言
国内从2012年开始，移动端设备流量呈现大面积爆发式增长，到2017年已经达到75%，预计2018年这一比例会达到79%。在移动的浪潮下，前端工程师的战场面临着一次巨大的迁移，区别于传统的PC端Web开发，移动终端给前端工程师带来了新的挑战，但更多的是机遇。令人激动的是，前端工程师是一群一直信奉“Stay Hungry,Stay Foolish”的伙伴，充满激情和活力，时刻拥抱变化，追求人机交互的极致。
恍若隔世，犹记得在Internet Explorer 6时代，前端工程师忙碌于兼容各种奇异浏览器，受困于职业的被误解，受限于业务场景的单一，壮志未酬的身影。时至今日，前端领域技术栈日渐宽广和深厚，向后有基于Node.js的大规模前后端分离实践，向前有基于React Native或Weex的多端融合方案，从PC端到移动端有大量优秀MV*类框架的探索和应用，身后有诸如Webpack或Rollup的工程化支持。作为这个时代身处移动变革中的前端工程师的我们，应保持信仰，不断学习前进，努力构建一个精彩的多元化世界。
本书特点
1.本书所有案例考虑移动设备的开发场景，从跨终端、热部署、开放性等方面入手，为开发者提供更高效的开发体验。
2.本书内容技术新颖、与时俱进，结合时下最热门的技术，如HTML 5、CSS 3、ES6、Node.js、React、Webpack、Cordova、React Native、Mocha，让读者在学习移动Web前端技术的同时，了解并熟识更多相关的世界先进开源解决方案。
3.本书案例贴近项目开发真实环境，结合大量成熟第三方组件和框架的使用，帮助读者快速找到问题的最优解决方案。
4.本书的目的就是帮助读者形成思维方法论和构建牢固的知识体系，不管是移动Web还是Native客户端，还是跨终端、跨平台，都能在本书中找到合适的技术方案。
本书的技术体系
本书主要作者（排名不分先后）
本书由iKcamp团队制作完成，主要成员如下。
陈达孚，2015年研究生毕业于香港中文大学计算机专业，现为沪江Web前端架构部成员，主要进行前端新技术调研实践工作，曾在FDCon 2017上分享“基于React Native三端融合的应用和实践”。
朱会震，10年Web开发经验，曾任CSDN架构师，负责多个核心产品的研发工作。近几年专注于移动Web开发、前端工程化、高效能等方面的研究。现就职于沪江，负责沪江网校Web前端开发和管理工作。
哈志辉，沪江CCtalk产品线前端架构师，有过多年的前后端开发及架构经验。在前后端分离、Webpack构建、React单页应用及自动化等方面有丰富的经验。
干珺，曾就职于大众点评等互联网公司，现就职于沪江学金网络。React忠实爱好者，喜欢研究新技术，信奉“没有最好的技术，只有最合适的技术”。
戴亮，近十年前后端开发经验。2014年加入沪江Web前端架构组，负责UI组件、移动打包平台等模块开发，推动Node.js前后端分离方案的落地。曾在GMTC 2017上分享“沪江基于Node.js大规模应用实践”。
严明坤，2003年开始从事网站开发工作，2007年赴上海发展并专注于前端领域，曾就职于盛大网络，现就职于沪江。
易未来，原沪江Web前端架构师，现任职万达网络科技集团资深开发工程师。多年前后端开发经验，现专注于前端开发，先后在EMC、携程、沪江从事相关开发及管理工作。
周遥，《HTML 5网页开发实例详解》作者，先后在盛大网络、大众点评网就职，从事相关开发及管理工作，现为沪江Web前端横向负责人。
本书读者
· 移动Web开发初学者和前端爱好者
· APP的Native客户端开发人员
· 网页和移动网页从业人员
· 从事后端开发对前端有兴趣的人员
· 大中专院校的学生
· 可作为各种培训学校的入门教程
读者服务
轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。
· 下载资源：本书如提供示例代码及资源文件，均可在下载资源处下载。
· 提交勘误：您对书中内容的修改意见可在提交勘误处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。
· 交流互动：在页面下方读者评论处留下您的疑问或观点，与我们和其他读者一同学习交流。
页面入口：http://www.broadview.com.cn/32481第1章初识移动Web前端
移动Web开发属于前端开发中的一个子集，专指移动设备上的Web前端开发工作。顺应着互联网和硬件的升级，以iPhone出现后的移动设备爆发为起点，用户每天的上网方式发生了很大改变。原本固定地点的PC（Personal Computer，个人计算机）互联变为了如今随时随地的移动互联，几乎人人都拥有一台属于自己的智能手机，时时刻刻与世界的任何一个角落发生着联系。
传统前端开发者的日常工作内容也悄悄地发生了变化，开始由PC战场迁移至移动战场，同时，开发使用的技术也同步进行着一轮又一轮的升级换代，Web前端领域尤其明显。本章将从移动Web的发展历史、现在和未来三个角度帮助读者对其形成一个基本的认识。1.1移动Web前端史
移动Web前端虽然兴起时间不长，发展却非常迅速，作为一名Web前端开发者，了解移动Web前端的发展是很有必要的。1.1.1 Web开发的变迁
Web的应用架构最早是在1989年由英国人Tim Berners-Lee提出的，在提出的第二年，第一台Web服务器诞生。此时的Web浏览器，只能展示静态的HTML内容，包含简单的文本和图像。
1995年，Java语言问世，Web端静态内容大批量地向动态内容迁移，这个变革是巨大的。随后，Microsoft发布了Internet Explorer 4.0，其使用的DHTML技术，可以使浏览器获得更好的展示效果。
下面通过一组苹果官网不同时间节点的截图来对比Web早期的发展变化，分别为1992年、1997年、2000年和2017年，如图1.1、图1.2、图1.3和图1.4所示。图1.1 1992年的苹果网站图1.2 1997年的苹果网站图1.3 2000年的苹果网站图1.4 2017年的苹果网站
Web开发基本上可以分为三大阶段：
· 静态技术阶段
· 动态技术阶段
· 后Web 2.0阶段
前面已经简单介绍了静态和动态两个阶段，Web 2.0概念来自于2004年的一场头脑风暴，其代表着Web未来的发展趋势更注重用户之间交流互动，用户既是网站内容浏览者，也是网站内容的制造者。用户从单纯的“只读”模式向“写入”模式过渡，Web得到了共同建设的快速发展，内容量迅速扩充。同时，Web应用的功能也开始从单纯的站点向复杂应用转变，前端开发者的工作也不再局限于文字和图片的排列布局。加之HTML、JavaScript和CSS不断的版本升级迭代，一刻不停地适应着终端种类的纷繁复杂，作为仅存不多的“Write Once,Run Anywhere”技术栈，一个重前端的时代开始真正从沉睡中苏醒。1.1.2 移动Web与HTML 5不得不说的关系
HTML 5这个词汇对于Web前端开发者来说，应该是再熟悉不过了。这其中的数字代号“5”表示超文本标记语言HTML的版本号，也就是第5次重大修改。虽然HTML 5技术早在2011年就已经被各大浏览器厂商所支持，但是该标准真正制定完成发布时间却是在2014年10月29日，这表示一个新的Web时代已经到来。
HTML 5带着很多使命来到这个世界，具有以下这些特性。
· 语义化：拥有更加丰富的标签，对微数据、微结构等有着非常友好的支持，赋予网页更好的意义和结构。
· 本地存储：基于该技术开发的网页应用拥有更短的启动时间，更快的联网速度，甚至可以做到离线使用。
· 设备兼容：HTML 5为开发者提供了非常丰富的API，让开发者能够在功能上有更好的体验和优化选择。
· 连接特性：Server-Sent Event和WebSocket技术，使得连接工作效率更加有效，特别是在实时聊天和网页游戏方面，大大提高了用户体验。
· 多媒体：网页标签自身支持音频和视频的播放，完全打破了依赖Flash的困局，为开发降低成本提高效率的同时，用户体验也得以提升。
· 图形特效：HTML 5提供了诸如Canvas、WebGL等图形和三维功能，使普通网页也能呈现出惊人的视觉效果。
除了以上这些让人眼前一亮的自身特性之外，HTML 5能够在当今Web开发上大行其道，还有一个很重要的原因是移动互联网的兴起。移动设备鉴于自身固有特点，在Web开发上跟PC端有着很大的差别，而相当一部分HTML 5特性，在移动设备上能有更大的施展空间。可以说，移动Web开发已经离不开HTML 5，同样，Web技术的迅猛发展也无法离开移动设备的普及。
下面简单列举一些移动Web开发常用的HTML 5技术。
1.视口控制（Viewport）
当设计师在设计网页时，一般都会按照一个固定的宽度设计，比如在PC端是1000像素或者1200像素等，在移动端是640像素或者750像素等。然而当这些网页在移动设备上浏览时会显示不完整，设备的宽度远远不够。拿iPhone 6来举例，其视口宽度是375像素，完全满足不了网页需求。
为了弥补这一点，移动设备上浏览器会把视口放大，一般是980像素或1024像素。但这样带来的后果是浏览器会出现横向滚动条，因为设备实际可视区域比浏览器自设的这个宽度要小很多。为了解决这个问题，就需要引入Viewport属性。Viewport属性通过一个Meta标签引入，实例代码如下：
上述代码的作用是让当前Viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
2.媒体查询（@media）
CSS 3引入了一个新的操作表达式，被称为媒体查询。其允许开发者基于设备的不同特性来应用不同的样式申明。其中，通过对视口宽度的判断，对网页输出不同的展示效果。比如在iPhone 7下默认字号为12像素，而在iPhone 7 Plus下默认字号采用14像素。如设备是iPad，可选择采用多列布局展示等。
3.音视频播放（Audio/Video）
在HTML 5之前，要想在网页上播放一段音频或视频，需要借助于浏览器插件，插件通常采用Flash技术实现。这在PC设备上还勉强可以接受，但在移动设备上如果也动辄就需要安装插件，用户体验有多差可想而知。而借助于HTML 5的音频和视频标签，就可以轻松实现播放功能。
除此之外，还有各种布局方式，以及丰富的设备API，这些在后续的章节中都会向读者一一介绍。1.1.3 移动Web与原生应用的优劣势
移动Web指的是以移动端浏览器为载体面向网页的开发，这种应用或服务一般需要通过一个URL来打开。而原生应用，也就是大家所熟悉的多数APP的开发模式，其针对不同的操作系统采用不同的开发语言和框架，专门针对某一类设备而研发。这两种开发方式并没有孰好孰坏之分，各有优劣，本节将对这些优势和劣势逐一剖析。
1.移动Web的优势
· 跨平台：网页应用运行在浏览器上，不直接跟系统打交道，只要系统安装了浏览器，就可以打开该应用。
· 开发成本低：因为没有平台问题，开发者不需要掌握多种开发语言和框架，只需要一个开发团队，就可以完成所有移动设备的前端开发工作。
· 更容易迭代：应用所有资源都在服务端，不需要用户主动安装更新就可以实现产品的升级迭代。
2.移动Web的劣势
· 功能有限：因为没有直接跟系统对接，只能使用浏览器提供的部分功能，很多硬件设备独特功能无法使用。
· 操作体验欠佳：由于运行在浏览器之上，用户的操作并非由系统直接接收并响应，再加上浏览器质量参差不齐，操作体验势必有所下降。
· 无法离线使用：虽然HTML 5提供了离线存储功能，但并不代表用户在首次访问应用时，本地已经存在。
· 很难被发现：用户获取APP的方式一般通过前往应用商店下载，Web APP并不具备在商店展示的条件。
3.原生应用的优势
· 功能完善：几乎具有设备所有功能的访问权限，可以满足用户的各种需求。
· 体验更好：速度快、性能高，使得原生应用的用户体验更具优势。
· 可离线使用：由于原生应用的所有程序代码和静态资源在用户安装时已经下载到本地，即便在断网的情况下，用户也可以进行部分操作。
· 发现机会高：无论是第一次下载（从应用商店），还是再一次使用（从设备图标打开），原生应用的机会都远大于Web应用。
4.原生应用的劣势
· 开发成本高：有多少操作系统，就需要开发多少套应用程序，不仅开发成本很高，维护成本也不容忽视。
· 迭代不可控：首先更新上线需要应用商店的审核，其次用户何时升级也是完全不受控制的。
· 内容限制：各应用商店都有自己的规范条例，原生应用的功能和内容需要完全符合这些条例才允许上架。
鉴于Web应用和原生应用各自的优劣势，已经有越来越多的APP开始走向混合开发的模式，即原生和Web同时存在。原生部分为用户提供更好的使用体验，Web部分可以实现更为快速的迭代更新。1.2移动Web前端现状与未来
我们这一代人是非常幸运的，处在一个互联网快速发展的时代，也是一个信息和科技发生重大变革的时代。前端作为这些信息的入口，变得越来越重要。1.2.1 移动Web的现状
在21世纪，互联网日新月异，移动互联网蓬勃发展，智能终端设备已经走进千家万户。甚至于，要想“幸福”地生活下去，或多或少都会接触到智能设备，都需要了解和使用APP功能。Web应用作为APP的一种存在形式，也必将受到越来越高的重视。
对于移动端开发，先来看一张示意图，如图1.5所示。图1.5 移动开发示意图
在前端开发这个大领域，移动Web前端开发虽然被认可的时间比较晚，但是发展势头比较迅猛。在HTML 5的带动下，出现了一系列新的标准和技术，前端开发框架也如同雨后春笋般涌现了出来。诸如Google、Facebook、阿里巴巴、腾讯等这些互联网巨头率先嗅到移动Web前端开发的重要性，开始大规模地对Web前端进行重构，也有越来越多的公司加入混合应用开发的队伍中来。
虽然移动Web前景如此明朗，但仍有很多问题需要解决。
1.浏览器种类繁多、参差不齐
除了系统原生浏览器，还有很多第三方浏览器，如UC、百度、腾讯、360、遨游等。这些浏览器对HTML 5的支持程度不一，对网页的渲染和交互也各有不同，除此之外还有一些浏览器性能堪忧，这大大增加了Web前端开发的成本。
2.网速仍然是性能瓶颈
在PC时代，网速是困扰用户和开发者的一大难题，到了移动时代，这个问题更是被加倍放大。移动设备所处的网络环境差，是客观存在的普遍现象，无论是2G、3G还是4G，网速都是阻碍Web应用发展的一个瓶颈。很多时候，开发者都要为网页快速加载做质量甚至功能上的让步。
3.多框架造成高门槛
在众多开发技术中，Web前端可以算是比较易学的一种。其没有服务端错综复杂的业务逻辑，也不用配置臃肿的开发环境，JavaScript语言更是简单轻量。但是现如今，为了解决Web前端开发工程化、模块化、开发和维护成本等一系列问题，出现了一大批前端开发框架，别说新入门的开发者，即便是有多年经验的前端老手，想要全部掌握这些框架，也是一个艰难的任务。
无论怎样，这是一个移动Web前端的大好时代，有机会，也有挑战。其中暴露出的Web问题，随着时间的推移，终将被一一解决。1.2.2 您需要掌握的知识体系
通过上一节了解了移动Web及其现状之后，本节将介绍作为移动Web前端工程师需要掌握的知识体系，整体结构如图1.6所示。
作为移动Web前端工程师首先必定是一名合格的软件工程师，然后才会因为精通前端领域而被认为是一名优秀的移动Web前端工程师。接下来将介绍图1.6中包含的每个知识模块的详情。图1.6 移动Web前端知识体系图（1）“计算机基础知识”模块包含的知识体系如图1.7所示。（2）“静态页面制作”模块包含的知识体系如图1.8所示。图1.7 计算机基础知识图1.8 静态页面制作（3）“编程语言”模块包含的知识体系如图1.9所示。（4）“开发工具”模块包含的知识体系如图1.10所示。图1.9 编程语言图1.10 开发工具（5）“浏览器”模块包含的知识体系如图1.11所示。（6）“代码质量”模块包含的知识体系如图1.12所示。图1.11 浏览器图1.12 代码质量（7）“工程化”模块包含的知识体系如图1.13所示。（8）“库/框架”模块包含的知识体系如图1.14所示。图1.13 工程化图1.14 库/框架（9）“移动前沿技术”模块包含的知识体系如图1.15所示。图1.15 移动前沿技术
正是由于对Web前端这个职能的定义范围越来越广，能力要求越来越高，才会出现独立的Web前端工程师角色。Web前端工程师虽然仍有时被误解为UI设计师，但其实静态页面制作只是其日常工作中的一小部分，其主要的工作是进行浏览器端编码。随着Node.js的流行，一部分后端编码逻辑也变成了Web前端工程师的工作内容之一。可见，计算机基础知识是一名软件工程师必须掌握的，Web前端工程师也不例外。1.2.3 技术拐点与未来趋势
在2005年以前，主流的网页如图1.16所示。图1.16 搜狐官网
注意：这是现在搜狐官网的截图，代表了2005年以前主流网页形态。
这类网页的特点是页面风格比较简陋，而且没有过多交互。通常，后端工程师会使用后端模板完成页面渲染。同时，后端工程师也会书写少量的JavaScript代码完成一些基础的页面交互，如验证表单输入信息。
这个时期的特点是，前端的工作主要指页面制作，通常由后端工程师使用后端Web框架完成，或者由UI设计师完成。
拐点来自于Google在2005年推出的Web邮箱Gmail。为了提高用户体验，Google使用了大量的AJAX技术，将Gmail实现为一个单页应用，JavaScript作为第一编程语言在项目里被大量使用。
这段时间还是纯粹的PC时代，在这期间，也有Web前端工程师的称呼，但概念其实比较混乱。有可能指的是UI设计师，也有可能指的是偏Web开发的后端工程师。随着PC Web应用的复杂化，大量具备软件工程知识的开发者慢慢地转向前端领域，促进着该行业的快速发展。
随着智能手机的普及，PC业务慢慢向移动端转移，移动端APP开始大面积兴起，业务版本的快速迭代，也使得原生移动的开发方式的缺点暴露得越来越明显。除了开发成本过高，同一个APP需要在iOS和Android端实现两次外，最致命的缺点是每次更新都需要发版，用户需要重新安装APP。
为了解决这些问题，在2012年，Hybrid技术开始被大规模使用。Hybrid开发的APP基于Web技术，一套代码多处运行，而且可以达到及时更新的效果。为了让Hybrid APP能够接近Native APP的视觉体验和交互体验，对Web开发者的能力要求也达到了一个新的高度。
Web前端技术圈是一个开放的、充满激情的、不断扩展自身能力边界的圈子。在纵向上，Node.js把边界扩展到服务器端开发。在横向上，React Native试图使用Web技术开发Native APP。在新兴领域，如VR、AR、物联网等领域，也都在试图进入、制定相关标准。其他方面，如微信小程序，也使用Web技术开发。
看完Web前端的前世今生，可以发现，Web前端的定位是希望能够扩展到所有的跟表现层相关的领域，解决人机交互的问题。1.3常见问题1.3.1 移动Web前端开发有前景吗
当投入精力去学习一门技能的时候，尤其是要把这门技能作为自己的求职技能时，往往都需要关注技能在现在以及将来的就业市场上能否保持强劲的竞争力。这是无可厚非的，毕竟很少有人今天会去学习Pascal，然后把Pascal当作自己的求职技能。
上一节讲述了Web前端未来趋势，本节将介绍现在市场上Web前端工程师的就业行情，以及Web前端工程师的发展方向。
2016年某专业招聘网站技术岗位就业情况，如图1.17所示。2017年春季技术岗位就业情况如图1.18所示。可以看到，近两年，Web前端工程师的需求仍旧非常旺盛。同时值得庆幸的是，Web前端行业一直在扩展自己的领域边界。前端已经不再是一个只有HTML、CSS和JavaScript的领域，读者应该保持对自身技术边界的开拓。图1.17 2016年互联网行业技术职位就业情况图1.18 2017年春季互联网行业技术职位就业需求1.3.2 PC Web和移动Web开发区别
PC Web和移动Web开发所需要掌握的基本知识体系并没有太大区别，只是不同的终端（如电脑、手机）具有不同的特性。本书主要介绍移动Web前端开发技能，所以接下来结合本书的部分大纲来讲解需要重点关注的知识点。
· 第3章HTML 5快速入门，讲述HTML 5新增功能的应用，如实现手机摇一摇。
· 第4章CSS 3基础，讲述CSS 3新增功能的应用，如CSS 3动画。
· 第6章HTML 5开发实战，讲述移动端潮流技术的应用，如3D全景效果。
· 第7章移动网页样式布局实战，讲述移动端布局，如Flex布局、rem布局。
· 第10章混合式开发实战，讲述Hybrid开发方式，如使用Cordova，还介绍了React Native技术。
· 第11章实战中的开发调试，讲述移动端调试技巧，如使用真机调试。
· 第13章性能优化实战，讲述移动端性能优化技巧，如针对不同网络进行优化。
总而言之，如果以前从事过PC Web开发工作，现在转向移动Web开发，绝大部分知识仍旧需要，并且依然有效。当然，还需要学习一些跟移动Web开发相关的新知识。1.4本章小结
本章从前端的发展史出发，通过与传统Web开发和原生开发的比较，向读者介绍移动Web开发独有的特性。同时还提供了一套全面的知识体系图，帮助大家形成一个初步的认识，在接下的章节中读者可以了解到知识体系中关键的技术点和当下通用的解决方案。第2章移动Web开发环境搭建
在进行移动Web开发之前，搭建一个合适并且高效的环境非常关键。本章将介绍本书实例中使用的开发工具和环境，并且推荐读者使用同样的环境进行编程。本章的开发环境基于Mac OS系统（相关的工具同样提供了Windows版本）。2.1Visual Studio Code免费跨平台编辑器
这里所说的Visual Studio Code并非微软提供的大型开发工具包Visual Studio，而是微软在2015年4月份发布的一款能够运行在Windows、Mac OS和Linux之上的免费跨平台编辑器。优秀的性能，完备的特性，加之针对于Web端开发的优化和方便的调试，使其被评价为最好用的IDE。
Visual Studio Code官网地址为https://code.visualstudio.com/，如图2.1所示。图2.1 Visual Studio Code官网
下载安装的步骤这里忽略，直接打开主界面，如图2.2所示。图2.2 Visual Studio Code主界面
同时Visual Studio Code提供了大量扩展插件，可以单击“扩展”图标按钮安装，也可以访问网站https://marketplace.visualstudio.com/VSCode获取，如图2.3所示。图2.3 Visual Studio Code扩展插件
Visual Studio Code还提供了非常方便的Node.js调试环境，笔者将在稍后的Node.js章节介绍。2.2使用Node.js
Node.js在2009年由Ryan Dahl推出，早期的Node.js更像是一种前端工程师的“玩具”，因为JavaScript也能开发后端应用。历经8年多的发展，Node.js已经被用在国内外各大互联网公司的线上重要应用中，像国外的Google、Uber、PayPal等，国内的腾讯、阿里巴巴、百度等。还在NASA（美国国家航空航天局）的很多项目中得到应用，包括宇航服的部分控制系统。Node.js的重要性不言而喻。2.2.1 Node.js的用途
在讲Node.js的用途之前，先介绍Node.js是什么。按照官网的解释：“Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用高效、轻量级的事件驱动、非阻塞I/O模型。”
介绍中提到的V8是Google开源的、高性能的JavaScript引擎，因其高效的JavaScript编译和执行性能，使得依赖于V8的Node.js变得更加可靠。
Node.js用途就像前面提到的，已经渗透到各大互联网公司的重要线上应用中，同时很多创业或者中小型公司的后端甚至全部采用Node.js开发。当使用互联网上一项常用的服务时，说不定后面就有Node.js的影子。所以，Node.js几乎能够实现一切应用，只是需要根据业务和项目选择使用。2.2.2 安装和调试Node.js
Node.js官网地址为https://nodejs.org，截至当前（撰写时间）Node.js的稳定版本是6.10.3，最新版本是8.0.0，如图2.4所示。图2.4 Node.js官网（1）下载最新版本并安装，安装界面如图2.5所示。（2）打开终端验证安装是否成功，命令如下：（3）安装正常，则显示当前Node.js版本信息，如下：
提示：大多数开源软件都会遇到版本问题，Node.js也不例外。很多时候需要在本地安装多个版本的Node.js进行开发，这里推荐一个非常实用的Node.js版本管理工具NVM（Node Version Manager），GitHub地址为https://github.com/creationix/nvm。图2.5 安装Node.js（4）接着使用2.1节推荐的编辑器Visual Studio Code对Node.js进行调试。使用Node.js官方实例创建JavaScript文件，代码如下：（5）单击编辑器左侧工具栏中的“调试”按钮，效果如图2.6所示。（6）在第5行代码处添加断点，并单击左上角文字“调试”右侧的三角按钮，开始启动调试功能，如图2.7所示。（7）服务启动成功，在“调试控制台”输出HTTP服务运行地址和端口号，打开浏览器访问地址http://127.0.0.1:3000，将自动切换进入编辑器调试控制台。一个简单的在Visual Studio Code中调试Node.js实例介绍完毕，读者也可以访问https://code.visualstudio.com/docs/nodejs/nodejs-debugging，查看更多高级调试功能。图2.6 调试Node.js图2.7 启动Node.js调试2.2.3 什么是NPM
NPM全称Node Package Manager，即Node.js模块管理工具，随同Node.js一起安装，比如安装上节介绍的Node.js v6.10.3时，随同的NPM版本是v3.10.10。NPM同样也有自己的官网，可以搜索社区贡献的丰富的工具包，地址为https://www.npmjs.com，如图2.8所示。图2.8 NPM官网
想要顺利地使用Node.js，学会常用的NPM命令必不可少，表2.1列举了常用的NPM操作命令。表2.1 NPM常用操作命令续表
试读结束[说明：试读内容隐藏了图片]