Есть ли способ отправить CoffeeScript в клиентский браузер и скомпилировать его на JavaScript * там *?

Есть ли способ отправить 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, поэтому я могу отправить его клиенту для компиляции/запуска этого кода в браузере клиента?

Ответы

Ответ 1

У Джереми уже есть этот, но позвольте мне добавить некоторые важные детали и оговорки:

  • В 39k gzipped (по сравнению с jQuery в 29k) coffee-script.js - большой файл; поэтому, если вы фактически не позволяете своим пользователям запускать собственный CoffeeScript, вам действительно не следует использовать его в процессе производства.
  • Как упоминалось в документации, каждый фрагмент CoffeeScript будет находиться в своем анонимном закрытии. Таким образом, ваш примерный фрагмент ничего не сделает - squares не будет отображаться вне script. Вместо этого вы хотите изменить его на window.squares = ....
  • Весь код CoffeeScript, будь то внешний или встроенный, будет запускаться после всего кода JavaScript на странице. Это потому, что coffee-script.js не читает ваши теги <script type="text/coffeescript> до тех пор, пока документ не будет готов, и к тому времени ваши скрипты Java уже запустились.
  • Удаленные CoffeeScripts загружаются через XMLHTTPRequest, что означает, что они должны размещаться в том же домене, что и ваш сайт. (У некоторых браузеров-Chrome, по крайней мере, также есть проблема с выполнением XMLHTTPRequest на пути file://.)
  • В настоящее время порядок, в котором запускаются разные удаленные CoffeeScripts, не гарантируется. Я представил патч для этого, но он официально не является частью CoffeeScript. См. этот запрос на перенос.

Итак, вы можете посмотреть некоторые альтернативы для использования CoffeeScript в качестве скомпилированного JavaScript. Если вы разрабатываете сервер Ruby или Python, доступны плагины. Я попытался перечислить их всех в http://github.com/jashkenas/coffee-script/wiki/Web-framework-plugins.

Если вы разрабатываете сайт без бэкэнд, инструментом, который я настоятельно рекомендую, является Middleman, который позволяет вам работать с CoffeeScript (а также Haml и Sass, если хотите) во время разработки, затем скомпилируйте и уменьшите его для развертывания производства.

Ответ 2

Ответ - да. Я не буду повторять @Trevor отличный ответ, а просто даю пример того, о чем вы думаете:

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

В основном вы

  1. Пометьте свой кофейник с текстом /coffeescript
  2. Включите 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&#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>

Ответ 3

<!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://.