• 项目

2016 年 10 月

第 31 卷，第 10 期

此文章由机器翻译。

孜孜不倦的程序员 - 如何成为 MEAN： 了解 Yeoman

通过 Ted Neward | 2016 年 10 月

Ted Neward欢迎回来，MEANers。

在以前的专栏中已经提到，就可以提取漫画连载移动，从事一些"撤消连续性"— 只要该情景需要进行以下更改以更好地支持其未来其过去常见移动。在此特定情况下，您需要加入 ret con 是使使用一些工具，您应从开始时，已使用，但没有这样做，因为我认为有必要之前有效地将它们隐藏真相工具指导完成一些分步的方式中的部分。

一件事我听说通过一些电子邮件，例如，是多少，平均开发体验不同于传统的.NET 经验。一个识破了到目前为止并指出，使用 Visual Studio，您可以很大程度上组织源背对您的负担的所有项目模板。ASP.NET MVC 中，例如，决定在很久以前 directory 控制器将 live 中，以便最多遍历任何 ASP.NET MVC 开发人员知道任何 ASP.NET MVC 项目完全的所有内容所在的位置。

说起，我开始介绍 Yeoman，ECMAScript 基架工具，它在 Visual Studio 中的项目模板功能的作用相同。（对于那些不了解的术语"yeoman"etymology，这种字典定义其定义为"伺服器皇家或 noble 家庭，排名之间警察和整理或 squire，另一个页面。" 出于此原因，Yeoman 工具、 文档和站点倾向于将自身作为 Cockney 英语 bloke 传递。)

获取您 Yeoman Yo

类似的几乎所有内容 JavaScript 世界中，Yeoman 是您可以通过 npm 安装命令行工具。Yeoman 的文档位于 yeoman.io, ，但是它已明显的第一步将是:"npm install-g yo。" 完成后，这会将"yo"命令行上的工具的路径，以及检查是否安装了一个简单的办法是只需运行它。运行"yo-help"引出了常用选项列表中，但实际上会更有趣运行"yo"本身︰ 此时将显示 Yeoman 可以代表您执行的选项的交互式命令行菜单中所示 图 1。

Yeoman 带执行选项
图 1 Yeoman 带执行选项

全新安装时，Yeoman 将没有任何已安装的生成器 (与我的列表中相反 图 1 的几个已经存在)，但滚动向上和向下 （使用箭头键） 还将显示一些其他选项，如"安装"生成器中，如"找到一些帮助"或"跳出循环 ！" Yeoman 没什么如果不明显。

术语"generator"是一个比较简练和相应的术语;Visual Studio 中，如 Yeoman 实际上并不知道如何生成自身的任何内容。相反，它依赖于"生成器"，社区提供的包组成的脚本和可以询问有关具体细节要生成项目的用户的模板。为了使 Yeoman 若要使用这些生成器之一，但是，它必须安装在本地系统上。此外，为了使安装它，您需要找出其中的几乎 4000 生成器 （撰写本文时） 提供想要使用。

查找生成器 Yo

尽管肯定可以让 Yeoman 搜索 npm 对于生成器 （命令行运行时，它提供的选项之一），它是通常更易于让搜索引擎管理站点，或只需浏览为上 Yeoman 生成器 (yeoman.io/generators)。因此，例如，如果您想要充分利用 Yeoman 出新的平均应用程序基架生成，您需要找到一个未 Angular (现在 v1) 和 mongodb 的更多信息。事实证明，撰写本文时，到目前为止最受欢迎的一个"angular-fullstack，"是列表顶部附近的权限。但是，如果没有，或者如果没有某些其他所需的 （如未做出响应，一个生成器或扩展名为 Chrome，或甚至是一个 ASP.NET 核心生成器），您可以使用 Yeoman 生成器页上，若要对其进行搜索。例如，您可能想要拆分代码分离到两个项目、 后端 Web API 和前端的角度客户端。这间接您希望 （有时称为男性项目），其中有几个生成器可用，包括一个 Express 加上 MongoDB 项目，"速成版 api"或"节点-速成版的 mongo"），以及另一个生成器，可以生成一个角度的前端。

目前，所需的生成器是"angular fullstack"生成器中，因为它将生成两个客户端和服务器端基架。因此，一旦您确定所需的生成器，您需要使用 npm 工具进行安装。（yeoman 不会使用 yo 来管理生成器安装; 它依赖于 npm 进行相应处理。） 因此下, 一步是"npm install-g 生成器的角度-fullstack。" 请注意"生成器-"前缀;这是为所有 Yeoman 约定生成器包。

在安装之后，Yeoman 可以通过使用它只以参数形式向引用它 （不带"生成器-"前缀）"yo"命令:"yo angular fullstack。" 此时，Yeoman 将通过控件的旁边生成器自己进行的会发生什么情况，并在 angular fullstack 生成器的情况下它将开始进行提问何种应用程序想要使用基架生成出︰

  • 是否使用 Babel 或 TypeScript
  • 是否要用于标记的 HTML 或 Jade （的常用 JavaScript HTML 模板库）
  • 若要使用 (原始 CSS、 Sass、 触笔或小于) 的 CSS 工具
  • 若要使用 （ngRoute 或 uiRouter） 的角度路由器
  • 是否要包括 Bootstrap
  • 是否要包括 UI Bootstrap （引导功能到 Angular 扩展）
  • 是否对应用程序中的模型使用 Mongoose （它以前看到过） 或 Sequelize （建模为 Rdbms）
  • 是否要使用基架生成掉 Passport 的身份验证代码，如果是，哪种服务 （选择从 Google、 Twitter 或 Facebook） 的
  • 为项目生成工具使用 Grunt 还是 Gulp （其中我将介绍下一次）
  • 最后，哪些测试工具来使用 （Jasmine 或组合在一起的多个库的集合）

完成操作后问与答，Yeoman 将生成大量的文件 （最其中将属于任一的生成"客户端"或"服务器"目录创建）。系统将运行"npm 安装"以展开下拉列表的服务器的所有依赖关系并运行"bower 安装"（这可能需要安装 bower"npm 安装 – g bower"） 来执行同样的客户端。请注意，因为这些步骤拉入的各种依赖关系而异的确切版本生成器 （和各种库生成的代码所引用的），所以有可能 （可能甚至） 这些步骤将生成警告。

完成后，不过，都必须完全 fleshed 出基架生成的应用程序。它不会多谈，但如果您开始使用"gulp serve"作为表示生成的自述文件 (这将需要具有 Gulp 安装 —"npm 安装 – g gulp cli"— 如果它尚不存在)，并且如果在您的本地机器上运行 MongoDB，它将类似于 ASP.NET MVC 项目模板生成一个页中所示 图 2。

基架生成的应用程序前端
图 2 基架生成的应用程序前端

请注意它提供了完整的用户管理支持，包括能够使用 Google、 Facebook、 进行身份验证或 Twitter （尽管使用其中的每个需要从每个这些服务中获取相应的凭据令牌或密钥并指定它们在服务器代码中的配置目录中） 或使用电子邮件/密码。

添加扬声器 Yo

因为应用程序您构建了一种 （某种程度上） 已是演讲者等级评定系统，您将需要此新的基本代码进行建模的首要任务之一是，某个演讲者。无法开始深入了解生成的文件以了解模型声明，依此类推，而是让 Yeoman 帮助解决此问题变得容易得多:"yo angular-fullstack:endpoint 中发表演讲。" 它会询问您要使用的 API 终结点 URL，并接着执行其操作。这是命令行等效于使用 Yeoman 执行 ASP.NET MVC 的右侧-单击/添加的控制器操作，并将在服务器/api/扬声器让你能够修改中生成一些"emptyish"的文件。

事实证明，angular fullstack Yeoman 生成器可以这样做的大量客户端和服务器端应用程序的不同元素。您可以看到"子生成器"的完整列表，通过询问的生成器本身列表通过"yo angular fullstack--帮助"。

布局，Yo

因为我还没有真正探讨了内容的客户端，我要将此是现在。但是在服务器端是一个我已经探讨一些时间，而无需进一步 ado 中，转到，即。

首先，所有服务器代码 — 无需诧异 — 包含"server"目录中。此目录包含主应用程序文件、 app.js、 routes.js 和包含服务器端代码的其余部分的多个子目录中的 Express 路由的列表。这包括"api"（模型和控制器相关代码所在的位置），"auth"（这是身份验证代码所在的位置）、"组件"（它将包含 API 相关的组件）、"config"（配置） 和"视图"（其中只包含一个 404.的 html 文件，当请求的未知的 Url）。

完成得差不得了 auth 目录，因为是;有很少是，如果曾有过需要在这里漂移周围。正如其名，配置将包含在很大程度的应用程序的其余部分使用我在我以前的专栏中建立"config.js"文件的方法相同的配置值。大多数开发人员操作会 api 子目录中。

在 api 中，您可以找到三个子目录︰ 一个你刚刚创建 （"发言人"），另一个专门用于建模用户注册 （""），会自动为您生成由生成器 ("thing") 为模板或示例，请按照的另一个。在这些 API 子目录中，您会发现一种模式 —"双 extension"文件的集合︰ thing.controller.js、 thing.events.js、 thing.model.js 等。此外将有一个 index.js 文件，它可作为一种"单一入口点"的整个子目录 (它汇集了每个其他文件组合在一起以便于参考该目录的其余部分) 和一个 index.spec.js 文件，它专门用于测试在此目录中找到的代码。

因此，例如，如果您想要表示扬声器没有名字、 姓氏、 和的言论他们喜欢的主题列表，您可以打开 speaker.model.js 文件中，并使用标准 Mongoose 功能该领域建模 (以前的专栏中讨论此; 请参阅 msdn.com/magazine/mt683801)，如下所示 图 3。

图 3 中发表演讲 Mongoose 架构

'use strict';
import mongoose from 'mongoose';
var SpeakerSchema = new mongoose.Schema({
  firstName: {
    type: String,
    required: true
  },
  lastName: {
    type: String,
    required: true
  },
  topics: [String],
  active: Boolean,
  created: {
    type: Date,
    default: Date.now
  },
  updated: Date
});
SpeakerSchema
  .pre('save', function(next) {
    this.updated = new Date();
    next();
  });
export default mongoose.model('Speaker', SpeakerSchema);

(请注意，使用"导出"; 在我 2015 年 9 月的专栏中所述，这是一种新 ECMAScript 2015 功能 msdn.com/magazine/mt422588。) 但是，既然您已经更改了演讲者的模型，您需要更新测试 （在 speaker.integration.js)，否则测试将失败，在运行时。我要将此当作练习为您作为一种浏览代码;使用运行测试"gulp 测试︰ 服务器"以避免客户端的测试。当然，您始终可以通过使用 curl （"curl 访问 localhost: 3000/api/扬声器，"这将为空，除非插入通过发布到该终结点或直接在 MongoDB 少数浏览 API。请注意，生成器进行持续开发，因此生成器的未来版本将设置不同的默认端口或 URL）。

总结

这还没有特别大量代码的列中，但只需重新启动整个应用程序，获得整个大量的功能，并实质上是从什么您必须已构建为过去一年左右恢复到同一级别 （和超出） 的应用程序。我要走喜欢基架 ！ 更重要的是，构建所有部件--逐一手动运行基架之前, 是更易于理解的代码作为一个整体和发生了什么情况其中。例如，打开 routes.js 看起来比较眼熟到路由表中您手动创建更早版本，而 package.json 文件 （在项目目录的根） 将更多，但它基本上会保持相同，因为您一直都在使用。

只有一项新的事情，实际上，超出 Yeoman 自身使用，是引入的"生成工具"为所有相关的部分收集到一起适当的位置，而且将是我所讨论下一次。到那时，但是 … 祝您编码愉快 ！

Ted Neward 是基于西雅图的 polytechnology 顾问、 发言人和导师。 他曾写过 100 多篇文章，是 F # MVP 和具有创作，并且与人合著过十几本书。如果您有兴趣请他参与您的团队工作，请通过 ted@tedneward.com 与他联系，或通过 blogs.tedneward.com 访问其博客。

衷心感谢以下技术专家对本文的审阅： Shawn Wildermuth