Async CSS/JavaScript loader & dependency manager in ~1kb (600B gziped)

Used by G1's globocom, Jusbrasil

blocks CSS, Images and JavaScript.

<link href="bootstrap.css">
<script src="jquery.js"></script>
<script src="my-jquery-plugin.js"></script>
<script src="my-app-that-uses-plugin.js"></script>

loads as non-blocking, however one has to use an API definition as AMD or commonjs. This affects all the other scripts (including plugins).

<!-- AMD LOADER EXAMPLE -->
<script>
require(['jquery'], function($) {
  console.log($); // function (a,b){return new n.fn.init(a,b)}

  require(['my-jquery-plugin'], function() {
    /*
      If jquery plugin has an anonymous define, throw an error: Mismatched anonymous define() module...
    */
  });
});
</script>

loads as non-blocking too, however Nautilus.js doesn't care if it's an anonymous define, has unexported module or things like that.

<script>
	nautilus.config({
		paths: {
			bootstrap: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
			'jquery': 'libs/jquery.js',
			'jquery.nanoscroller': 'libs/jquery-nanoscroller.js',
			'waterfall': 'http://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js'
		}
	});

	nautilus(['bootstrap', 'jquery', 'waterfall'], ['jquery.nanoscroller'], function() {
		console.log($); // function (a,b){return new n.fn.init(a,b)}
		console.log(typeof($.fn.nanoScroller)); // 'function'
	});
</script>

Nautilus can define namespaces to asset paths/links and you can manage easily. Besides 7~20x more lighter.

First of all, get Nautilus.js using Download Option or via package manager.

To get using Bower just run this command:

bower install nautilusjs

Or get using NPM just run this command:

npm install nautilusjs

To define specified paths, you must use the config method:

nautilus.config({
    paths: {
        'jquery': 'libs/jquery.js',
        'waterfall': 'http://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js'
    }
});

Or you can pass an array, now it will try to download the asset once in order, falling back to the next URL if fails, like this:

nautilus.config({
  paths: {
    jquery: [
      'https://public.cdn.com/libs/jquery.min.js',
      'https://private.cdn.com/libs/jquery.min.js',
    ],
    waterfall: [
      'http://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js',
      'http://www.mydomain.com/js/1.0.2/waterfall.min.js'
    ]
  }
});

To asynchronous download the assets:

nautilus(['jquery', 'waterfall'], function() {
    console.log($); // function (a,b){return new n.fn.init(a,b)}
    console.log(typeof(waterfall)); // 'function'
});

You can also set origins for your relative URLs, it will concatenate the origin and the path and try to load once, so if the download fails in the first domain, it will try to download in the second and so on.

nautilus.config({
  origins: ['https://public.cdn.com', 'https://private.cdn.com', 'https://s3.com'],
  paths: { jquery: '/libs/jquery.min.js' }
});
nautilus(['jquery']);

With this it will request the jQuery file in the following URLs:

1. https://public.cdn.com/libs/jquery.min.js
2. https://private.cdn.com/libs/jquery.min.js
3. https://s3.com/libs/jquery.min.js
4. /libs/jquery.min.js

35+ ✔	38+ ✔	9+ ✔	29+ ✔	8+ ✔

Made by @raphamundi and awesome contributors

License: MIT