autoloader-cdn
v1.0.2
Published
CDN autoloader based on package.json dependencies and unpkg.com(cdn service)
Downloads
3
Maintainers
Readme
Autoloader CDN based on package.json dependencies, and unpkg.com
Useful when you needed to load everything from one file,
for example a library with tons of dependencies,
you won't bundle everything, just create 5kb autoloader.js
file in your project.
Install
You can install this package with npm
.
npm
npm install --save autoloader-cdn
CDN
Can also be found on unpkg.com:
//unpkg.com/[email protected]/dist/autoloader.cdn.js
//unpkg.com/[email protected]/dist/autoloader.cdn.min.js
Basic usage example
1. Add a <script>
tag to your index.html
<script src="../dist/autoloader.cdn.js"></script>
<script type="text/javascript">
var autoloader = autoloaderCdn({
env: 'development',
deps: true,
pkgDependencies: {
"jquery": "^1.8.2"
},
loadDependencies: {
"jquery": {
version: "3.3.1"
},
"video.js": {
fileName: 'video',
version: "7.0.5"
}
}
});
autoloader.loadjs.ready('bundle', function() {
$('body').html('Jquery works!!');
});
</script>
Available options here
env
environment variable(development
,production
), if production, will load minified files (defaultproduction
)pkgDependencies
usually that's the place to put package.json dependencies directly (default:{}
), it has two parameters: package name, and it's version.loadDependencies
the order of dependencies are loaded, and each with following parameters by default:
{
pkgName: key,
version: pkgDependencyVersion,
path: '/dist/',
fileName: key,
fileMin: '.min',
fileExt: '.js'
}
urlTemplate
The url structure (default:https://unpkg.com/[pkgName]@[version][path][fileName][fileMin][fileExt]
), unrecommended to change.
Recommended usage example(webpack)
A recommended way is to use js precompilers,
that allows to include the package.json,
and send all the dependencies to the configuration automatically,
so in this case the dependencies versions will be parsed from package.json.
include it to pkgDependencies
parameter.
1. Create new file autoloader.js
, add it for webpack
- entry.autoloader
, then use this:
// provide the path to package.json, or use webpack DefinePlugin insead.
var pkg = require('./package');
// require the library
var autoloaderCdn = require('autoloader-cdn');
// library initialization
var autoloader = autoloaderCdn({
env: 'development',
pkgDependencies: pkg.dependencies,
loadDependencies: {
"jquery": {
version: "3.3.1"
},
"video.js": {
fileName: 'video',
version: "7.0.5"
}
}
});
// export
module.exports = autoloader.loadjs;
Create UMD
library from this file, for example with webpack
name the library autoloader
, also it's recommended to use webpack.DefinePlugin
, to set only dependencies from package.json
.
2. After all, it would look like this:
<script src="autoloader.js"
deps="true"
deps-before="anotherCss.css"
deps-after="cssExample.css,scriptExample.js">
</script>
<script>
autoloader.ready('bundle', function() {
$('body').html('Jquery works!!');
});
</script>
Available options here:
deps
dependencies should be included? (defaultfalse
)deps-exclude
what to exclude from dependencies (sepparated by comma,
, ex:jquery,bootstrap
)deps-before
what to include before all dependencies added (sepparated by comma,
, ex:https://code.jquery.com/jquery-2.2.4.min.js,https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js
)deps-after
the same likedeps-before
but the opposite .
For now that's all, in the future this will be improved in a common manner.
Change Log
9th July 2018
- [geoshar] First 1.0.0 version added.
- [geoshar] First documentation added.
Copyright © 2018 Georgy Sharapov | BSD & MIT license