38

CoffeeScript をクライアントのブラウザに送信し、そこで JavaScriptにコンパイルする方法はありますか?

<script type="text/coffeescript">
    square = (x) -> x * x
    list = [1, 2, 3, 4, 5]        
    squares = (square num for num in list)
</script>

CoffeeScript コンパイラは JavaScript で記述されているため、それをクライアントに送信して、クライアントのブラウザでこのコードをコンパイル/実行できますか?

4

4 に答える 4

50

Jeremy はすでにこれを持っていますが、いくつかの重要な詳細と注意事項を追加させてください。

  1. gzip で圧縮された 39k (29k の jQuery と比較)coffee-script.jsは大きなファイルです。そのため、実際にユーザーに独自の CoffeeScript を実行させない限り、本番環境で使用するべきではありません。
  2. ドキュメントに記載されているように、各 CoffeeScript スニペットは独自の匿名クロージャーになります。したがって、例のスニペットは何もしません。<code> 四角形はスクリプトの外では見えません。代わりに、に変更する必要がありwindow.squares = ...ます。
  3. 外部またはインラインのすべての CoffeeScript コードは、ページ上のすべての JavaScript コードの後に​​実行されます。これは、JavaScript が既に実行されているドキュメントの準備が整うまで、 がタグcoffee-script.jsを読み取らないためです。<script type="text/coffeescript>
  4. リモート CoffeeScript は 経由XMLHTTPRequestで読み込まれます。つまり、サイトと同じドメインでホストされている必要があります。(特定のブラウザー (少なくとも Chrome) では、パスXMLHTTPRequestに対して sを実行すると問題が発生します。)file://
  5. 現在、異なるリモート CoffeeScript が実行される順序は保証されていません。これに対するパッチを提出しましたが、まだ公式には CoffeeScript の一部ではありません。このプルリクエストを参照してください。

そのため、CoffeeScript をコンパイル済み JavaScript として提供する代わりに、いくつかの代替案を検討することをお勧めします。Ruby または Python サーバー用に開発している場合は、利用可能なプラグインがあります。http://github.com/jashkenas/coffee-script/wiki/Web-framework-pluginsでそれらをすべてリストしようとしました。

バックエンドなしでサイトを開発している場合、私が強くお勧めするツールはMiddlemanです。これにより、開発中に CoffeeScript (および必要に応じて Haml と Sass) を操作し、それをコンパイルおよび縮小して本番環境にデプロイできます。 .

于 2011-03-02T20:40:59.913 に答える
23

おそらくあなたはこれを探していますか？

"text/coffeescript"スクリプト タグ

<script type="text/coffeescript">本格的な使用はお勧めしませんが、CoffeeScript はタグを使用してブラウザ内に直接含めることができます。ソースには、 docs/v2/browser-compiler-legacy/coffeescript.js. インライン CoffeeScript タグを含むページにこのファイルを含めると、それらが順番にコンパイルおよび評価されます。

CoffeeScript に関する通常の警告が適用されます — インライン スクリプトはクロージャ ラッパー内で実行されるため、グローバル変数または関数を公開する場合は、それらをwindowオブジェクトにアタッチします。

<script crossorigin src="https://coffeescript.org/v2/browser-compiler-legacy/coffeescript.js"></script>

<script type="text/coffeescript">
square = (x) -> x * x
list = [1, 2, 3, 4, 5]        
squares = (square num for num in list)

console.log squares
</script>

于 2011-03-02T16:48:13.193 に答える
8

答えはイエスです。@Trevorの優れた回答を繰り返すことはしませんが、あなたが考えていることの例を提供するだけです:

http://forgivingworm.wordpress.com/2010/09/27/running-coffeescript-in-browser/

基本的にあなた

  1. text/coffeescriptでコーヒースクリプトにタグを付けます
  2. ページ上のすべての coffeescript の後に coffee-script.js を含めます (コンパイラはすべての coffeescript を順番に評価してコンパイルします)。

以下のサンプル HTML

<html>
  <head>
    <title>In-Browser test</title>
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&#8221;> </script>
    <script type=”text/coffeescript”&gt;
      $ -> $(‘#header‘).css ‘background-color‘, ‘green‘
    </script>
    <script type=”text/javascript” src=”http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js&#8221;> </script>
  </head>
  <body>
    <h1 id=”header” style=”color:white”&gt;CoffeeScript is alive!</h1>
  </body>
</html>
于 2011-03-03T23:52:03.580 に答える