web-dev-qa-db-ja.com

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

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で記述されているので、クライアントのブラウザでこのコードをコンパイル/実行するためにクライアントに送信できますか？

javascriptcoffeescript
37
Phat Albert

ジェレミーはすでにこれを持っていますが、いくつかの重要な詳細と警告を追加しましょう：

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

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

バックエンドなしでサイトを開発している場合、私が強くお勧めするツールは Middleman です。これにより、開発中にCoffeeScript（および必要に応じてHamlとSass）を操作できます。実稼働展開用にコンパイルおよび縮小します。

48
Trevor Burnham

答えはイエスです。 @Trevorの優れた答えを繰り返すのではなく、あなたが考えていることの例を示します。

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

基本的にあなた

  1. コーヒースクリプトにテキスト/コーヒースクリプトのタグを付けます
  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”>
      $ -> $(‘#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”>CoffeeScript is alive!</h1>
  </body>
</html>
8
PandaWood
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>CoffeScript on browser</title>
  </head>
  <body>
    <script type="text/coffeescript">
      alert 'It works!'
    </script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
  </body>
</html>
  • CoffeeScriptは、実行するスクリプトの後にロードする必要があります。
  • srcを使用する場合は、XMLHTTPRequestを介してファイルにアクセスできる必要があります。特に、file://のブラウザでは失敗します。
2
Ciro Santilli 冠状病毒审查六四事件法轮功