Manage modules as single files - EugeneN/cafe GitHub Wiki

Cafe has all necessary tools for managing your file assets. To deal with this - follow this little tutorial it will explain how to work with different file types in cafe.

Including simple plain javascript file

1. cafe init
2. create test.js in your cs (client side) folder.

// test.js file content
console.log('plain javascript file (test.js) was included in pages bundle');

3. Let's open our recipe file (cs/recipe.yaml) and include new file:

abstract: 
    api_version: 5


modules:
    - plain_js_file :  # <---- Step1 define the new module with it's metadata in modules section
        path: test.js
        type: plainjs


bundles:
    default_bundle:
        modules:
            - plain_js_file  # <---- Step2 Including module to default bundle by it's name

4. Run cafe menu build in your init dir, open init.html file in your browser and check that test.js file was included in bundle.

I used the most verbose way of defining module in modules section, more detailed here

Manage dependencies

Cafe provides simple way to manage files dependencies. For instance, if you want to include some another plain file to your bundle, and this file must be inserted before test.js - you need to do such steps:

1. Create test2.js in your cs folder.

// test2.js file content
console.log('plain javascript file (test2.js) was included in pages bundle');

2. Include it in recipe

abstract: 
    api_version: 5


modules:
    - plain_js_file :  
        path: test.js
        type: plainjs
        deps: [another_js_file] # <--- Step2 add another_js_file module to dependencies

    - another_js_file: # <---- Step1 define our new module with it's metadata in modules section
        path: test2.js
        type: plainjs


bundles:
    default_bundle:
        modules:
            - plain_js_file  
            - another_js_file # <---- Step3 Including module to default bundle by it's name

3. Run cafe menu build and look at the console output of init.html file in browser, test2.js file must be included before test.js

Compiling to javascript from other languages

Also you can work with coffeescript files instead of js - cafe will automatically detect this and compile before bundling. For now cafe automatically compiles coffee and eco files to js. But soon there will be possibility to define your own compiler with a few lines of code and work with any language that compiles into javascript.

Working with commonjs files

If you want to work with your files as commonjs - simply specify commonjs type for module. For example, let's add to our example app cj_test.coffee file:

1. Create cj_test.coffee file in cs folder:

# cj_test.coffee
console.log 'cj_test required'

module.exports = 'cj_test'

2. Register and add to bundle in recipe file:

abstract: 
    api_version: 5


modules:
    - plain_js_file :  
        path: test.js
        type: plainjs
        deps: [another_js_file]

    - another_js_file: 
        path: test2.js
        type: plainjs

    - commonjs_file:            # <---- Step1 define our new module with it's metadata in modules section
        path: cj_test.coffee
        type: commonjs


bundles:
    default_bundle:
        modules:
            - plain_js_file  
            - another_js_file 
            - commonjs_file     # <---- Step2 Including module to default bundle by it's name

3. run cafe menu build

And thats it. You can open init.html in browser, activate developers console and try to execute require('commonjs_file'). Registered commonjs files can be required by their path without file extension.

Little recipe improvement

The result above recipe can have more compact modules definitions:

abstract: 
    api_version: 5


modules:
    - plain_js_file :  [test.js, plainjs, [another_js_file]]
    - another_js_file: [test2.js, plainjs]
    - commonjs_file: cj_test.coffee


bundles:
    default_bundle:
        modules:
            - plain_js_file  
            - another_js_file 
            - commonjs_file

As you can see modules have commonjs types by default. More detailed instruction of how you can describe modules in recipe is [here]((https://github.com/EugeneN/cafe/wiki/recipe-file).