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

IT技术 javascript coffeescript
2021-03-06 05:01:19

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

4个回答

Jeremy 已经有了这个，但让我补充一些重要的细节和警告：

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

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

如果您正在开发一个没有后端的站点，我强烈建议您使用Middleman 工具，它可以让您在开发期间使用 CoffeeScript（以及 Haml 和 Sass，如果您愿意），然后编译并缩小它以进行生产部署.

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

也许你正在寻找这个？

"text/coffeescript" 脚本标签

虽然不建议认真使用它，但可以使用<script type="text/coffeescript">标签将 CoffeeScripts 直接包含在浏览器中。源包括编译器的压缩和缩小版本（在此处下载当前版本，gzipped 时为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>

答案是肯定的。我不会重复@Trevor 的出色回答，而只是举例说明您在想什么：

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

基本上你

  1. 使用文本/咖啡脚本标记您的咖啡脚本
  2. 在页面上的所有咖啡脚本之后包含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文件。
2021-05-09 05:01:19 
<!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://.
其它你可能感兴趣的问题
上一篇在 Node.js 中收听 EADDRNOTAVAIL 错误 下一篇在 Chrome 中加载页面时，如何捕获所有网络请求和完整响应数据？