Visual Studio 的 Node.js 工具分步图解
3.50/5 (5投票s)
本文讨论 Visual Studio 的 Node.js 工具的重大发布。
- 下载 NodejsConsoleApp1.zip - 5.2 KB
- 下载 ExpressApp3.zip - 9.1 KB
- 下载 ExpressApp2.zip - 373.4 KB
- 下载 ExpressApp1.zip - 8.9 KB
- 下载 NodejsWebApp1.zip - 5.1 KB
目录
- 引言
- 什么是 Node.js？
- 如何安装 Node.js？
- 让我们开始创建一个简单的应用程序
- 先决条件
- 创建骨架/空 ASP.Net 项目
- 讨论 Node.js 模板
- 来自现有 Node.js 代码
- 空白 Node.js 控制台应用程序
- 文件夹结构
- 安装/更新 Node 依赖项
- 空白 Node.js Web 应用程序
- 文件夹结构
- Visual Studio Intellisence 体验
- 基本 Node.js Express 3 应用程序
- 文件夹结构
- 运行应用程序
- 分析 app.js
- 调试应用程序
- Node.js 交互式窗口
- 诊断信息
- 讨论 Visual Studio 的 Node.js 工具的特性
- Visual Studio – 带有 Node.js 工具的 IDE 风格
- 调试体验
- TypeScript 支持
- 结论
简介
2014 年 11 月 24 日，Node.js 强大工具发布，适用于 Visual Studio。此工具拥有最新的强大功能，可让您的 Visual Studio 拥有强大的 Node.js。
什么是 Node.js？
Node.js 是一个 Visual Studio 工具，可让您在 Visual Studio 中获得 Node.js 工作体验。
如何安装 Node.js？
以下是安装 Visual Studio 的 Node.js 工具的步骤指南。请注意，本文中使用的是 Visual Studio 2013 Update4。
- 访问 Visual Studio 的 Node.js 工具
- 选择推荐的下载
- 按照说明操作，它将安装出色的 Node.js 工具
让我们开始创建一个简单的应用程序
在这篇文章中，我们将使用内置模板开始构建简单的应用程序
先决条件
要实现并运行源代码，您应该具备
- Visual Studio 2013 或更高版本
- Visual Studio 的 Node.js 工具
- Node.js 基础知识
创建骨架/空 ASP.Net 项目
- 打开 Visual Studio 2013
- 选择 文件->新建->项目（或按 Ctrl + Shift + N）
- 在“已安装模板”下选择 Javascript -> Node.js
讨论 Node.js 模板
让我们讨论可用的模板，这些模板可能会根据您的自定义安装或附加组件而增多或减少
来自现有 Node.js 代码
如果您曾经创建过 `Node.js` 应用程序并希望体验 `Visual Studio` 的风味，您也可以使用此模板。因此，无需进行任何特殊操作，只需选择此模板，选择现有 Node.js 应用程序的路径，您的应用程序就已准备就绪。
空白 Node.js 控制台应用程序
此模板为您创建一个空应用程序，只是一个简单的骨架，其中包含一个只有一行的 `app.js`
console.log('Hello world');
让我们亲手操作一下这个模板，了解更多信息
请看上图，
- 不要选择“为解决方案创建目录”
- 不要选择“添加到源代码管理” [如果您想，可以]
单击“确定”以路由应用程序。
您可以看到的第一个文件包含以下代码
console.log(‘Hi everyone!’);
setTimeout(function(){
},3000);
只需运行应用程序 [F5]，您会看到控制台窗口快速出现并消失，并且看不到预期的输出。
让我们重写上面的代码（我们在 `app.js` 中看到的），这样我们就可以暂时保持控制台窗口
在上面的代码片段中，只需添加我们的函数以将窗口保持 3000ms。
现在太棒了，我们可以看到输出了
文件夹结构
让我们看一下文件夹结构
在这里你可以看到我们的控制台应用程序包括
- `npm` – 所有 Node.js 依赖项
- `app.js` – 我们的简单 node.js 代码，一个 javascript 文件
- `package.json` – 所有关于配置、项目详细信息、版本和作者详细信息等的信息。
- `README.md` – 一个普通的 readme 文件
安装/更新 Node 依赖项
只需在解决方案资源管理器中右键单击项目并单击“打开命令提示符”
在命令提示符中输入“npm install”
它将安装项目所需的所有依赖项
或者，展开“npm”节点，右键单击 -> 选择“更新已安装包”，它将用最新版本更新所有包。
此外，您可以通过打开上述选项（ctrl K,P）的 npm 安装窗口来完成此操作
空白 Node.js Web 应用程序
现在，让我们尝试另一个 Node.js 模板。关闭现有解决方案或添加一个新的，并选择“空白 Node.js Web 应用程序”模板。
执行上述操作后将打开第一个文件
运行应用程序，按 F5。您将看到两件事发生
- 一个命令窗口被调用——这表明 Node 服务器正在端口 5858 上运行。
- 一个 Web 浏览器被调用，显示来自 server.js 文件的输出（这是一个默认项目文件）
文件夹结构
您会发现与 Node.js 空控制台应用程序相似的文件夹结构
Visual Studio Intellisence 体验
让我们尝试在 server.js 文件中写入一些内容，您会注意到您获得了 Visual Studio 典型的智能感知
因此，您可以获得与使用 C#/asp.net 等其他语言时相同的 Visual Studio 所有功能体验。
基本 Node.js Express 3 应用程序
此模板提供了使用 Express 3 包创建基本 Node.js 应用程序的功能
在上述操作期间，您将看到以下对话框
因此，您的项目拥有 package.json 文件中定义的所有依赖项。
如果您点击了“是”，您肯定会在 Visual Studio 状态栏上看到以下消息
这告诉我们关于安装包的信息。令人惊奇的是，这个过程在后台进行，这意味着您可以同时处理您的任务。如果您点击了“否”，别担心，您仍然可以安装包，只需通过右键单击解决方案资源管理器中的项目名称打开命令提示符，然后键入“`npm install`”并按 Enter 即可。
文件夹结构
看一下文件夹结构
在上面您可以看到包含不同文件的各种文件夹。您可以看到 views、routes、public 等。本文中我们不打算详细讨论所有内容，我们将在即将推出的 Node.js 系列文章中进行讨论。
运行应用程序
运行应用程序，按 F5，您将看到
- 命令窗口
-
网页浏览器
-
分析 app.js
让我们看一下默认模板添加的代码行。
上述代码告诉 node.js 运行此应用程序所需的模块。
这将初始化我们的 `express.js` 函数。
这只会在开发环境中发生。
第一行将告诉主页/主页，第二行将给出我们资源的响应。
调试应用程序
在您的 app.js 文件中的某个位置设置一个断点。
运行应用程序，按 F5，查看何时命中断点。
很棒的是，您可以在 Visual Studio 断点窗口中看到断点
这是“调用堆栈”窗口，其中包含所有内容。
您可以在“局部变量”窗口中找到局部变量和函数。
这不是一个想象的工具吗 :)
还有更多的模板——我们不打算在这里讨论所有这些，我们将在即将推出的 Node.js 系列文章中讨论并使用这些模板创建一个单独的应用程序。在此之前，请享受这款适用于 Visual Studio 的新 Node.js 工具的魅力。
Node.js 交互式窗口
您会发现此窗口与 Visual Studio 命令窗口类似
转到“工具”->“Node.js 工具”->“交互式窗口”。或者按 Ctrl+K,N
在这个窗口中你可以玩转所有 Node.js 命令，这是我见过的最强大的窗口之一。如果你有任何困惑，只需输入 **.help**，你就会得到一个命令列表
让我们玩几个命令。
你还记得我们创建了一个控制台应用程序吗？
这里我们可以得到相似的输出。你注意到“undefined”了吗？那是什么？
在上面，我们只是定义了一个函数“letsTryThis”。这是一个简单的 Javascript 函数。你可以想想如何在同一个窗口中运行它，让我们尝试调用那个函数
哇，它奏效了。更棒的是，你可以通过按向上或向下箭头键来获取历史记录。所以，享受 Node.js 交互式窗口的强大功能吧。
诊断信息
您可以获取有关当前 node.js 应用程序的所有信息（请注意，信息取决于您当前的 node.js 应用程序）。转到“工具”->“Node.js 工具”->“诊断信息”。
讨论 Visual Studio 的 Node.js 工具的特性
让我们讨论 Visual Studio 的 Node.js 工具的一些强大功能
Visual Studio – 带有 Node.js 工具的 IDE 风格
安装此工具后，我们可以获得 Visual Studio IDE 的所有风格，我们可以看到
- 智能感知
- 自动完成
- 签名帮助
调试体验
有了这个强大的工具，我们可以像在 Visual Studio 上运行其他应用程序一样设置断点并调试应用程序。
TypeScript 支持
Visual Studio 的 Node.js 工具支持 TypeScript，您可以使用 TypeScript 编写您的代码。在上面，我们几乎尝试了所有功能，并提供了有效的示例。在接下来的课程中，我们将按照优秀的模式创建整个应用程序。
结论
最后，我们将获得 Visual Studio 的 Node.js 工具，它提供了 Visual Studio 的所有功能，用于开发 Node.js 应用程序。该工具具有许多强大的功能，并提供了出色的 Node.js 模板。
历史
首次发布日期：2015 年 4 月 10 日（使用 NJTVS RC1.0）