有没有办法将 CoffeeScript 发送到客户端的浏览器并将其编译为 JavaScript *there*？答案

【问题标题】：Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript *there*?有没有办法将 CoffeeScript 发送到客户端的浏览器并将其编译为 JavaScript *there*？
【发布时间】：2011-07-07 10:17:00
【问题描述】：

有没有办法将 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 编写的，所以我可以将它发送给客户端以在客户端的浏览器中编译/运行这段代码吗？

【问题讨论】：

它在 CoffeeScript 网站的首页上写着：“CoffeeScript 编译器本身是用 CoffeeScript 编写的，使用 Jison 解析器生成器。coffee 的命令行版本可作为 Node.js 实用程序使用. 然而，核心编译器不依赖于 Node，并且可以在任何 JavaScript 环境或浏览器中运行（参见上面的“试用 CoffeeScript”）。“
@RobertHarvey 是的，确实如此，但似乎不推荐，因为它没有说明如何做。

标签： javascript coffeescript

【解决方案1】：

也许您正在寻找this？

"text/coffeescript" 脚本标签

虽然不建议认真使用，但 CoffeeScripts 可能是使用<script type="text/coffeescript"> 标签直接包含在浏览器中。源包括一个压缩和编译器的缩小版 (Download current version here, 77k when gzipped) 为 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>

【讨论】：

【解决方案2】：

Jeremy 已经有了这个，但让我补充一些重要的细节和注意事项：

gzip 压缩到 39k（与 29k 的 jQuery 相比），coffee-script.js 是一个大文件；所以除非你真的让你的用户运行他们自己的 CoffeeScript，否则你真的不应该在生产环境中使用它。
如文档中所述，每个 CoffeeScript sn-p 都将位于其自己的匿名闭包中。所以你的示例 sn-p 不会做任何事情——squares 在脚本之外是不可见的。相反，您需要将其更改为 window.squares = ...。
所有 CoffeeScript 代码，无论是外部代码还是内联代码，都将在页面上的所有 JavaScript 代码之后运行。那是因为 coffee-script.js 在文档准备好之前不会读取您的 <script type="text/coffeescript> 标签，此时您的 JavaScript 已经运行。
远程 CoffeeScript 是通过 XMLHTTPRequest 加载的，这意味着它们必须与您的站点托管在同一个域中。（某些浏览器（至少是 Chrome）在 file:// 路径上执行 XMLHTTPRequests 时也存在问题。）
目前，无法保证不同远程 CoffeeScript 的运行顺序。我为此提交了一个补丁，但它还没有正式成为 CoffeeScript 的一部分。见this pull request。

因此，您可能想寻找一些替代方案，将 CoffeeScript 作为编译后的 JavaScript 提供服务。如果您正在为 Ruby 或 Python 服务器开发，可以使用插件。我试图在http://github.com/jashkenas/coffee-script/wiki/Web-framework-plugins 列出它们。

如果您正在开发一个没有后端的网站，我强烈建议您使用 Middleman，它可以让您在开发过程中使用 CoffeeScript（以及 Haml 和 Sass，如果您愿意），然后编译并将其缩小以进行生产部署。

【讨论】：

有人可能会争辩说，如果您要编写大量 CoffeeScript，较小的代码大小将弥补较大的库大小。
@Soviut 啊，但是没有用于直接缩小 CoffeeScript 的库。（也不应该有！）我几乎可以保证您的缩小 JS 将小于您的 CoffeeScript 源代码。
另一个需要注意的是，您无法控制浏览器支持或不支持的 JavaScript 版本。它不像 Node，如果不推荐使用的方法 CS 依赖丢弃，你可以坚持使用旧版本。这可能在未来几年都无关紧要，咬人而不是你。明天可能很重要。如果 CS 仍然依赖于一些已弃用的参数，那么它很快就会变得重要，因为浏览器供应商有性能激励来放弃这些东西。
我还没有测试过这个，但是有传言说this pull request修复了#5。

【解决方案3】：

答案是肯定的。我不会重复@Trevor 的出色答案，而只是提供一个您正在考虑的示例：

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

基本上你

用 text/coffeescript 标记您的咖啡脚本
在页面上的所有咖啡脚本之后包含 coffee-script.js（编译器将按顺序评估和编译所有咖啡脚本）

下面的示例 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>

【讨论】：

现在GitHub禁用直接从中获取js文件。

【解决方案4】：

<!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:// 的浏览器上会失败。

【讨论】：

有没有办法将 CoffeeScript 发送到客户端的浏览器并将其编译为 JavaScript there？

`"text/coffeescript"` 脚本标签

"text/coffeescript" 脚本标签

`"text/coffeescript"` 脚本标签