CDN+RequireJS(plugin:cs,domReady)
RequireJS上で、CoffeeScriptを使いたいと思ったら出来たのでメモ。
結局なにが簡単なのかというと
load-coffee.js
require(["cs!cf1"],function(module){
module.hello();
});
上のようにHTML上に書くと、cf1.coffeeのスクリプトを動的に読み込んで、その結果を返してくれる。
type=script-coffeeタグもいらない。
ちなみに"cs!"は、プラグイン呼び出しの際の記述方法。
本家のCoffeeScriptロードプラグインを呼んでます。
以下は、CoffeeScriptモジュール。参考まで。
cf1.coffee
define(["jquery"] , -> return {hello : -> console.log("loaded-->" + $)} )
以下完全コード
coffee.html
<!DOCTYPE html><html><head><meta charset="UTF-8" />
<script data-main="/require_def" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
<script>
function require_use(){
require(["cs!cf1"],function(module){
module.hello();
});
}
</script>
</head><body><h1>CoffeeScript Module</h1></body></html>
require_def.js
(function(){
'use strict';
requirejs.config({
urlArgs : "nocache=" + new Date().getTime(),
shim: {
'cs' : ['coffee-script']
},baseUrl : '/'
,paths : {
'domReady' : 'https://raw.github.com/requirejs/domReady/latest/domReady'
,'jquery' : '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min'
,'cs' : 'https://raw.github.com/jrburke/require-cs/latest/cs'
,'coffee-script' : '//jashkenas.github.com/coffee-script/extras/coffee-script'
}
});
require(["domReady"],function(dr){
dr(require_use); //RequireJSのdomReady callback
});
})();