0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

RaveJS入門

Last updated at Posted at 2014-12-10

RaveJSとは

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

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

Note: JavaScriptのモジュール化 AMDとrequire.js

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のライブラリが読み込めないなんてことがありました。
が、それも今後解消されていくでしょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?