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. 压缩后的 39k 文件（与 29k 的 jQuery 相比）coffee-script.js是一个大文件；所以除非你真的让你的用户运行他们自己的 CoffeeScript，否则你真的不应该在生产中使用它。
  2. 如文档中所述，每个 CoffeeScript 片段都将位于其自己的匿名闭包中。所以你的示例片段不会做任何事情——<code>squares 在脚本之外是不可见的。相反，您希望将其更改为window.squares = ....
  3. 所有 CoffeeScript 代码，无论是外部代码还是内联代码，都将在页面上的所有 JavaScript 代码之后运行。这是因为在文档准备好之前coffee-script.js不会读取您的<script type="text/coffeescript>标签，此时您的 JavaScript 已经运行。
  4. 远程 CoffeeScript 是通过 加载的XMLHTTPRequest，这意味着它们必须托管在与您的站点相同的域中。（某些浏览器——至少是 Chrome——也有在路径上执行XMLHTTPRequests的问题。）file://
  5. 目前，不能保证不同远程 CoffeeScripts 的运行顺序。我为此提交了一个补丁，但它还没有正式成为 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">虽然不建议认真使用，但可以使用标签将 CoffeeScripts 直接包含在浏览器中。源代码包括编译器的压缩和缩小版本（在此处下载当前版本，gzip 压缩时为 77k）作为 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 回答
2 
<!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://.
于 2014-06-20T10:08:17.013 回答