有没有一种方法可以将CoffeeScript发送到客户端浏览器并在那里将其编译为JavaScript？

Question

有没有一种方法可以将CoffeeScript发送到客户端浏览器并在那里将其编译为JavaScript？

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编写的，那我可以把它发送到客户端，在客户端的浏览器中运行/编译这段代码吗？

- Phat Albert

2

在CoffeeScript网站的首页上写着：“CoffeeScript编译器本身是用Jison解析器生成器使用CoffeeScript编写的。coffee的命令行版本可作为Node.js实用程序使用。然而，核心编译器不依赖于Node，并且可以在任何JavaScript环境或浏览器中运行（请参见上面的“尝试CoffeeScript”）。" - Robert Harvey

@RobertHarvey 是的，它确实可以做到，但似乎并不被推荐，因为它没有说明如何实现。 - Michael

4个回答

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>

- jashkenas

8

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

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

基本上你需要：

使用text/coffeescript标记你的coffeescript
在页面上所有的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”>
      $ -> $(‘#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>

- PandaWood

现在GitHub已经禁用了直接从其中获取js文件的功能。 - xis

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

- Ciro Santilli OurBigBook.com

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trevor Burnham · Accepted Answer

Jeremy已经知道这个，但是让我补充一些重要细节和注意事项：

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

因此，你可能希望查看一些将CoffeeScript作为编译后JavaScript提供的替代方案。如果你正在为Ruby或Python服务器开发，则有可用的插件。我尝试在http://github.com/jashkenas/coffee-script/wiki/Web-framework-plugins上列出它们。

如果您正在开发一个没有后端的网站，我强烈建议您使用Middleman工具，它允许您在开发过程中使用CoffeeScript（以及如果您想要的话还可以使用Haml和Sass），然后将其编译和压缩以进行生产部署。

有没有一种方法可以将CoffeeScript发送到客户端浏览器并在那里将其编译为JavaScript？

"text/coffeescript"脚本标签

`"text/coffeescript"`脚本标签