A microkernel for modular javascript, a toolchain for modern front-end, a micro-framework for growable WebApp.

OzJS / Getting Started with oz.js and ozma.js

Download oz.js

You might also need a domReady module: domready.js

Put them into your project directory, like ./js/lib and ./js/mo

In your web page:

<script src="js/lib/oz.js"></script>
<script>
require.config({
    baseUrl: 'js/'
});

define('jquery', 'lib/jquery.js');

define('app', [
    'jquery', 
    'mo/domready'
], function($){
    var app = {
        // do something with jquery
    };
    return app;
});

require(['app'], function(app){
    // do something with app 
});
</script>

That's all! But for development environments only.

Better practice for real production environments:

<script src="dist/js/main.js"></script>
<script>
// define modules need demand loading outside main.js
define('module(dynamic dependence)', 'CDN_URL/filename_with_timestamp.js');
</script>

Put main.js into ./js (not ./dist/js)

require.config({
    baseUrl: 'js/',
    distUrl: 'dist/js/'
});

// same as above

Install ozma.js through NPM: 

npm install ozma -g

Create a configure file for ozma. The default file name is ozconfig.js, located under the same directory as main.js. In this way you can omit --config parameter for ozma.

{
    "baseUrl": "./js/",
    "distUrl": "./dist/js/",
    "loader": "lib/oz.js",
    "disableAutoSuffix": true
}

Build distribution files (one or more): 

ozma js/main.js

GRATS! That's all you need! See ./dist/js/main.js for build results, then refresh the web page, see Network Panel in your browser's developer console.


See usage for more detail: