March 29, 2013

Flightをインストールしてみた

Macで確認しています。

以下、Node.jsがインストールされていて、npmコマンドが使える前提です。

まず、BOWER、Flight、RequireJSをインストールしてGitの初期化をしました。
$ sudo npm install -g bower
$ mkdir -p xxx/flight-sample # 適当な場所
$ cd xxx/flight-sample

# https://github.com/twitter/flight#installation の内容そのままで作成
$ vim component.json 

$ bower install
$ tree
.
├── component.json
└── components
    ├── es5-shim
    │   ├── CHANGES
    │   ├── CONTRIBUTORS.md
    │   ├── LICENSE
    │   ├── README.md
    │   ├── component.json
    │   ├── es5-sham.js
    │   ├── es5-sham.min.js
    │   ├── es5-shim.js
    │   ├── es5-shim.min.js
    │   ├── package.json
    │   └── tests
    │       ├── helpers
    │       │   ├── h-kill.js
    │       │   ├── h-matchers.js
    │       │   └── h.js
    │       ├── index.html
    │       ├── lib
    │       │   ├── jasmine-html.js
    │       │   ├── jasmine.css
    │       │   ├── jasmine.js
    │       │   ├── jasmine_favicon.png
    │       │   └── json2.js
    │       └── spec
    │           ├── s-array.js
    │           ├── s-date.js
    │           ├── s-function.js
    │           ├── s-object.js
    │           └── s-string.js
    ├── flight
    │   ├── CHANGELOG.md
    │   ├── CONTRIBUTING.md
    │   ├── LICENSE
    │   ├── Makefile
    │   ├── README.md
    │   ├── component.json
    │   ├── lib
    │   │   ├── advice.js
    │   │   ├── component.js
    │   │   ├── compose.js
    │   │   ├── index.js
    │   │   ├── logger.js
    │   │   ├── registry.js
    │   │   ├── standalone
    │   │   │   ├── amd-shim.min.js
    │   │   │   └── build.js
    │   │   └── utils.js
    │   ├── package.json
    │   ├── test
    │   │   ├── assets
    │   │   │   ├── es5-sham.js
    │   │   │   ├── es5-shim.js
    │   │   │   ├── jquery.js
    │   │   │   ├── loadrunner.js
    │   │   │   ├── loadrunner_plugins
    │   │   │   │   └── amd.js
    │   │   │   └── require.js
    │   │   ├── jasmine
    │   │   │   ├── jasmine-bootstrap.css
    │   │   │   ├── jasmine-bootstrap.js
    │   │   │   ├── jasmine.js
    │   │   │   └── lib
    │   │   │       └── bootstrap.css
    │   │   ├── phantom-jasmine
    │   │   │   ├── console-runner.js
    │   │   │   └── run_jasmine_test.coffee
    │   │   ├── run
    │   │   │   ├── jasmine_test.html
    │   │   │   └── unit_test_files.js
    │   │   ├── run_tests.js
    │   │   └── tests
    │   │       ├── advice_spec.js
    │   │       ├── constructor_spec.js
    │   │       ├── events_spec.js
    │   │       ├── fn_spec.js
    │   │       ├── instance_spec.js
    │   │       ├── mixin_spec.js
    │   │       ├── registry_spec.js
    │   │       ├── standalone_spec.js
    │   │       └── utils_spec.js
    │   └── tools
    │       └── debug
    │           └── debug.js
    └── jquery
        ├── component.json
        ├── composer.json
        ├── jquery.js
        └── jquery.min.js

$ mkdir components/requirejs
$ wget http://requirejs.org/docs/release/2.1.5/minified/require.js -O components/requirejs/require.js

$ git init .
Initialized empty Git repository in xxx/flight-sample/.git/
$ git add .
$ git commit -m "initial commit"
次に https://github.com/twitter/flight/tree/gh-pages/demo を参考にサンプルを作成しました。

-- requireMain.js --
* 上記のdemoそのまま。
requirejs.config({
    // baseUrl: ''
});

-- app/components/myComponent.js --
* 後述のindex.htmlでattachToされることにより、this.before、this.afterの順で処理が行われる。
'use strict';

define(
    [
        'components/flight/lib/component'
    ],

    function(defineComponent)  {

        return defineComponent(myComponent);

        function myComponent() {

            this.before('initialize', function() {
                this.$node.html('test');
                console.log('myComponent before.');
            });

            this.after('initialize', function() {
                console.log('myComponent after.');
            });

        }

    }
);

-- index.html --
* urlArgsは、RequireJSのキャッシング対策。試験環境以外では出力しないようにすべき。とのこと。
* #my_componentに前述のmyComponentをattachToしている。
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="my_component"></div>

<script src="components/jquery/jquery.js"></script>
<script src="components/es5-shim/es5-shim.js"></script>
<script src="components/es5-shim/es5-sham.js"></script>
<script data-main="requireMain.js" src="components/requirejs/require.js"></script>

<script>
// http://requirejs.org/docs/api.html#config-urlArgs
// http://stackoverflow.com/questions/8315088/prevent-requirejs-from-caching-required-scripts
requirejs.config({
    urlArgs: 'bust=' + (new Date()).getTime()
});
</script>

<script>
require(
    [
        'app/components/myComponent'
    ],

    function(myComponent) {
        myComponent.attachTo('#my_component');
    }
);
</script>
</body>
</html>

上記のGitのdiffを https://gist.github.com/mp-php/5263863 に置いておきました。

まだわからないことだらけですが、いろいろ探っていきたいなー。

No comments:

Post a Comment