是否可以在 html 文件的脚本标签中编译 Coffeescript 代码？ [复制]答案

【问题标题】：Is it possible to compile Coffeescript code in script tags in html files? [duplicate]是否可以在 html 文件的脚本标签中编译 Coffeescript 代码？ [复制]
【发布时间】：2011-12-13 05:46:52
【问题描述】：

可能重复：
Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript there?

有没有一种简单的方法来编译 html 内的 <script> 标签内的 Coffeescript，或者您通常将所有 Coffeescript 放在单独的文件中？

【问题讨论】：

安德鲁已经搞定了。另见：stackoverflow.com/questions/5170473/…
我更多的是考虑在服务器上将内联 Coffeescript 编译为 Javascript。基本上将 Coffeescript 编译器作为预处理器运行并忽略 HTML。
您不能将其放在单独的文件中的任何具体原因？这样您就可以使用现有的工具链。否则，您将不得不推出类似@Trevor 在他的回答中提到的内容。

标签： html coffeescript

【解决方案1】：

确实有。有一个关于它的帖子here。

那篇文章的摘要是这样的：

在 HTML 文档中包含类型为 text/coffeescript 的脚本

在页面头部包含这一行：

<script type="text/javascript" src="https://raw.githubusercontent.com/jashkenas/coffeescript/master/lib/coffee-script/coffee-script.js"></script>

请注意，不鼓励这样做。

<html>

<head>
  <title>In-Browser test</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript">
  </script>
  <script src="https://raw.githubusercontent.com/jashkenas/coffeescript/master/lib/coffee-script/coffee-script.js" type="text/javascript">
  </script>

</head>

<body>
  <script type="text/coffeescript">
    $ -> $('#header').css 'background-color', 'green'
  </script>
  <h1 style="color:white" id="header">CoffeeScript is alive!</h1>


</body>

</html>

【讨论】：

sn-p 在 Chrome 中失败，原因是：拒绝执行来自“github.com/jashkenas/coffee-script/raw/master/extras/…”的脚本，因为它的 MIME 类型 ('text/plain') 不可执行，并且启用了严格的 MIME 类型检查。

【解决方案2】：

回应 dvcolgan 的澄清评论：

因此，您希望在服务器上有一个带有内联 CoffeeScript 的 HTML 文件，该文件作为带有内联 JavaScript 的 HTML 提供。 CoffeeScript 编译器不直接支持这一点，但您可以编写一个 Node 脚本来相当容易地做到这一点，使用 coffee-script 库和 jsdom 进行 HTML 解析。

具体实现方式取决于您使用的网络框架。您可能不希望 CoffeeScript 编译器在每个请求上都运行（它非常快，但仍然会减少服务器可以处理的每秒请求数）；相反，您希望编译一次 HTML，然后从缓存中提供编译后的版本。同样，我不知道有任何现有的工具可以做到这一点，但编写自己的工具应该不会太难。

【讨论】：