有没有办法将 CoffeeScript 发送到客户端的浏览器并在那里*将其编译为 JavaScript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5170473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript *there*?
提问by Phat Albert
Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript there?
有没有办法将 CoffeeScript 发送到客户端的浏览器并在那里将其编译为 JavaScript ？
<script type="text/coffeescript">
square = (x) -> x * x
list = [1, 2, 3, 4, 5]
squares = (square num for num in list)
</script>
The CoffeeScript compiler is written in JavaScript, so can I send it to the client to compile/run this code in the client's browser?
CoffeeScript 编译器是用 JavaScript 编写的，所以我可以将它发送到客户端以在客户端的浏览器中编译/运行此代码吗？
回答by Trevor Burnham
Jeremy already has this one, but let me add some important details and caveats:
Jeremy 已经有了这个，但让我补充一些重要的细节和警告：
- At 39k gzipped (compare to jQuery at 29k),
coffee-script.jsis a big file; so unless you're actually letting your users run their own CoffeeScript, you really shouldn't use it in production. - As mentioned in the documentation, each CoffeeScript snippet will be in its own anonymous closure. So your example snippet wouldn't do anything—
squareswouldn't be visible outside of the script. Instead, you'd want to change it towindow.squares = .... - All CoffeeScript code, whether external or inline, will run afterall JavaScript code on the page. That's because
coffee-script.jsdoesn't read your<script type="text/coffeescript>tags until after the document is ready, by which time your JavaScripts have already run. - Remote CoffeeScripts are loaded via
XMLHTTPRequest, which means that they must be hosted on the same domain as your site. (Certain browsers—Chrome, at least—also have a problem with doingXMLHTTPRequests onfile://paths.) - Currently, the order in which different remote CoffeeScripts run is not guaranteed. I submitted a patch for this, but it's not officially a part of CoffeeScript yet. See this pull request.
- gzip 压缩后 39k（与 jQuery 的 29k 相比）
coffee-script.js是一个大文件；所以除非你真的让你的用户运行他们自己的 CoffeeScript，否则你真的不应该在生产中使用它。 - 正如文档中提到的，每个 CoffeeScript 片段都将在自己的匿名闭包中。因此，您的示例代码段不会做任何事情
squares——在脚本之外是不可见的。相反，您希望将其更改为window.squares = .... - 所有 CoffeeScript 代码，无论是外部的还是内联的，都将在页面上的所有 JavaScript 代码之后运行。那是因为在文档准备好之前
coffee-script.js不会读取您的<script type="text/coffeescript>标签，此时您的 JavaScript 已经运行。 - 远程 CoffeeScript 是通过 加载的
XMLHTTPRequest，这意味着它们必须与您的站点托管在同一域中。（某些浏览器——至少是 Chrome——也有XMLHTTPRequest在file://路径上执行s的问题。） - 目前，无法保证不同远程 CoffeeScript 的运行顺序。我为此提交了一个补丁，但它尚未正式成为 CoffeeScript 的一部分。请参阅此拉取请求。
So, you might want to look at some alternatives for serving CoffeeScript as compiled JavaScript instead. If you're developing for a Ruby or Python server, there are plugins available. I've tried to list them all at http://github.com/jashkenas/coffee-script/wiki/Web-framework-plugins.
因此，您可能想查看一些替代方案，将 CoffeeScript 作为编译后的 JavaScript 提供。如果您正在为 Ruby 或 Python 服务器进行开发，则可以使用插件。我试图在http://github.com/jashkenas/coffee-script/wiki/Web-framework-plugins上列出所有这些。
If you're developing a site without a backend, a tool I highly recommend looking at is Middleman, which lets you work with CoffeeScript (as well as Haml and Sass, if you want) during development, then compile and minify it for production deployment.
如果您正在开发一个没有后端的站点，我强烈建议您使用Middleman 工具，它可以让您在开发期间使用 CoffeeScript（以及 Haml 和 Sass，如果您愿意），然后编译并缩小它以进行生产部署.
回答by PandaWood
The answer is yes. I won't repeat @Trevor's excellent answer, but rather just provide an example of what you're thinking about:
答案是肯定的。我不会重复@Trevor 的出色回答，而只是举例说明您在想什么：
http://forgivingworm.wordpress.com/2010/09/27/running-coffeescript-in-browser/
http://forgivingworm.wordpress.com/2010/09/27/running-coffeescript-in-browser/
Basically you
基本上你
- Tag your coffeescript with the text/coffeescript
- Include coffee-script.js after all coffeescript on the page (the compiler will evaluate and compile all coffeescript in order)
- 使用文本/咖啡脚本标记您的咖啡脚本
- 在页面上的所有咖啡脚本之后包含coffee-script.js（编译器会按顺序评估和编译所有咖啡脚本）
Sample HTML below
下面的示例 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>
