有没有办法将 CoffeeScript 发送到客户端的浏览器并将其编译为 JavaScript *there*？
Posted
技术标签:
【中文标题】有没有办法将 CoffeeScript 发送到客户端的浏览器并将其编译为 JavaScript *there*？【英文标题】：Is there a way to send CoffeeScript to the client's browser and have it compiled to 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 是的，确实如此，但似乎不推荐，因为它没有说明如何做。 【参考方案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”> </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”> </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>
src，您必须能够通过XMLHTTPRequest 访问该文件，尤其是在使用file:// 的浏览器上会失败。
【讨论】：
以上是关于有没有办法将 CoffeeScript 发送到客户端的浏览器并将其编译为 JavaScript *there*？的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法将自定义数据发送到 Mailchimp 的 API，以便将其包含在活动中？
在 SciTE 中启用 CoffeeScript 词法分析器？