Question

我正在努力让coffeescript与Sinatra合作。我对这两种技术都不熟悉，所以这可能是愚蠢的。我的问题似乎是coffeescript编译为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>

Answer 1

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

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

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

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

alert('hello world!');

？如果是这样，一切都很好。只有在<script>代码之间的HTML页面中或通过<script src="test.js"></script>引用时，JavaScript才能在您的浏览器中运行。因此，除了现有代码，请添加

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

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

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

Answer 3

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

Answer 4

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

如何在Sinatra中使用coffeescript

4 个答案: