여러 CoffeeScript 파일 구성

Question

CoffeeScript로 프런트 엔드 코드를 작성하는 웹 서비스 구현을 위해 노력 중입니다. 나는 프로젝트가 성장하는 동안 기능을 다른 파일로 분리해야하는 동안 문제가 발생했습니다. 내가 정말로 필요한 것은 utils.coffee 파일에서 모든 페이지와 각각의 개별 파일에 필요한 일반 기능을 갖게 될 간단한 구조입니다. page_foo.coffeepage_bar.coffee 특정 기능이 있습니다. 어떻게 올바르게 구조화하여 utils.coffee이 먼저로드되고 모든 사람이 액세스 할 수 있는지 확인해야합니까?

Answer 1

gae-init 프로젝트에서 어떻게 완료되었는지 확인할 수 있습니다 (책임의 한계 : 저는 제작자입니다).

기본 아이디어는 특정 디렉토리에 모든 *.coffee 파일이 있고 모든 파일을 컴파일하고 올바른 경로에 넣는 빌드 스크립트입니다.

개발 중일 때 쉽게 디버깅 할 수 있기를 원하기 때문에 빌드 스크립트에는 컴파일하기위한 옵션과 함께 &을 결합하는 옵션이 있습니다.

Answer 2

실행 순서는 브라우저에서 존중하므로, 먼저 utils.js을 포함하십시오.

CodeKit (http://incident57.com/codekit/)과 같은 도구를 사용하여 .coffee 개의 파일을 모두 컴파일하고 축소 + 결합하여 하나의 .js 파일로 만들 수 있습니다. 이는 쉘 스크립트에서도 쉽게 수행 할 수 있습니다.

앱이 실제로 큰 경우 require.js 및 Asynchoronous Module Loading을 읽으십시오. 그것은 당신이 아주 쉽게 의존성을 관리하고 만하면 무엇을로드 할 수 있습니다 :

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

Answer 3

내가 뭘하는 예를

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 CoffeeToaster와

Answer 4

당신은 당신이 그들의 상단에 필요합니다 파일을 포함 할 수있는 능력을 가지고에서보세요 자동화 할 수 있습니다 마지막 ".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' 

디버깅 프로세스 및 다른 유용한 기능을 쉽게 수행 할 수 있도록 파일을 개별적으로 컴파일하는 디버그 옵션도 있습니다.