You got many ways to use, depending of your modules builds standards system you use or not. I anticipated three cases for you!: CommonJs (Node/browserify), AMD (require JS) and Global.windows.
You have to :
- Install the package in your project (command line)
npm install chronoCanvas
- require it in a js file, foo.js
for example.
var chronoCanvas = require('chronoCanvas');
- execute commonJS task (here with browserify)
browserify dev/foo.js --outfile prod/bar.js
- include the output file in your front page.
<script type="text/javascript" src="prod/bar.js"></script>
And then you can use it and customise as here
You have to :
- Install the package in your project (command line)
npm install chronoCanvas
- Download and include requireJs.js in your web page.
<script type="text/javascript" src="requireJs.js"></script>
- In a script you call whatever you want (foo.js
in the example), require the package with require AMD command.
require(['chronoCanvas.js'], function(chronoCanvas){
... Your code here...
})
- include this script (after requireJs.js call).
<script type="text/javascript" src="foo.js"></script>
You have to download (via npm or not) at least index.js
from the package, and include it on your webpage.
<script type="text/javascript" src="chronoCanvas/index.js"></script>
- And then, use it in the js you want (online or external file) with object ChronoCanvas. Don't forget event handler!
document.addEventListener('DOMContentLoaded', function(){
chronoCanvas({
canvasTarget: yournode string
});
})