Yeoman.ioのジェネレーターを作成する

こんにちは、habrasociety！ この記事では、足場システムYeomanのジェネレーターを作成した経験について説明します。 まず、このシステムとそのシステムがハブで説明されていないことに少し驚いていました。ただし、遠く離れた2012年の1つの小さな言及： Yeoman.ioを除きます。 上記で書いたように、この記事では、プロジェクト用のYeomanジェネレーターの段階的な作成を検討します。

yeomanジェネレーター（以下、単にジェネレーターと呼びます）は、yeomanがアプリケーションフレームワークを構築するディレクティブの助けを借りたnpmパッケージです。 この記事では、プロジェクトで使用するアーキテクチャー（マリオネット、コーヒー、sass +コンパス、require）の足場となるジェネレーターの作成例を検討します。

初期データ

nodejs 、 npm 、 yeomanおよびnpm-package generator-generatorがインストールされたマシンが必要です。
次に、ジェネレーターを配置するディレクトリを作成する必要があります（私はgenerator-puppeteerという名前を付けました）。 フォルダーがgenerator- prefixで始まることは非常に重要です。 それ以外の場合、作業の開始時に、yeomanは原則ジェネレーター-<ジェネレーター名>でモデル化されたフォルダーを作成します。

ステップ1-ジェネレーターの足場

#      $ mkdir generator-puppeteer && cd $_ #     $ yo generator 

githubのユーザー名とジェネレーターの名前に関する2つの質問の後、yeomanは将来のジェネレーターのスケルトンをデプロイします。
yeomanが生成したものを見てみましょう。

ディレクトリ：

app-プロジェクトコンテンツに関連するすべてのファイルが配置されるディレクトリ。たとえば、bower.json、package.json、すべてのページのテンプレートなど。
node_modules- チョークやmochaなど、package.jsonで指定されたジェネレーター依存関係を持つディレクトリ。
テスト -ここでは、ジェネレーターのすべてのテストがあります。

ファイル：

.editorconfig-テキストエディターの構成
.gitattributes -gitの特定のディレクトリまたはファイル設定
.gitignore -gitがインデックスを作成しないファイルとディレクトリのリスト
.jshintrc -jshint config
package.json-ジェネレーター依存関係ファイル
README.md -githubのプロジェクト記述ファイル
.travis.yml -CIのプラットフォームを示します

したがって、ジェネレーターのスケルトンがデプロイされます。

ステップ2-実行ファイルの編集

個人的に、なじみのないアーキテクチャを見ると、論理的な疑問が生じます。プロジェクトへのエントリポイントはどこですか。 私たちの場合、これはappディレクトリにあるindex.jsファイルです。 次のように機能します。まず、package.jsonファイルにアクセスし、初期化完了イベントにサブスクライブします。 --skip-installフラグが渡されなかった場合、初期化後にpackage.jsonおよびbower.jsonで指定された依存関係がインストールされます。 複雑なことはありませんか？ 足場の標準UIをカスタマイズしてみましょう。 これを行うには、askForメソッドを変更する必要があります。初期化後に最初に呼び出され、ユーザーから必要な情報をポーリングする責任があります（また、かなり素敵なASCIIアートを描画します）。 このメソッドはInquirerライブラリの実装を使用します。これにより、質問を作成し、ユーザーから情報を受け取ることができます。 ユーザーの興味を引くもの、たとえばアプリケーションの名前を見つけてみましょう。

ソースコード：

 var prompts = [{ type: 'confirm', name: 'someOption', message: 'Would you like to enable this option?', default: true }]; this.prompt(prompts, function (props) { this.someOption = props.someOption; done(); }.bind(this)); 

編集されたコード：

 var prompts = [{ type: 'prompt', name: 'appName', message: 'Could you tell me the name of your new project?', }]; this.prompt(prompts, function (answers) { this.appName = answers.appName; done(); }.bind(this)); 

リポジトリのサンプルページで詳細を確認できます 。 ここでこのライブラリを使用すると、プロジェクトに含める可能性のある追加のテクノロジを選択する機会をユーザーに与える場合に最も役立ちます。たとえば、プロジェクトにブートストラップを使用する機能を含めるかどうかをユーザーに確認できます。 お気づきのように、すべての変数はジェネレーターインスタンスのプロパティとして書き込まれます-後で、テンプレート内で使用します。

ステップ3-アプリケーション構造の足場となるディレクティブの作成

次に、ジェネレーターの中心であるアプリ関数を見てみましょう。 ここで、アプリケーションのフレームワークを組み立てます。 この関数の本体で何が起こるか：

 app: function () { this.mkdir('app'); this.mkdir('app/templates'); this.copy('_package.json', 'package.json'); this.copy('_bower.json', 'bower.json'); } 

ご覧のとおり、デフォルトではすべてが新鮮です。2つのディレクトリを作成し、2つのテンプレートをプロジェクトディレクトリにコピーするだけです。 コピー機能は、sourceRootからのソースファイルとtargetRootに作成されるファイルの名前の2つのパラメーターのみを取ります。 index.htmlファイルを作成するコードを書きましょう。 しかし、おそらく、インストール前に選択できるオプションに応じて、インデックスの内容を変更したいでしょう。 たとえば、タグにプロジェクトの名前を設定したい-this.copyはここでは不十分です。this.templateはここで役立ちます。 これらの関数についてさらに詳しく見ていきましょう。 両方の機能はアクション/アクションの不純物の一部であり、テンプレートディレクトリからアプリケーションディレクトリにファイルを移動するために実行されますが、1つの例外があります。 テンプレート機能はテンプレートを使用できます。 その助けを借りて、sourceRootからファイルをコピーし、そのファイルにデータを貼り付けて、targetRootに送信できます。 上記の例を使用して、これを実行してみましょう。 プロジェクトディレクトリ（デフォルトのアプリ/テンプレート）のsourceRootに_index.htmlファイルを作成します。 例として、この要点を使用できます。 次のように小さなアプリ関数を追加してみましょう。

 app: function () { this.mkdir('app'); this.mkdir('app/templates'); this.template('_index.html', 'index.html'); this.copy('_package.json', 'package.json'); this.copy('_bower.json', 'bower.json'); } 

では、テンプレートのデータはどこで取得しますか？ デフォルトでは、データが3番目の属性によって明示的に渡されない場合、テンプレートエンジンはジェネレーターのスコープをデータのハッシュとして使用します。 this.appNameのプロンプトを介して入力されたappNameを保存すると、すべてのテンプレートで自動的に利用可能になりました（データハッシュが直接指定されていない場合）。 これで、ファイルをパラメーター化できるようになりました。 次のステップは、アーキテクチャ設計です。 私は自分のプロジェクトのアーキテクチャ用のジェネレータを書いているので、この記事ではそのアーキテクチャに依存します。つまり：

app-アプリケーションルート
アプリ/テンプレート -テンプレート
アプリ/コア -基本クラス
アプリ/共通 -さまざまな不純物など
アプリ/静的 -静的（画像、フォント）
アプリ/コンポーネント -コンポーネント
アプリ/モジュール -モジュール
アプリ/スタイルシート -スタイル
app / libs-サードパーティライブラリ

これでアーキテクチャコンポーネントが完成し、デフォルトで使用するライブラリを設定するだけになります。 しかし、問題は、アプリケーションのアーキテクチャソリューションに関する見解を共有するさまざまな人々が使用するジェネレーターを作成することですが、それらはすべて同じツールチェーンを使用するのでしょうか？ ほとんどない。 もちろん、まともな開発者として、私たちはそのような瞬間を予見し、ジェネレーターが「箱から出して」サポートすることを計画している技術の少なくとも最小限の選択を追加する必要があります。 私の場合、RequireJS、CoffeeScript、SASS + Compassであり、ジェネレーターを使用するたびに、プロジェクトに追加するテクノロジーを尋ねられます。 Gruntfileを追加することを忘れないでください！ これらの追加を考慮すると、appメソッドのコードは次のようになります。

 app: function () { // Core application folder this.mkdir('app'); // Templates application folder this.mkdir('app/templates'); // Folder for base classes this.mkdir('app/core'); // Common project files this.mkdir('app/common'); // Static content, like images or fonts this.mkdir('app/static'); // Logic components for the project this.mkdir('app/components'); // Modules of the project this.mkdir('app/modules'); // Stylesheets directory this.mkdir('app/stylesheets'); // 3-rd party members libs this.mkdir('app/libs'); this.template('Gruntfile.js', 'Gruntfile.js'); this.template('_index.html', 'index.html'); // RequireJS config & App this.copy('js/app.js', 'app/app.js'); this.copy('js/main.js', 'app/main.js'); this.copy('_package.json', 'package.json'); this.copy('_bower.json', 'bower.json'); this.copy('_.bowerrc', '.bowerrc'); } 

最後に.bowerrcファイルを追加し、依存関係をapp / libsディレクトリに保存することを示していることに注意してください。

ステップ4-サブジェネレーターの作成

したがって、それほど深くはありませんが、プロジェクト構造とindex.htmlの単純なジェネレーターを作成することができました。これはプロジェクトのエントリポイントになります。 いいようですね。 しかし、ヨーマンはもっと多くのことができます！ もう少し絞ってみましょう！
すでに記述した内容に基づいて、yeomanは初期段階でアーキテクチャを展開するためにのみ使用されますが、アプリケーションのコンポーネントのテンプレートを作成するために使用します。 上で書いたように、私たちのプロジェクト（少なくともプロジェクトのアーキテクチャ）では、app / componentsフォルダーを追加しました。このフォルダーに抽象的なコンポーネントを追加します。 もう少し詳しく：コンポーネントとは、MVCのようなコードの特定の組織を意味します。これにより、論理エンティティの操作が容易になります。 したがって、たとえば、コメントのあるブロックはアプリケーションの複数のページに配置する必要があります。 モジュールからコードをコピー＆ペーストせず、常に一貫した状態に保つために、CommentComponentを作成します。これは、APIを介して異なるモジュールから呼び出します。たとえば、

 var _this = this; var commentComponent = new CommentComponent; commentComponent.getUserComments({user_id: 1}).done(function(commentsView) { _this.layout.comments.show(commentsView); }); 

したがって、このようなコンポーネントを可能な限り迅速に作成できれば害はありません（結局のところ、誰もファイルやフォルダーを作成するのが好きではありませんか？）。 コンポーネントが便利なチームによって作成された場合、どのように言いますか

 #   CommentsComponent $ yo puppeteer:component 'Comments' 

それでは、このチームができることを決めましょうか？ たとえば、app / components / commentsフォルダにMVCアーキテクチャを作成し、必要な最小限のファイルセットを生成します。

モデル/ comment.js
コレクション/ comments.js
ビュー/ comments.js
ビュー/ comment.js
controller.js

何をする必要があるのか​​見てみましょう。 まず、サブジェネレーターフレームを作成しましょう。 これを行うには、ジェネレーターのルートフォルダーから次のコマンドを実行します。

 #  - "component" $ yo generator:subgenerator 'component' 

だから、彼が私たちのために生成したものを見てみましょう：

アプリ/コンポーネント
アプリ/コンポーネント/index.js
アプリ/コンポーネント/テンプレート/ somefile.js

コアでは、サブジェネレーターは同じ通常のジェネレーターであり、同じAPIを持ち、その兄とほぼ同じ構造を持っています。 したがって、index.jsを開いたときに何が表示されますか：コンポーネントはNamedBaseを継承し、2つの定義済みメソッド：initとfilesを持っています。 ご想像のとおり、initでは呼び出し元のサブジェネレーターのgreetings-msgを取得し、filesメソッドではジェネレーターのすべてのロジックを直接記述します。 私はこれに焦点を合わせません ここには新しいものは何もありません。 私のサンプルindex.js を要点で見ることができます。

次に、ファイル自体のテンプレートを作成します。 また、新しいことは何もありません。これは既に上記で行っています。 いつものように、 ここで私のバージョンを見つけることができます。

ステップ5-ジェネレーターの起動

ジェネレーターを起動するには、まずnpmパッケージへのリンクを作成する必要があります。 これを行うには、ジェネレーターフォルダーから次のコマンドを実行する必要があります。

 $ npm link 

リンクが作成されたので、テストディレクトリを作成して、取得した内容を確認できます。

 $ mkdir TestProject && cd $_ && yo puppeteer