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

Pha*_*ert 37 javascript coffeescript

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

<script type="text/coffeescript">
    square = (x) -> x * x
    list = [1, 2, 3, 4, 5]        
    squares = (square num for num in list)
</script>
Run Code Online (Sandbox Code Playgroud)

CoffeeScript编译器是用JavaScript编写的,所以我可以将其发送到客户端以在客户端的浏览器中编译/运行此代码吗?

Tre*_*ham 48

Jeremy已经有了这个,但是我要补充一些重要的细节和警告:

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

因此,您可能希望查看将CoffeeScript作为编译JavaScript提供的一些替代方法.如果您正在为Ruby或Python服务器开发,可以使用插件.我试图在http://github.com/jashkenas/coffee-script/wiki/Web-framework-plugins上列出所有内容.

如果您正在开发一个没有后端的站点,我强烈建议您使用的工具是Middleman,它允许您在开发期间使用CoffeeScript(以及Haml和Sass,如果您需要),然后编译并缩小它以进行生产部署.

  • @Soviut啊,但是没有用于直接缩小CoffeeScript的库.(也不应该!)我几乎可以保证你的缩小的JS会比你的CoffeeScript源小. (2认同)

jas*_*nas 23

也许您正在寻找这个

\n
\n

"text/coffeescript"脚本标签

\n

虽然不建议认真使用它\xe2\x80\x99,但 CoffeeScripts 可以使用<script type="text/coffeescript">标签直接包含在浏览器中。源代码包括编译器的压缩版本(在此处下载当前版本,gzip 压缩后为 77k):\n docs/v2/browser-compiler-legacy/coffeescript.js。将此文件包含在带有内联 CoffeeScript 标记的页面中,它将按顺序编译和评估它们。

\n

关于 CoffeeScript 的常见警告适用 \xe2\x80\x94 您的内联脚本将\n在闭包包装器中运行,因此如果您想公开全局\n变量或函数,请将它们附加到对象window

\n
\n

\r\n
\r\n
<script crossorigin src="https://coffeescript.org/v2/browser-compiler-legacy/coffeescript.js"></script>\n\n<script type="text/coffeescript">\nsquare = (x) -> x * x\nlist = [1, 2, 3, 4, 5]        \nsquares = (square num for num in list)\n\nconsole.log squares\n</script>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n


Pan*_*ood 8

答案是肯定的.我不会重复@ Trevor的优秀答案,而只是提供一个你正在思考的例子:

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

基本上你

  1. 使用text/coffeescript标记你的coffeescript
  2. 包括咖啡的script.js在页面上所有的CoffeeScript后(编译器将评估和编译为了所有的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>
Run Code Online (Sandbox Code Playgroud)