Yeomanを使用してbackbone,requirejsプロジェクトを生成する

背景
今はフロントエンドの開発をしていて、どんなフレームワークを使わなくても、自分がフロントエンドだと言うのが耻ずかしくて、何のReact、angular、backbone、jqueryだけで人に挨拶するのが耻ずかしいです.例えば、今は小さなプロジェクトをしたいと思って、フレームワークを選んで、ドキュメントの雲の中を見て、他の人の実践を見て、もっと迷って、彼が何をするのか全然分かりません.
技術は人のために奉仕して、フレームワークを使うためにフレームワークを使うことができなくて、半日勉強すればするほど分からないと感じて、いったい私がフレームワークを使うのか、それともフレームワークを使うのか.もし1つのツールがあれば、1つのキーで対応するフレームワークを生成するベストプラクティス、モジュール化などは1つの生成だけで、ソフトウェア開発のIDEのように、爽やかではないでしょうか.
外国人はとっくにこの問題を考えていたので,この道具はYeomanと呼ばれている.
の準備を

フレームワーク自体を忘れ、モジュール化に専念し、プロジェクト自体

node,gitのlunixまたはwindows

を装着
backbone+requirejsのプロジェクトを構築
最初のインストールyoeman

npm install -g yo

-gはglobalです.現在のディレクトリではなく、あなたのパソコンにインストールされ、システムの状態にyoコマンドが追加されました.
2つ目は、使用するプロジェクトテンプレートをインストールします.
ここではbackboneを例にhttps://github.com/yeoman/generator-backbone

npm install -g generator-backbone

ステップ3 backboneプロジェクトの作成
事前に準備したプロジェクトディレクトリに入力します.

yo backbone

generator-backboneがインストールされていない場合は、yoは対応するgenerator

がないことを示します.

yoのヒントはとても友好的で、多くの問題はshellの中の英語のテキストの中で助けを得ることができます

インストール中にいくつかのオプションを入力します.たとえば、
このgeneratorは、sassが書いたbootstrap、coffeescript、requirejs、modernizrを自動的に生成することができ、不思議なことに、多くの細部の関心を省いて、科学技術は生産に奉仕しています.
完了後:
**翻訳:選択のほか、html 5テンプレート、jquery、backboneも含まれています.js、bootstrap、coffeescript、requirejs modernizrが作成したファイルには、上図に示すようにyoemanが生成したプロジェクトの構造が含まれています.**

package.json-npm依存構成

bower.json-bower依存構成

gruntfile.js-gruntパッケージ構成

app/-プロジェクトルート

test/-テストファイル

完了すると、npm install&&bower installが自動的に走ります.
npmの多くはnodeが書いた開発導入クラスツールライブラリで、bowerを含め、bower自体はnpm installにインストールされています.bowerはフロントエンドプロジェクトで使用されるライブラリインストールツールで、jquery、backbone、bowerに入っているものはnodeとは関係ありません.
テストの開始
gruntは、プロジェクトでテストサーバを起動したり、sassを動的に処理したり、coffeescriptをcoffeescriptしたり、livereload(ブラウザに更新を反映したりする)を動的に処理したりするためのパッケージおよび導入ツールです.
yoemanのgruntは通常serveメソッドを提供します.grunt buildでパッケージ化することもできます.パッケージされたファイルはdistディレクトリの下に生成されます.
使用

grunt serve

図のようなテストサーバの起動
現在、空のプロジェクトファイルは次のとおりです.
index.htmlは入り口で、requireでmainを呼び出しました.js(coffeeに慣れていないのかjsを使っているのか、coffeeを採用すればmain.coffeeです)
main.js

/*global require*/
'use strict';

require.config({
  shim: {
    bootstrap: {
      deps: ['jquery'],
      exports: 'jquery'
    },
  },
  paths: {
    jquery: '../bower_components/jquery/dist/jquery',
    backbone: '../bower_components/backbone/backbone',
    underscore: '../bower_components/lodash/dist/lodash',
    bootstrap: '../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap'
  }
});

require([
  'backbone'
], function (Backbone) {
  Backbone.history.start();
});

現在のmain.jsは、簡単なrequire構成を行い、require呼び出しを行い、backboneをロードし、backboneを呼び出した.history.start().
血肉を増やす
今、このプロジェクトは骨格がすでにあると言ってもいいし、脳細胞を使う必要はありません.いいですね.次の仕事は少し脳細胞を使う必要があります.モジュールを追加したり、対応するコンポーネントを提供したりすることです.backboneでは:

model:データモジュール

view:ページコンポーネント

collection:モジュールグループ

route:ルーティングモジュール、ルーティング機能

を提供する
これらのモジュールとコンポーネントをyoemanで生成します.私が頭を使うと言ったのは、この時あなたのプロジェクトに基づいて、抽象的なことをして、どのモジュールが必要なのか、どの部分が必要なのかを考えなければならないからです.
生成方法はコマンドラインに入力することです

yo backbone:model foo

yo backbone:all fooを使用すると、modelからrouteまでのセットが生成されます.通常、backboneプロジェクトのmodelとcollectionはペアで現れ、viewは通常1つのmodelにも対応する.
いくつかのものを生成した後、私たちのプロジェクトは大体このようにします.
対応するモジュールは、すべて自動的にscriptに生成され、同時にviewsモジュールは自動的にペアリングのtemplatesファイルを生成し、デフォルトのシステムはejs htmlテンプレートエンジンを採用し、対応するviewsの下のjsは自分の*を呼び出す.ejs,具体的な実践はコードを見ればわかる.
自分で作るもの
各種のモジュールは抽象的になって、生成して、それからどのようにそれらをページの中に置いて、どのようにルートを行いますか?
実はこれも私が悩み始めた問題で、それからいくつかの研究を経て、このように呼び出したことに気づいた.
まず、backboneプロジェクトには通常、最上位レベルのappViewのview、ダイナミックなページボディがあります.(静的なページ本体はindex.htmlに書いてあります).hashに基づいてページを位置決めするルーティングもあります.だから、私たちはこの2つのものをmainに書くだけです.jsでいいので、残りはrequireで処理します.
コードは次のとおりです.

require([
  'backbone',
  'views/appView',
  'routes/foo'
], function (Backbone, appView, routes) {
  new routes();
  Backbone.history.start();
  new appView();
});

海外ではこのようなAMD依存前置法が流行しており、私たちが生成したappViewとroutesを直接入口呼び出しに入れ、これらはクラスメソッドを返し、直接newすればいいのです.
new backbone viewの場合、intializeメソッドが呼び出されます.
appView.js

/*global define*/

define([
  'jquery',
  'underscore',
  'backbone',
  'templates'
], function ($, _, Backbone, JST) {
  'use strict';

  var AppViewView = Backbone.View.extend({
    template: JST['app/scripts/templates/appView.ejs'],

    tagName: 'div',

    id: 'appView',
    el: '#appView',
    className: '',

    events: {},

    initialize: function () {
       //       ， template   $el 
      this.$el.html(this.template());
    }
  });

  return AppViewView;
});

もう一度ロuterを見てみましょう

/*global define*/

define([
  'jquery',
  'backbone',
  'views/appView'
], function ($, Backbone, app) {
  'use strict';

  var FooRouter = Backbone.Router.extend({
    routes: {
    //       #info    info  ，info   ，     appView render  ，   trigger       ，         trigger        。
        'info': 'info'
    },
    info: function () {
        app.render();
    }

  });

  return FooRouter;
});

小結
もちろん、現在のプロジェクトも粗末で、backboneのモジュール間の関連イベントの多くは、手動で完了する必要があります.しかし、前期のいくつかの重複作業については、yeomanで効率的に開発することができ、下位フレームワークの原理と実現には関心を持たず、業務抽象に重点を置くことができます.

yoemanはチケットの性質の項目にぴったりだと思います.

対応するフレームワークの実践応用を学びたいなら、yoemanのgeneratorがどのようにしているかを見てみましょう.

yoemanが自動的に生成したテンプレートを見ると、海外の新しい技術を学ぶのに役立ち、フレームワークを理解するのに役立ちます.