RaveJS入門 #RaveJS

RaveJSとは

JavaScriptのモジュールローダーです。

似たライブラリにRequireJSがありますが、RaveJSはNode.jsやBowerのパッケージ情報から依存関係を解決してくれます。

標準ではAMD、node.js、ES6のモジュールに対応しており、拡張により、CSS、テンプレート、JSON、JSX等を読み込むことも可能です。

Try

まずはbower.jsonを用意してください。
bower initを使うと楽。

例:

{
  name: 'myapp',
  version: '0.0.0',
  main: 'myapp.js'
}

次にRaveJSをダウンロード。

bower install rave.js --save

index.htmlはとりあえず↓な感じでRaveJSを読み込むだけ。

<!doctype html>
<html data-rave-meta="bower.json">
    <head>
        <meta charset="UTF-8"/>
        <title>my app</title>
        <script src="bower_components/rave/rave.js"></script>
    </head>
    <body>
    </body>
</html>

myapp.jsを用意して

alert("hello world");

ブラウザでindex.htmlを読み込めばok!

と思いきや、現状、require関数が一度は実行されないとエラーになってしまうようなので

jqueryをダウンロードして、とりあえず読み込んでおきましょう...

bower install jquery --save

require("jquery");
alert("hello world");

Note

require("jquery");

の戻り値はjQueryオブジェクトではありません。

理由はjQueryがAMD等に沿った記述になっていないからです。

jQueryオブジェクトが必要な場合はグローバル変数から取得する必要があります。

var jquery = (typeof global !== "undefined" && global !== null ? global.jQuery : void 0) || (typeof window !== "undefined" && window !== null ? window.jQuery : void 0);

ただし、別途jsを組むことで、require("jquery");の戻り値をjQueryオブジェクトにする方法はあります。

所感

RequireJSと違って、ライブラリのパス等(require.config)を書かなくていいのが非常に楽でした。

ただし、まだ問題も残っているようで、markdownのライブラリが読み込めないなんてことがありました。

が、それも今後解消されていくでしょう。