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

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编写的，所以我可以将其发送到客户端以在客户端的浏览器中编译/运行此代码吗？

3 个解决方案

#1

Jeremy already has this one, but let me add some important details and caveats:

杰里米已经有了这个，但是我要补充一些重要的细节和警告：

At 39k gzipped (compare to jQuery at 29k), coffee-script.js is a big file; so unless you're actually letting your users run their own CoffeeScript, you really shouldn't use it in production.
在gkip为39k（与29k的jQuery相比），coffee-script.js是一个大文件;所以除非你实际上让你的用户运行他们自己的CoffeeScript，否则你真的不应该在生产中使用它。
As mentioned in the documentation, each CoffeeScript snippet will be in its own anonymous closure. So your example snippet wouldn't do anything—squares wouldn't be visible outside of the script. Instead, you'd want to change it to window.squares = ....
如文档中所述，每个CoffeeScript代码段都将在其自己的匿名闭包中。因此，您的示例代码段不会执行任何操作 - 在脚本之外不会显示正方形。相反，你想将它改为window.squares = ....
All CoffeeScript code, whether external or inline, will run after all JavaScript code on the page. That's because coffee-script.js doesn't read your <script type="text/coffeescript> tags until after the document is ready, by which time your JavaScripts have already run.
所有CoffeeScript代码（无论是外部还是内联）都将在页面上的所有JavaScript代码之后运行。那是因为coffee-script.js在文档准备好之前不会读取你的
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 doing XMLHTTPRequests on file:// paths.)
远程CoffeeScripts通过XMLHTTPRequest加载，这意味着它们必须与您的站点托管在同一个域中。（某些浏览器 - 至少Chrome--在file：//路径上执行XMLHTTPRequests也有问题。）
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.
目前，不保证运行不同远程CoffeeScripts的顺序。我为此提交了一个补丁，但它还没有正式成为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，如果您需要），然后编译并缩小它以进行生产部署。

#2

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/

Basically you

基本上你

Tag your coffeescript with the text/coffeescript
使用text / coffeescript标记你的咖啡因
Include coffee-script.js after all coffeescript on the page (the compiler will evaluate and compile all coffeescript in order)
在页面上的所有coffeescript之后包含coffee-script.js（编译器将按顺序评估和编译所有coffeescript）

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&#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>

#3

<!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 has to be loaded after the script you want to run.
必须在要运行的脚本之后加载CoffeeScript。
if using src you must be able to access the file via XMLHTTPRequest, in particular it fails on browsers with file://.
如果使用src，你必须能够通过XMLHTTPRequest访问该文件，特别是在带有file：//的浏览器上失败。

#1