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

发布于 2024-10-19 17:00:32 字数 328 浏览 3 评论 0原文

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

原文

Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript there?

<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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

避讳 2024-10-26 17:00:32

Jeremy 已经有了这个，但让我添加一些重要的细节和注意事项：

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

请如果您正在为 Ruby 或 Python 服务器进行开发，我已尝试在 http://github.com/jashkenas/coffee-script/wiki/Web-framework-plugins。

如果您正在开发没有后端的网站，我强烈建议您使用 Middleman 工具，它可以让您在开发过程中使用 CoffeeScript（如果需要，还可以使用 Haml 和 Sass），然后编译并缩小它以进行生产部署。

回复收藏 0 原文

呆萌少年 2024-10-26 17:00:32

也许您正在寻找这个？

"text/coffeescript" 脚本标签
虽然不建议认真使用，但 CoffeeScripts 可能是
使用

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

Perhaps you're looking for this?

"text/coffeescript" Script Tags
While it’s not recommended for serious use, CoffeeScripts may be
included directly within the browser using <script type="text/coffeescript"> tags. The source includes a compressed and
minified version of the compiler (Download current version here, 77k
when gzipped) as
docs/v2/browser-compiler-legacy/coffeescript.js. Include this file
on a page with inline CoffeeScript tags, and it will compile and
evaluate them in order.
The usual caveats about CoffeeScript apply — your inline scripts will
run within a closure wrapper, so if you want to expose global
variables or functions, attach them to the window object.

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

回复收藏 0 原文

森林散布 2024-10-26 17:00:32

答案是肯定的。我不会重复@Trevor的出色答案，而只是提供您正在思考的示例：

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

基本上你

用 文本标记你的咖啡脚本/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”> </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>

The answer is yes. I won't repeat @Trevor's excellent answer, but rather just provide an example of what you're thinking about:

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)

Sample HTML below

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

回复收藏 0 原文

最冷一天 2024-10-26 17:00:32

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

<!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.
if using src you must be able to access the file via XMLHTTPRequest, in particular it fails on browsers with file://.

回复收藏 0 原文

~没有更多了~