2012-01-07 79 views
7

我正在研究一个Web服务的实现,我们正在使用CoffeeScript编写我们的前端代码。我偶然发现的问题是,当项目越来越多时,功能必须在不同的文件中分离。我真正需要的是一个简单的结构,其中在utils.coffee文件,我将有哪些是从每一页所需的基本功能,并在每个独立的文件,我将有page_foo.coffeepage_bar.coffee的特定功能。我怎样才能正确构建它,所以我也确保utils.coffee首先加载,并且可以从每个人都可以访问?组织多个CoffeeScript文件

+1

这不是特定于CoffeeScript,而是JavaScript的一般问题。这是说...看到[“构造咖啡代码?”](http://stackoverflow.com/questions/6150455/structuring-coffeescript-code),特别是我的答案[这里](http://stackoverflow.com /问题/ 6150455 /结构,CoffeeScript的代码/ 8303780#8303780)。 – shesek 2012-01-07 12:49:54

回答

3

你可以检查它是如何在gae-init完成项目(免责声明:我的创造者)。

其基本思想是将所有*.coffee文件放在一个特定目录中,然后生成一个编译所有文件并将其放入正确路径的构建脚本。

由于您希望能够在调试过程中轻松进行调试,因此构建脚本应该有一个选项来编译它们,以及另一个选项来组合它们。

+0

谢谢我改变了我的答案,只因为它的迷人。它不仅提供了咖啡性能优化的结构,而且还提供了我常用的一大堆工具。 – topless 2012-05-02 17:58:44

+2

我甚至不知道你可以“不接受”答案:)如果你走这条路线,你应该看一下CoffeeScript自己的[cake](http://coffeescript.org/#cake)实用程序(少一种语言然后) – 2012-05-04 06:57:44

+0

这是一个好主意,但它可以防止你有两个相同名称的文件,比如说views/navItem和models/navItem – dezman 2014-01-09 17:09:36

5

执行顺序推崇的浏览器,所以只包括utils.js第一。

像CodeKit(http://incident57.com/codekit/)这样的工具可以编译和缩小+将所有.coffee文件合并到一个.js中,这对于shell脚本也很容易实现。

如果你的应用程序是真正的大,在require.jsAsynchoronous Module Loading阅读起来。它可以让你很轻松地管理依赖关系,并只加载什么是必要的:

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

用于require.js的+1 - 它对我们非常有用。 – domenukk 2013-06-30 14:27:31

2

我要做的就是写一个蛋糕任务按照预定的顺序加入和编译文件,例如

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 

看一看this gist

7

随着CoffeeToaster你必须包括你需要他们的顶部文件的能力,确保您的最终“.js”文件(也将合并您的所有CoffeeScript文件)将按照正确的顺序排列,供浏览器内部使用。

采取的文档看:
http://github.com/serpentem/coffee-toaster

它还配备了一个包装系统,该系统启用时会使用你的文件夹的层次结构,如果你想使空间中声明你的类,那么你可以extends类从多个文件,做进口和儿子,比如像:

#<< 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' 

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

+0

如何显示复杂的命名空间acme.sales.admin,这是我的应用程序的根? – 2012-07-11 21:31:06

+0

您可以相互创建这些文件夹,并将文件放在“acme/sales/admin/yourfile.coffee”中。 – 2012-10-25 17:11:23

+0

CoffeeToaster已经[已停用](https://github.com/arboleya/coffee-toaster/wiki)并分发给一个新项目[Polvo](https://github.com/polvo/polvo)。 – 2017-06-13 20:13:10