如何在 Sinatra 中使用咖啡脚本答案

【问题标题】：How to use coffeescript with Sinatra如何在 Sinatra 中使用咖啡脚本
【发布时间】：2013-03-30 09:42:49
【问题描述】：

我正在尝试让咖啡脚本与 Sinatra 一起使用。我对这两种技术都是新手，所以这可能很愚蠢。我的问题似乎是咖啡脚本编译为 javascript 但不在页面上执行，而是显示为 html。

#sinatra app
require 'coffee-script'
get "/test.js" do
  coffee :hello
end

#hello.coffee
alert "hello world"

#My page (/test.js) doesn't execute the js - just displays the code

#On screen in the browser I get this:
   (function() {
  alert("hello world");
}).call(this);

#In the HTML I get this within the body tags

<pre style="word-wrap: break-word; white-space: pre-wrap;">(function() {
  alert('hello world!');
}).call(this);
</pre>

【问题讨论】：

当您说“在 HTML 中”时，您指的是什么 HTML？您的 JavaScript 是如何嵌入其中的？此外，上面还有一个不一致之处——"hello world" 与 "hello kids"。
当我说“在 HTML 中”时，我的意思是当我查看页面的源代码时。不一致的问题已修复 - 如有任何混淆，我们深表歉意。
好吧，我明白，但我想问：你是如何在 Sinatra 端创建该页面的？

标签： sinatra coffeescript

【解决方案1】：

嗯...看起来您的示例基于this Sinatra documentation。但出于某种原因，Sinatra 正试图将 .js 文件作为 HTML 提供，并相应地对其进行预处理。您是否有机会在应用程序的其他地方设置content_type？尝试将您的代码更改为

get "/test.js" do
  content_type "text/javascript"
  coffee :hello
end

您也可以尝试一种完全不同的方法，使用Rack::Coffee 或Barista 在机架级别自动将您的CoffeeScript 编译为JavaScript。如果您有大量 CoffeeScript 文件，这可能会更容易。

编辑： 发布上述内容后，我突然意识到我可能只是误解了您的标记。是您在浏览器中加载页面test.js 时看到的内容

alert('hello world!');

？如果是这样，一切正常。 JavaScript 仅在位于 <script> 标记之间的 HTML 页面中或通过 <script src="test.js"></script> 引用时才会在您的浏览器中运行。所以除了你现有的代码，添加

get "/alert", :provides => 'html' do
  '<script type=src="test.js"></script>'
end

然后在浏览器中打开alert 地址，脚本应该会运行。

【讨论】：

非常感谢您的回答。我都尝试了，但仍然没有运气 - 虽然它不在脚本标签中，但你是对的。我在关于我所看到的问题的问题中添加了额外的信息。可能会尝试机架级解决方案。

【解决方案2】：

来自sinatra-coffee-script-template 我只是在寻找相同的设置。

require 'rubygems'
require 'bundler/setup'
require 'sinatra'
require 'coffee-script'

get '/' do
  erb :index
end

get '/application.js' do
  coffee :application
end

然后在 application.coffee 中

$(document).ready ->
  $('button:first').click ->
    $('body').toggleClass 'dark', 'light'

index.erb

<h1>I'm living the dream</h1>
<button>Click me</button>

layout.erb

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Sinatra Coffee-Script Template</title>
  <style type="text/css">
    .dark {
      background: #2F2F2F;
      color: #7F7F7F;
    }
    .light {
      background: #EEEEEE;
      color: #2F2F2F;
    }
  </style>
</head>
<body>
  <%= yield %>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  <script src="/javascripts/listeners.js" type="text/javascript"></script>
</body>
</html>

【讨论】：

你没有在 index.erb 或 layout.erb 中提到 application.js .. sinatra 是如何将它扔给浏览器的

【解决方案3】：

我通常只是在开发 coffee -wc dirname/ 时在我的 CoffeeScript 文件上设置一个观察程序，然后将编译后的 JS 文件部署到生产环境中。这并不理想，但它在某些方面不那么复杂，并且从我的生产服务器（在我的情况下是 Heroku）中消除了对 Node.JS 的依赖。

【讨论】：

实际上，Ruby 的coffee-script gem（现在 Rails 3.1 中的默认值）并不依赖于 Node。它通过ExecJS 运行CoffeeScript 的编译器（它是一个JavaScript 文件），然后它会寻找therubyracer gem；那是一个没有依赖关系的 JavaScript 解释器。完全对 Heroku 友好。
特别是你想要therubyracer-heroku。
是的，gem 就派上用场了。以前没有听说过它是如何工作的，但现在它非常有意义（使用基于 ruby 的 javascript 解释器将 coffeescript 预编译为 javascript）
或者，如果你使用的是 JRuby，therubyrhino。

【解决方案4】：

使用像 sinatra-asset-snack (https://rubygems.org/gems/sinatra-asset-snack) 这样的 gem，甚至更好，使用引导程序启动您的项目，这样您就不必担心设置所有管道 (https://github.com/benkitzelman/sinatra-backbone-bootstrap)

【讨论】：