2016 年 10 月

第 31 卷,第 10 期

本文章是由機器翻譯。

程式設計師雜談 - 如何使用 MEAN: 探索 Yeoman

Ted Neward |2016 年 10 月

Ted Neward歡迎回來,MEANers。

我在上一個專欄中提過,就可以提取漫畫書移動並參與有點"追溯持續性 」 — 只要劇本需要變更它更有效地支援其未來的過去常見移動。在此案例中,您需要參與 ret con 是對使用的一些工具,您應該從一開始就已使用但未指定,因為我認為必要逐步之前有效地隱藏它們工具背後的某些部分,以逐步方式。

我聽說透過一些您的電子郵件,比方說,是平均的開發經驗多少不同於傳統的.NET 經驗。一個註解到目前為止發生並指出使用 Visual Studio,您可能需要大幅減少負擔組織遠離您的來源的所有專案範本。ASP.NET MVC,比方說,決定很久以前 directory 控制站會存在於,,以便在多達查核任何 ASP.NET MVC 開發人員知道任何 ASP.NET MVC 專案完全的所有項目存在的位置。

好的我開始 Yeoman,ECMAScript scaffolding 工具,會做為 Visual Studio 中的專案範本機能相同的目的在說明。(的人不曉得的 「 yeoman 」 一詞 etymology,一個這類的字典定義其定義為 「 服務工具皇家或崇高的家裡,士官長和清理或史與網頁之間排序。 」 基於這個理由,Yeoman 工具、 文件和網站通常會將本身視為 Cockney 英文個傳遞。)

取得您 Yeoman Yo

幾乎所有項目 JavaScript 整個宇宙裡面,像是 Yeoman 是透過 npm 安裝命令列工具。Yeoman 的文件位於 yeoman.io, ,但已明顯的第一個步驟將會是: 「 npm install-g yo。 」 一旦完成,這會將"yo"命令列工具上的路徑和簡單的方法來檢查它是否已安裝的是直接執行它。執行 「 yo-說明 」 開啟一般清單的選項,但執行"yo"本身實際上會更有趣︰ 這會顯示選項,Yeoman 可代替您執行互動式命令列] 功能表中所示 [圖 1

Yeoman 具有執行選項
[圖 1 Yeoman 具有執行選項

全新安裝時,Yeoman 將沒有任何已安裝的產生器 (相對於我的清單中 [圖 1 數個您尚未),但捲動向上和向下 (使用方向鍵) 也會顯示一些其他選項,例如 「 安裝 」 產生器中,如 「 尋找一些協助 」 或 「 取得我離開這裡 ! 」 Yeoman 是如果不是很明顯。

「 產生器 」 一詞是專門且適當詞彙;Visual Studio 中,像是 Yeoman 實際上並不知道如何產生本身的任何項目。相反地,它依賴 「 產生器,「 社群貢獻的封裝包含指令碼和範本,可以查閱使用者輸入所產生的細節。為了讓使用這些產生器的其中一個 Yeoman,不過,它必須安裝在本機系統上。此外,為了讓它,以安裝,您需要的幾乎 4000 產生器 (撰寫本文時) 提供您想要使用哪一個。

尋找產生器 Yo

雖然您當然可以讓 Yeoman 搜尋 npm 產生器 (一個在執行時,命令列所顯示的選項),是較容易讓搜尋引擎管理,或只是瀏覽 Yeoman 上產生器的站台 (yeoman.io/generators)。因此,比方說,如果您想要利用 Yeoman 建立出新的平均應用程式的結構,您需要找出並 Angular (現在為 v1) 和 MongoDB。其實,在撰寫本文時,到目前為止最受歡迎,一個 「 角度能 fullstack 」,是權限清單的頂端附近。不過,如果它不是,或如果沒有項目不同 (例如未回應的產生器或 Chrome 延伸模組,或甚至 ASP.NET 核心產生器),您可以使用 Yeoman 產生器] 頁面上,以進行搜尋。例如,您可能想要分割成兩個專案的程式碼,一個用於後端的 Web API,一個前端角度的用戶端。所建議的 Express plus MongoDB 專案 (有時稱為 MEN 專案),其中有幾個產生器使用,包括 「 express api 」 或 「 節點-express-mongo"),再加上另一個產生器可以建置角度的前端。

現在,您想要的產生器是 「 角度 fullstack 」 產生器,因為它會產生兩個用戶端和伺服器端樣板。因此,一旦您已經識別您想要的產生器,您需要使用 npm 工具來安裝它。(yeoman 不會使用 yo 管理產生器安裝; 它依賴 npm 來控制代碼)。 因此下, 一步是為 [npm install-g 產生器-角度-fullstack]。 請注意 「 產生器-」 前置詞。這是針對所有 Yeoman 慣例產生器套件。

安裝之後,Yeoman 可以使用它只會參考它 (不含 「 產生器-」 前置詞) 做為參數"yo"命令:"yo 角度 fullstack。 」 此時,Yeoman 將傳遞控制項產生器本身,旁邊會有什麼狀況,並在角度 fullstack 產生器的情況下,它就會開始詢問有關何種您想要建立結構時的應用程式的問題︰

  • 是否要使用 Babel 或 TypeScript
  • 是否要使用標記的 HTML 或 Jade (熱門 JavaScript HTML 樣板化程式庫)
  • 使用 (原始 CSS、 Sass、 手寫筆或更少) 的 CSS 工具
  • 若要使用 (ngRoute 或 uiRouter) 的角度路由器
  • 是否要包含啟動程序
  • 是否要包含 UI 啟動安裝程式 (副檔名 Angular 來啟動程序的功能)
  • 是否要使用 Mongoose (這您曾看過) 或 Sequelize (RDBMSes 的模組化) 應用程式中的模型
  • 是否要建立結構的 Passport 驗證程式碼中,如果是,(選擇從 Google、 Twitter 或 Facebook) 的服務
  • 是否要使用 Grunt 或 Gulp (這我會檢查下一次) 為專案建置工具
  • 最後,要使用 (Jasmine 或多個程式庫在一起的集合) 的測試工具

問與答動作完成之後,Yeoman 將會產生一大堆檔案 (最其中都會歸類到其中一個產生 「 用戶端 」 或 「 伺服器 」 目錄建立)。然後,它會執行"npm install"往伺服器的所有相依性,並執行 「 bower 安裝 」 (這可能需要安裝 bower"npm 安裝 – g bower 」) 執行相同的用戶端。請注意,視產生器 (和各種程式庫所產生的程式碼參考) 的正確版本而異的各種的相依性,會提取這些步驟,因為它可以 (同樣地,甚至),這些步驟將會產生警告。

完成後,不過,您就必須完全 fleshed 出建構應用程式。它不會做什麼事,但如果您啟動與 「 gulp 服務 」 做為產生的讀我檔案表示 (這將需要經過 Gulp 安裝 — npm – g gulp cli 的 「 安裝 」 — 如果尚不存在),以及如果 MongoDB 您本機電腦上執行,系統就會顯示 ASP.NET MVC 專案範本的產生,如下所示的頁面中所示 [圖 2

建構的應用程式的前端
[圖 2 建構的應用程式的前端

請注意它有完整的使用者管理支援,包括能夠驗證使用 Google、 Facebook 或 Twitter (雖然從的各個服務取得適當的認證權杖或金鑰,並在伺服器程式碼中的設定目錄,將需要使用這兩種),或使用電子郵件/密碼。

加入喇叭 Yo

因為應用程式您建立 (種) 已喇叭分級系統,您必須在此新程式碼基底模型的第一件事情是演講者備忘。雖然您可以開始一頭栽進所產生的檔案,以找出模型所宣告的地方,依此類推,很容易讓 Yeoman 幫助:"yo 角度-fullstack:endpoint 演講者備忘。 」 它會詢問您要使用的 API 端點的 URL,並接著執行其動作。這相當於執行 ASP.NET MVC 的右邊-click/新增控制器動作,使用 Yeoman 命令列,而且會發出某些 「 emptyish 」 的檔案伺服器/api/演講者進行修改。

其實,角度 fullstack Yeoman 產生器可以執行這項操作的用戶端和伺服器端應用程式的不同項目數目。您可以看到 「 子產生器 」 的完整清單,所以要求的產生器本身清單透過"yo 角度 fullstack-說明 」。

版面配置,Yo

因為其實我從未使用過的項目用戶端,我就把這現在是。但是我已經在伺服器端是探索段時間,讓沒有做其他努力,我們來看該使用。

首先,所有伺服端程式碼 — 不用多說,包含在 「 伺服器 」 目錄。此目錄包含主要應用程式檔案、 app.js、 routes.js 包含伺服器端程式碼的其餘部分的數個子目錄中的 Express 路由清單。這包括 [api] (模型和控制站相關的程式碼所在的位置),(這是驗證程式碼所在的位置) 的 「 驗證 」、 「 元件 」 (其中將包含非 API 相關的元件)、"config"(設定) 和 「 檢視 」 (其中只包含 404.html 檔案,在您要求的 Url)。

驗證目錄幾乎是依現狀很少會,如果曾,需要周圍穿梭在這裡。正如其名,組態包含使用中大部分的應用程式的其餘部分一樣,我在我的上一篇專欄建立 「 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);

(請注意使用 「 匯出 」,這是一個新的 ECMAScript 2015 功能,在 2015 年 9 月專欄中所述 msdn.com/magazine/mt422588。) 不過,既然您已經變更模型的演講者,您需要更新測試 (在 speaker.integration.js),否則執行測試時,測試將會失敗。我就留給您做練習中,這種瀏覽程式碼;若要避免用戶端測試執行測試,以 「 gulp 測試︰ 伺服器 」。當然,您可以隨時瀏覽 API 使用 curl (「 curl localhost:3000/api/喇叭 」 這將為空白,除非您插入幾個透過張貼到該端點,或直接將 MongoDB。請注意這些產生器正在進行持續開發,因此產生器的未來版本將會設定為不同的預設連接埠或 URL)。

總結

這並未特別的程式碼為主的資料行,但您只是重新啟動整個應用程式,取得整個無數的功能,並且基本上是從什麼您擁有一直在建立過去一年左右回到應用程式相同的層級 (和之外)。你喜歡樣板 ! 更重要的是,擁有之前先執行樣板,以手動方式建立所有組件由一點一點很容易了解程式碼,以及整個來龍去脈位置。例如,開啟 routes.js 看起來很熟悉您建置以手動方式更早版本,路由表,package.json 檔案中 (在專案目錄的根目錄) 會變大,但基本上仍會相同,您已使用。

只有新的東西,事實上,超過 Yeoman 本身使用,是引進的 「 建置工具 」 收集到正確的位置,所有關聯的部分,並要我探討下一次。在那之前,不過...祝各位寫程式 !


Ted Neward 是西雅圖 polytechnology 顧問、 講師及指導。 他已寫入 100 個以上的文章,是 F # MVP 和具有作者及合著者著作。與他連絡 ted@tedneward.com 如果您想要讓他來自與您的小組,或是閱讀他的部落格 blogs.tedneward.com

由於閱本篇文章的下列技術專家︰ Shawn Wildermuth