下载掌阅APP，畅读海量书库
立即打开
本节介绍如何开发一个完整的Node应用程序。这里，需要使用到Visual Studio Code作为Node代码开发和管理的工具，同时还需要使用到Webpack模块打包器作为构建Node应用框架的工具，这些都是开发Web前端应用的基础知识。
Visual Studio Code（简称VS Code）可谓是近年来风头日盛的代码开发和管理工具，该工具由微软（Microsoft）公司负责开发维护，并在2015年4月30日的Build开发者大会上第一次正式对外发布。
Visual Studio Code的设计目标是一款能够满足跨平台运行的、轻量级的、可扩展的开发工具，主要用于编写当前流行的Web应用和云服务应用的源代码编辑器。虽然VS Code同样是隶属于Visual Studio系列开发平台，但与诸如Visual Studio 2015、Visual Studio 2019这类的重量级的、功能强大的、集成式的开发平台完全不同。VS Code自身仅是一款源代码编辑器，编写好的C程序无法在VS Code中编译运行，js脚本文件也是无法在VS Code中解释执行。
不过，如果因此而小看VS Code就大错特错了，VS Code的特点就是提供很强的扩展功能，强大到让设计人员惊叹的程度。VS Code的扩展功能是通过安装相应的插件实现的，前面提到的C程序和js脚本，甚至包括Java、Python、Node程序，以及本书后面将要重点介绍的Vue.js程序，都可以通过安装相对应的功能插件而得到支持。因此，VS Code在极短的时间内就得到了业内的充分认可，并迅速在源代码编辑器市场占据了一席之地。对此，相信你也只能感叹微软（Microsoft）研发能力的强大了。
在Windows平台下安装Visual Studio Code的方法非常简单，自家的操作系统平台自然会提供最好的支持。首先，进入Visual Studio Code官方网址的下载页面（https://code.visualstudio.com/Download），如图1.17所示。
图1.17 Visual Studio Code官方下载页面
如图1.17所示，在Windows系统平台区域中的“System Installer”类别中选择64-bit版本的安装包（VSCodeSetup-x64-1.45.1.exe）进行下载，该版本是为系统用户配置的。另外，还有一种“User Installer”类别是为个人用户配置的版本。在图中，还可以看到Visual Studio Code的Linux版本和Mac版本，这表明了Visual Studio Code是一款跨平台的开发工具。
在Windows操作系统中安装Visual Studio Code安装包很简单，直接双击VS Code安装包开始安装，然后按照步骤进行安装即可。
（1）首先会进入安装程序的“许可协议”界面，如图1.18所示。
图1.18 Visual Studio Code安装过程（一）
（2）选择“我接受协议”选项才会激活“下一步”按钮，单击“下一步”按钮进入“选择目标位置”界面，如图1.19所示。
图1.19 Visual Studio Code安装过程（二）
（3）这里可以选择用户自定义的VS Code安装路径，继续单击“下一步”按钮。然后，就会进入实际安装过程，直到安装程序执行完毕，如图1.20所示。
图1.20 Visual Studio Code安装过程（三）
（4）如图1.20所示，如果勾选了“启动Visual Studio Code”选项，在单击“完成”按钮后会退出安装程序，同时启动Visual Studio Code开发工具。初次运行Visual Studio Code时的界面如图1.21所示。
图1.21 初次运行Visual Studio Code程序时的界面
（5）如图1.21所示，Visual Studio Code开发工具的界面非常简洁（轻量级），窗口的顶部是一个主菜单，窗口的左侧一列是快捷工具按钮列表（可以安装扩展功能），窗口的中部是具体的文档编辑区域（包括一些开发功能的快捷方式）。
（6）继续单击左侧快捷工具按钮列表中最上面的“资源管理器（快捷键为Ctrl+Shift+E）”按钮，界面效果如图1.22所示。
图1.22 Visual Studio Code资源管理器
如图1.22中的箭头和标识所示，打开“资源管理器”后，会在窗口左侧显示一个区域，里面包括了工程目录、大纲和时间线等项目。设计人员可以在这里新建或引入自己的工程目录进行源代码的有效管理，本书的工程目录名称为“vueprojects”（注意，VS Code默认会将工程目录名称全部显示为大写）。
接下来，我们尝试通过Visual Studio Code测试运行前面【代码1-1】所创建的commandline.js文件。首先，在VS Code中通过“文件”菜单中的“打开文件夹…”菜单项来打开工程目录，效果如图1.23所示。
图1.23 Visual Studio Code打开工程目录
如图1.23中的箭头所示，单击后会打开一个“文件选择对话框”，选中之前创建好的“vueprojects”工程目录即可，效果如图1.24所示。
图1.24 Visual Studio Code打开工程目录
如图1.24中的箭头所示，已经能看到之前【代码1-1】所创建的commandline.js文件。那么，如何通过VS Code工具运行该js脚本文件呢？
这里，需要在VS Code中安装一个名称为“Code Runner”的插件以运行js脚本文件，具体安装方法如下。在左侧快捷工具按钮列表中找到“扩展（快捷键为Ctrl+Shift+X）”按钮，界面效果如图1.25所示。
图1.25 Visual Studio Code安装扩展
如图1.25中的箭头和标识所示，打开“扩展”界面后在搜索栏输入“Code Runner”字符串，下面自动筛选出来的扩展列表中的第一项就是“Code Runner”插件，直接单击进行“安装”即可。由于笔者已经安装过该插件，因此图1.25中显示的是已安装状态，从右侧主窗口可以看到关于“Code Runner”插件的功能介绍。可以看到该插件除了支持JavaScript脚本语言外，还支持多种编程语言（C、C++、Java、PHP、Python、Go…），功能是十分的强大。
安装好“Code Runner”插件后，就可以直接在VS Code中测试运行js脚本文件了。我们返回图1.24所示的界面状态，选中commandline.js文件并右击，会弹出一个上下文功能菜单，效果如图1.26所示。
图1.26 通过“Code Runner”运行JavaScript脚本文件（一）
如图1.26中的箭头所示，在上下文功能菜单中单击“Run Code”菜单项，VS Code开发工具会弹出一个“输出”界面窗口，显示js代码调试运行的输出结果，效果如图1.27所示。
图1.27 通过“Code Runner”运行JavaScript脚本文件（二）
如图1.27中的标识所示，调试运行的输出结果与前面图1.16所示的结果是一致的，说明VS Code开发工具的“Code Runner”插件可以完美替代Node程序在命令行终端的运行能力。
在前文中，我们介绍了如何通过Visual Studio Code开发工具测试运行单个js脚本文件的Node程序。不过，这种开发方式在近年来已经被一种全新的、以自动化方式构建Web前端应用的方式所取代了。
所谓“自动化”方式，其实就是通过一种或几种自动化工具来构建Web前端应用的开发框架。这类开发框架基本都是通过一种或几种工具自动生成的，生成后的框架会包含大部分Web前端应用所需的基本类库、第三方插件和支撑配置文件，等等。可以说，这种全新的开发方式将Web前端应用开发提升到了一个全新的高度，并且符合将前后端分离开来进行独立设计的大趋势。
Web前端的自动化构建工具有很多种，其中著名的就是Webpack模块化打包器工具，其也是目前Web前端开发中流行的工具之一。Webpack的功能十分强大，设计了“入口（entry）”“输出（output）”“加载器（loader）”和“插件（plugins）”这四个概念，以递归方式构建出一个应用程序主要资源的依赖关系图，并最终完成将JavaScript模块打包成一个或多个“包（bundle）”。
由于本书不是专门介绍Webpack工具的（感兴趣的读者可去参考Webpack官网的内容），这里仅就如何使用Webpack工具构建Node应用进行简单的介绍，过程如下。
（1）创建Node应用程序目录，并进入该目录，命令行如下：
（2）通过npm命令进行初始化项目的操作，命令行如下：
npm就是包管理工具命令，参数init表示进行Node应用项目的初始化操作。该命令参数会生成一个package.json配置文件，用于描述该项目的详细配置信息。如果再添加“-y”参数，则表示项目使用默认的配置参数（省去了人工操作的过程），效果如图1.28所示。
图1.28 通过“npm init”命令初始化项目
如图1.28所示，命令行控制台中显示出生成的package.json文件的内容，这些信息都是默认生成的，后期用户可以自行修改。
（3）通过npm命令在本地安装Webpack开发包，命令如下：
在npm命令中使用参数install表示安装第三方开发包，后面指定了开发包的名称webpack和webpack-cli。其中，webpack-cli表示webpack的命令行工具，也就是在命令行中可以支持使用Webpack。另外，使用参数“--save-dev”表示该安装包为调试开发时的依赖项，信息会记录到package.json文件中的devDependencies子项中，后期项目发布时不需要这些安装包。安装过程需要一些时间，请读者耐心等待，效果如图1.29所示。
图1.29 通过“npm”命令安装Webpack
如图1.29中的箭头所示，已经成功安装了“webpack@4.43.0”和“webpack-cli@3.3.11”开发包，其中“@”符号后面标识的是开发包的版本号。
至此，通过Webpack工具构建Node应用程序框架的步骤就基本完成了。
目前，有多种开发工具可以支持Node.js应用的开发，比如：jetBrains WebStorm、Eclipse、Visual Studio Code等。这些开发工具原则上是“条条大路通罗马”，相互间各有优势、并无优劣之分。在本书中，我们选择Visual Studio Code开发工具，之所以选择该工具也是为了配合后面关于Vue.js的内容。
接下来，通过Visual Studio Code打开刚刚创建的Node应用目录（vueprojects），效果如图1.30所示。
图1.30 通过VS Code管理Node应用（一）
如图1.30中的方形区域标识所示，里面显示了Node应用的目录结构，具体内容如图1.31所示。
图1.31 通过VS Code管理Node应用（二）
如图1.31所示，node_modules目录存放了通过npm命令安装的各种开发包，里面不仅仅是刚刚安装的webpack和webpack_cli开发包，还包括了整个Node生态系统必要的依赖项。因此，node_modules目录的体积通常是一个较大的数量级，这点也算是Node生态系统的不足之处。
再次返回图1.30中，箭头标识的是package.json配置文件的内容，具体代码如下：
【代码1-2】
【代码说明】
以上关于package.json配置文件的内容都是最基本的。功能越复杂，安装依赖项越多，package.json配置文件的信息也会随之增加。
另外，还有一个package-lock.json配置文件，这个文件是在NPM v5版本以后新增加的功能。在通过“npm install”命令安装开发包后会自动生成该文件，该文件锁定了当前安装的小版本号。因此，当用户再次使用“npm install”命令后，就可以避免直接通过package.json配置文件将开发包升级到最新版本，有效地避免了因为版本升级带来的各种依赖冲突。但若用户真想升级到最新版本或某个指定版本，则必须在开发包名称后使用“@latest”或“@版本号”来执行指定版本号的升级。
接下来，具体介绍如何开发一个基本的Node应用程序，该程序实现了一个简单的、基于Node框架的Web服务器。
（1）在应用程序根目录下创建一个HTML 5页面文件（index.html），我们通过VS Code开发工具来实现该操作。在应用程序根目录（vueprojects）上单击快捷方式“新建文件”图标，效果如图1.32所示。
图1.32 通过VS Code新建HTML页面文件（一）
单击“新建文件”图标后会自动创建一个文件。注意，这个文件没有名称，也没有文件类型后缀，全部需要设计人员手动输入（index.html），这点可能与其他开发平台差异比较大。因此，该新建文件是一个空白的HTML 5网页，如图1.33所示。
图1.33 通过VS Code新建HTML页面文件（二）
新建的index.html网页全部空白，没有一行默认生成的代码。此时，读者如果对VS Code的开发工具产生质疑，那就大错特错了。VS Code为设计人员提供很强大的自动代码生成功能，下面为读者演示如何操作。
在空白页面最开始处输入字符“!”，然后会激活并弹出一个快捷输入方式，如图1.34所示。
图1.34 通过VS Code新建HTML页面文件（三）
如图1.34中的箭头所示，此时会弹出一个快捷输入方式，在里面的列表菜单中有一个“!”选项。注意，后面的提示信息为“Emmet Abbreviation”，说明该功能是由Emmet插件所提供的。提到这个Emmet插件可谓是大名鼎鼎，在很多集成开发工具或轻量级代码编辑器中都有其身影，是一款非常好用的代码自动生成工具。因此，VS Code索性就将Emmet插件内置其中了，用户不用再单独安装该插件了。
下面我们看一下Emmet插件的使用方法，在选中的“!”选项中直接按回车键或Tab键，代码自动生成的效果如图1.35所示。
图1.35 通过VS Code新建HTML页面文件（四）
如图1.35所示，Emmet插件直接在index.html文件中自动生成了一个HTML 5网页模板。
（2）在应用程序根目录下创建一个src子目录，在该子目录下新建一个js脚本文件（index.js），方法同图1.32所示。在index.js脚本文件中，输入如下代码：
【代码1-3】
【代码说明】
（3）对index.html页面代码进行适当修改，在index.html页面文件中引用index.js脚本文件，代码如下：
【代码1-4】
【代码说明】
（4）更新package.json配置文件的内容，代码如下：
【代码1-5】
【代码说明】
（5）此时就可以简单地测试一下该Node应用了，最直接的方法就是在浏览器中运行index.html页面文件，效果如图1.36所示。
图1.36 在浏览器中运行HTML页面文件
如图1.36中的箭头所示，浏览器页面中显示了index.js脚本代码执行的结果。不过，虽然上面的Node应用正确执行了，但远没有发挥出Webpack工具的能力。接下来，我们通过Webpack重构一下上面的Node应用。
（6）创建“分发（dist）”目录结构。
这里需要调整一下原始的目录结构，将“源（src）”代码从“分发（dist）”代码中分离出来。根据Webpack定义的规范，“源（src）”代码是开发时使用的代码，“分发（src）”代码是构建过程产生的代码最小化和优化后的“输出（output）”目录，用于在浏览器中展示给终端用户。
具体操作还是在VS Code工具下完成，效果如图1.37所示。
图1.37 创建“分发（dist）”目录结构
如图1.37中的箭头所示，我们还需要将index.html页面文件移入“分发（dist）”目录，便于后期调试运行。
（7）修改完善index.js脚本文件和重新更新index.html页面文件。
我们将直接在页面文件写入（document.write()方法）文本的方式，替换为通过层（div）标签插入文本的方式。另外，这里需要借助一个Lodash插件来完成该任务，Lodash是一个高性能的、模块化的JavaScript实用工具库，简化了数组、字符串和对象等类型的操作难度，在业内十分受欢迎。Lodash插件的使用方法有以下几种：
①直接引用方式：
② CDN方式：
③本地安装方式：
以上3种方式均可行，但从Node应用的角度看，推荐使用第3种方式。关于“本地安装方式”的过程，如图1.38所示。
图1.38 安装Lodash库
如图1.38中的箭头所示，默认安装的是Lodash库的最新稳定版（4.17.15）。另外，在上面的第2种CDN方式中，指定的安装版本号一般都是比较新的稳定版。
接下来，修改一下index.js脚本文件，具体修改后的代码如下：
【代码1-6】
【代码说明】
■ 第06行代码中，通过document对象调用createElement()方法创建了一个层（div）标签元素（eleDiv）。
■ 第08行代码中，通过“_”调用join()方法连接了一组字符串，并定义为层（eleDiv）标签元素的innerHTML属性。
■ 第10行代码中，返回创建好的层（eleDiv）标签元素。
在修改好index.js脚本文件后，还要修改一下index.html页面文件。因为现在需要通过Webpack工具打包合成脚本文件，所以需要加载分发（dist）目录中的bundle（包）脚本文件（main.js），就不再需要加载src目录的原始脚本文件了。index.html页面文件修改后的代码如下：
【代码1-7】
【代码说明】
（8）通过Webpack工具打包Node应用。
通过执行Webpack打包命令，将会从index.js脚本作为入口起点，最终打包合并输出main.js脚本文件。命令如下：
npx命令是从NPM 5.2+版本开始提供的命令，可以自动执行npm包内的二进制安装文件。关于“npx webpack”命令的执行过程，如图1.39所示。
图1.39 通过Webpack打包Node应用
如图1.39中的箭头所示，通过Webpack打包后自动生成了main.js脚本文件。至于后面的警告信息先不用理会，后面会通过相关配置消除该警告信息。
下面我们返回VS Code开发工具的源代码目录（dist），看一下有没有什么变化，效果如图1.40所示。
图1.40 更新“分发（dist）”目录结构
如图1.40中的箭头所示，在“分发（dist）”目录下自动生成了一个main.js脚本文件，这就是通过Webpack工具打包生成的bundle包文件。下面，我们来见识一下这个main.js脚本文件的庐山真面目，如图1.41所示。
图1.41 在浏览器中运行HTML网面文件
如图1.41所示，main.js脚本文件是一个经过代码压缩的打包文件（提高运行速度），但代码阅读起来是相当有难度的。另外，还可以看到main.js脚本文件将Lodash包也一并压缩进去了。
（9）此时可以再次测试这个Node应用，仍旧是在浏览器中运行index.html页面文件，效果如图1.42所示。
图1.42 在浏览器中运行HTML页面文件
如图1.42中的箭头所示，浏览器页面中显示了index.js脚本代码第二次更新修改后的执行结果（Hello Webpack!），说明经过Webpack工具打包后生成的main.js脚本文件正确运行了。
（10）使用Webpack配置文件。
细心的读者可能会发现上面的第（8）步有些奇怪，在Webpack打包过程中似乎隐藏了一些细节，在main.js脚本文件中看不到具体配置信息。其实，这是通过Webpack工具的默认配置所完成的，因此对于简单的应用通常不需要配置。
但是，Webpack工具有一个配置文件（webpack.config.js），在应对较为复杂的Node应用时就会派上用场。在应用Webpack工具时，使用配置文件（webpack.config.js）可有效地避免在控制台终端以手动方式输入大量烦琐的命令，而是以自动化的方式完成压缩、合并和打包等复杂操作。
Webpack配置文件（webpack.config.js）一般放置在Node应用的根目录下，与Node应用配置文件（package.json）处于同一级，效果如图1.43所示。
图1.43 Webpack配置文件——webpack.config.js
如图1.43中的箭头所示，将Webpack配置文件（webpack.config.js）放置于Node应用（vueprojects）根目录下。然后，简单地配置一下Webpack配置文件（webpack.config.js），代码如下：
【代码1-8】
【代码说明】
■ 第08行代码中，通过filename参数配置打包后的出口脚本文件的名称（bundle.js）。
■ 第09行代码中，通过path参数解析了打包后的出口文件路径。
（11）重新配置package.json配置文件。
在原始package.json配置文件中的scripts节点下添加一个build参数，具体脚本代码如下：
【代码1-9】
【代码说明】
（12）再次修改index.js脚本文件和index.html页面文件。
下面是再次修改index.js脚本文件后的具体代码：
【代码1-10】
【代码说明】
由于在Webpack配置文件（webpack.config.js）中重新定义了出口脚本文件（bundle.js），因此还要再修改一下index.html页面文件，修改后的代码如下：
【代码1-11】
【代码说明】
（13）再次通过Webpack工具打包Node应用。
由于在package.json配置文件的script节点中，重新定义了脚本执行命令，因此需要输入新的命令来执行Webpack打包操作，命令如下：
上面命令行中的build参数是在package.json配置文件中定义的，读者可以返回到配置文件中去查看一下。
“npm run build”命令的执行过程，如图1.44所示。
图1.44 通过Webpack配置文件打包Node应用
如图1.44中的箭头所示，通过Webpack打包后自动重新生成了bundle.js脚本文件。另外，读者可能注意到警告信息已经不见了，是因为在【代码1-8】中的第11行代码添加配置了mode参数。
下面我们再次返回VS Code开发工具的源代码目录（dist），看一下有没有什么变化，效果如图1.45所示。
图1.45 再次更新“分发（dist）”目录结构
如图1.45中的箭头所示，在“分发（dist）”目录下自动生成了一个bundle.js脚本文件，这就是通过Webpack工具配置文件重新打包生成的bundle包文件。这个重新生成的bundle.js脚本文件符合ES6标准规范，由于代码比较长在本书中就不列出来了。
（14）此时可以再次测试一下这个Node应用，仍旧是在浏览器中运行index.html页面文件，效果如图1.46所示。
图1.46 在浏览器中运行HTML页面文件
如图1.46中的箭头所示，浏览器页面中显示了index.js脚本代码第三次更新修改后的执行结果（Hello Webpack & NodeJS!），说明通过Webpack工具配置文件打包后生成的bundle.js脚本文件正确运行了。
（15）通过webpack-dev-server插件实现Node应用热加载。
Webpack工具的打包操作功能固然十分强大，不过相信读者也发现了每次的打包操作都需要手动进行，之后的页面测试过程也很粗放（直接运行HTML页面文件）。于是，研发人员为了配合Webpack工具就设计了一个webpack-dev-server插件，可以实现Node应用的自动打包和热加载功能。webpack-dev-server插件的安装方法与webpack方式一致，命令如下：
安装完毕后，还需要在package.json配置文件的script节点中，新增一个dev参数的配置信息为插件名称（webpack-dev-server）。
然后，通过直接运行“npm run dev”命令就可以执行打包操作了，效果如图1.47所示。
图1.47 再次运行“npm run dev”命令进行打包
如图1.47中的标识所示，控制台终端中给出了Node应用服务端运行地址的提示信息（http://localhost:8080/），我们通过浏览器直接访问该地址就能测试该项目了。效果如图1.48所示。
图1.48 在浏览器中测试Node应用
如图1.48中的箭头所示，页面在打开后并不是预期的运行效果，显示的却是项目的目录结构。这里，需要再次单击“分发（dist）”目录才可以运行index.html页面。
接下来，我们体验一下webpack-dev-server插件的热加载功能。具体方法就是修改更新一下源文件（index.js）代码，然后注意观察一下控制台终端的变化，如图1.49所示。
图1.49 通过webpack-dev-server实现热加载
如图1.49中的箭头所示，在没有经过手动命令操作的情况下，webpack-dev-server插件重新编译了源文件，这就是所谓的“热加载”功能。不过，比较遗憾的是浏览器上显示的页面并不会随之更新，需要手动操作来完成更新。
（16）配合HotModuleReplacementPlugin插件实现Node应用热更新。
为了解决webpack-dev-server插件无法实现热更新操作的问题，这里需要借助Webpack工具自带的HotModuleReplacementPlugin插件来配合webpack-dev-server插件完成热更新功能。
使用HotModuleReplacementPlugin插件时，需要在Webpack配置文件（webpack.config.js）中增加plugins节点的配置，代码如下：
然后，再次尝试修改更新一下源文件（index.js）中的代码，注意观察一下浏览器页面显示内容的变化，如图1.50所示。
图1.50 浏览器页面显示内容的热更新
如图1.50中的箭头所示，浏览器页面的内容通过“热更新”功能进行了自动更新。至此，关于使用VS Code开发工具通过Webpack开发Node应用的基本过程就介绍完了，希望能够对读者有所帮助。