CoffeeScript中的客戶端依賴關系管理

Question

如果生成的javascript文件最終需要連接在一起以便在客戶端使用，那么在CoffeeScript文件中執行依賴關系管理的最佳方法是什么？

對於服務器端CoffeeScript，我可以使用'require'關鍵字來要求其他javascript。 當這是為客戶端應用程序編譯以具有依賴關系樹時，基於需求，計算和生成的連接的獨立javascript文件。 無論如何以通用的方式做到這一點？

Answer 1

另一個選擇是使用CoffeeToaster，它使用另一種方法而不是實現AMD / CJS模塊模式。

看看： http ： //github.com/serpentem/coffee-toaster

Answer 2

通常，對於JavaScript（和CSS）的客戶端打包，您需要某種資產打包插件。 我們使用Jammit ，但還有許多其他選項： Sprockets ， Django-Compress ......等等。

Answer 3

Villain （用於瀏覽器的CoffeeScript游戲引擎）定義了這樣做的功能（依賴管理和js連接）。

它的代碼在這兩個文件中：

• cake.coffee ，see， determineDependencies() ， wrapModule()和bundleSources()
• brequire.coffee ，需要替換瀏覽器，與wrapModule()一起使用

我在這里使用它（參見'bundle' bundle'Cake任務）。

注意：我只是聲明'main'模塊的構建目錄，而Villain掃描我編譯的JS文件以構建依賴樹（從index.js開始），然后創建一個包含Villain require替換的JavaScript包文件，並且我的所有相關代碼都已排序，正確包裹。

Villain的作者在orona中使用它， 這是一款用惡棍制作的CoffeeScript游戲。

Answer 4

我已經使用了（我猜我還在使用）requirejs，但我已經開始發現它相當笨拙。 我的很多文件最終在頂部有大約10-12個進口，只占用了大量空間並且看起來不太好。

對於一個新項目，我嘗試了browserify。 這很棒！ 如果您使用grunt（您應該），您可以執行監視任務以在更改時瀏覽您的代碼。 grunt-browserify還提供了進行coffeescript轉換的能力。

https://github.com/jmreidy/grunt-browserify

因此，您在Gruntfile.coffee監視任務看起來像：

watch:
  files: [
    "app/**/*.coffee"
  ]
  tasks: "browserify"

browserify:
  'build/app.js': ['app/**/*.coffee']
  options:
    transform: ['coffeeify']

Answer 5

對於客戶端的依賴管理，我對javascript和coffeescript源使用requirejs 。 可以使用requirejs插件來加載本機咖啡文件，但我更喜歡“編譯”成js。

requirejs還提供/使用r.js優化器 。 它可以用來將一組js文件聚合成一個並縮小它。 您不必指定要聚合的文件，它是“main.js”所需的每個模塊的依賴關系定義。 （符合您要求的功能）

我喜歡requirejs的東西，它“promots”創建模塊並聲明顯式依賴。

# A.coffee
define(() ->
  class A
    constructor: (@c1, @c2) ->
      @c2 ?= 1

    m1 : () ->
      "hello"

    toString : () -> "#{@c1}#{@c2}"
)


# B.coffee
define(['A'], (A) ->
  a = new A(33)
  console.log(a, a.m1())
)