https://github.com/raphamorim/nautilus.js
Async CSS/JavaScript loader & dependency manager in ~1kb (600B gziped)
https://github.com/raphamorim/nautilus.js
Last synced: 11 months ago
JSON representation
Async CSS/JavaScript loader & dependency manager in ~1kb (600B gziped)
- Host: GitHub
- URL: https://github.com/raphamorim/nautilus.js
- Owner: raphamorim
- License: apache-2.0
- Created: 2017-07-25T12:40:01.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-03-23T15:05:27.000Z (about 7 years ago)
- Last Synced: 2025-07-06T19:45:23.790Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 75.2 KB
- Stars: 19
- Watchers: 4
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nautilus.js
> Async CSS/JavaScript loader & dependency manager in ~1kb (600B gziped)
[](https://coveralls.io/github/raphamorim/nautilus.js?branch=master)
Used by [G1's globocom](http://g1.globo.com), [Jusbrasil](http://www.jusbrasil.com.br/home)
## Why?
#### Old School
blocks CSS, Images and JavaScript.
```html
```
#### Middle School
loads as non-blocking, however one has to use an API definition as AMD or commonjs. This affects all the other scripts (including plugins).
```html
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...
*/
});
});
```
#### New School
loads as non-blocking too, however Nautilus.js doesn't care if it's an anonymous define, has unexported module or things like that.
```html
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'
});
```
#### What's the biggest difference about the [current top script loaders](http://www.creativebloq.com/javascript/essential-javascript-top-five-script-loaders-8122862)?
Nautilus can define namespaces to asset paths/links and you can manage easily. Besides 7~20x more lighter.
## Getting
First of all, get Nautilus.js using [Download Option](https://github.com/raphamorim/nautilus.js/archive/master.zip) or via package manager.
To get using [Bower](http://bower.io) just run this command:
```sh
bower install nautilusjs
```
Or get using NPM just run this command:
```sh
npm install nautilusjs
```
## Usage
To define specified `paths`, you must use the config method:
```js
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:
```js
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:
```js
nautilus(['jquery', 'waterfall'], function() {
console.log($); // function (a,b){return new n.fn.init(a,b)}
console.log(typeof(waterfall)); // 'function'
});
```
### Optional parameters
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.
```js
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`
## Browser Support
| 
| 
| 
| 
| 
|
|:---:|:---:|:---:|:---:|:---:|
| 35+ ✔ | 38+ ✔ | 9+ ✔ | 29+ ✔ | 8+ ✔ |
## Credits
Made by [@raphamorims](https://twitter.com/raphamorims) and awesome [contributors](https://github.com/raphamorim/nautilus.js/graphs/contributors)
License: MIT