Есть ли способ отправить CoffeeScript в браузер клиента и скомпилировать его в JavaScript * там *? - PullRequest
37 голосов
/ 02 марта 2011

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

Ответы [ 3 ]

48 голосов
/ 02 марта 2011

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

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

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

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

8 голосов
/ 04 марта 2011

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

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

В основном вы

  1. Пометьте свой coffeescript с помощью text / coffeescript
  2. Включите coffee-script.js после всего coffeescript на странице ( компилятор оценит и скомпилирует весь 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>
2 голосов
<!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://.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...