Javascript 组织多个CoffeeScript文件

我正在开发一个web服务的实现，我们正在用CoffeeScript编写前端代码。我遇到的问题是，当项目不断增长时，功能必须在不同的文件中分离。我真正需要的是一个简单的结构，在

utils.coffee

文件中，我将拥有每个页面所需的一般功能，在每个单独的文件中，我将拥有

page\u foo.coffee

page\u bar.coffee

特定功能。我怎样才能正确地构造它，这样我也可以确保

utils.coffee

首先加载，并且每个人都可以访问它？

浏览器尊重执行顺序，所以只需首先包含

utils.js

像代码工具包这样的工具(http://incident57.com/codekit/)可以编译和缩小所有

.coffee

文件，并将其合并为一个

.js

，这也很容易用shell脚本实现

如果你的应用程序真的很大，请仔细阅读和。它将允许您非常轻松地管理依赖关系，并且只加载必要的内容：

# page_foo.coffee
define ['lib/utils'], ($) ->
    // code that uses 'utils'

---

例如，我要做的是编写一个蛋糕任务，以按照预定的顺序连接和编译文件

task 'build', 'join and compile *.coffee files', ->
  exec "coffee -j #{outJS}.js -c #{strFiles}", exerr

其中，

outJS

是我想要编译JavaScript的文件名，

strFiles

是一个文件名字符串

此外，您还可以使用YUICompressor或您喜爱的工具添加任务以缩小编译后的代码。在开发过程中，观察、加入、编译也可以自动化

task 'watch', 'watch and compile changes in source dir', ->
  watch = exec "coffee -j #{outJS}.js -cw #{strFiles}"
  watch.stdout.on 'data', (data)-> process.stdout.write data 

---

看一看

使用CoffeeToaster，您可以将需要的文件放在它们的顶部，确保最终的“.js”文件（也是所有CoffeeScript文件的合并文件）按正确的顺序排列，以便在浏览器中使用

查看文档：

它还附带一个打包系统，启用该系统后，将使用文件夹的层次结构作为类的名称空间声明（如果需要），然后可以从多个文件扩展类，执行导入和子操作，例如：

#<< another/package/myclass
class SomeClass extends another.package.MyClass

---

甚至还有一个单独编译文件的调试选项，以简化调试过程和其他有用的功能。

您可以在project中检查它是如何完成的（免责声明：我是创建者）

基本思想是将所有的

*.coffee

文件放在一个特定的目录中，然后生成一个编译所有文件并将其放入正确路径的构建脚本

---

由于您希望能够在开发过程中轻松调试，因此构建脚本应该有一个选项来编译它们，还有一个选项来组合和缩小它们。

这不是CoffeeScript特有的，而是JavaScript的一个普遍问题。话虽如此。。。看，特别是我的答案。谢谢，我改变了我的答案只是因为它的惊人。它不仅为CoffeeScript提供了性能优化的结构，而且还提供了我常用的大量工具。我甚至不知道你可以“拒绝”一个答案：）如果你这样做的话，你应该查看CoffeeScript自己的实用程序（堆栈中少了一种语言）。这是个好主意，但它可以防止你拥有两个同名文件，比如说视图/导航项和模型/navItem@watson不，如果你处理得当的话。。你应该考虑整个路径，而不仅仅是文件名。我如何才能公开一个复杂的名称空间，例如acme.sales.admin，从而使它成为我的应用程序的根目录？你可以在每个文件夹中创建一个文件夹，并将文件放在“acme/sales/admin/yourfile.coffee”中。CoffeeToaster已经被转移到一个新项目中。

# => SRC FOLDER
toast 'src_folder'
    # => VENDORS (optional)
    # vendors: ['vendors/x.js', 'vendors/y.js', ... ]

    # => OPTIONS (optional, default values listed)
    # bare: false
    # packaging: true
    # expose: ''
    # minify: false

    # => HTTPFOLDER (optional), RELEASE / DEBUG (required)
    httpfolder: 'js'
    release: 'www/js/app.js'
    debug: 'www/js/app-debug.js'