我正在实现一个 Web 服务，我们正在使用 CoffeeScript 编写前端代码。我偶然发现的问题是，当项目不断增长时，功能必须在不同的文件中分开。我真正需要的是一个简单的结构，在utils.coffee 文件中，我将拥有每个页面所需的一般功能，在每个单独的文件中，我将拥有page_foo.coffee page_bar.coffee 特定功能。如何正确构建它，以便我还确保 utils.coffee 首先加载并且每个人都可以访问？
【问题讨论】：
标签： javascript coffeescript frontend
使用 CoffeeToaster，您可以在其顶部包含您需要的文件，确保您的最终“.js”文件（这也是所有 CoffeeScript 文件的合并）包含正确的所有内容顺序，在浏览器中使用。
查看文档：
http://github.com/serpentem/coffee-toaster
它还带有一个打包系统，启用后将使用文件夹的层次结构作为类的命名空间声明（如果需要），然后您可以从多个文件扩展类，执行导入和子操作，例如：
#<< another/package/myclass
class SomeClass extends another.package.MyClass
构建配置极其简约：
# => 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'
甚至还有一个调试选项，可以单独编译文件以简化调试过程和其他有用的功能。
【讨论】：
浏览器遵循执行顺序，因此只需首先包含utils.js。
像 CodeKit(http://incident57.com/codekit/) 之类的工具可以将您所有的 .coffee 文件编译并缩小+加入到一个 .js 中，这也很容易使用 shell 脚本来完成。
如果您的应用真的很大，请阅读require.js 和Asynchoronous Module Loading。它将允许您非常轻松地管理依赖项，并且只加载必要的内容：
# page_foo.coffee
define ['lib/utils'], ($) ->
// code that uses 'utils'
【讨论】：
您可以在gae-init 项目中查看它是如何完成的（免责声明：我是创建者）。
基本想法是，您将所有*.coffee 文件放在一个特定目录中，然后使用构建脚本编译所有文件并将它们放在正确的路径中。
由于您希望能够在开发时轻松调试，构建脚本应该有一个选项来编译它们和另一个选项来组合和缩小它们。
【讨论】：
我所做的就是写一个Cake任务来按照预定的顺序加入和编译文件，例如
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
【讨论】：