create client side Javascript library

Question

I created some code for my project that I want to use for other projects too. This code is independent and is separated in a folder.

This package draws on a canvas by taking some data and the canvas id.

To make this work I currently have to include all the files within my folder

<script src="../shared/diagramViewer/client/diagramViewer.js"></script>
<script src="../shared/diagramViewer/client/drawer.js"></script>
<script src="../shared/diagramViewer/client/helper.js"></script>
<link rel="stylesheet" type="text/css" href="../shared/diagramViewer/style/tooltip.css">

In my JS code I can use this code by writing

const diagramViewer = new DiagramViewer(data, "myCanvas");

The diagramViewer itself got some functions and manages the data

function DiagramViewer(initialData, canvasId) {

    this.foo = function () {
        // 
    };

    this.bar = function () {
        // 
    };
}

How can I link the whole folder to my HTML file instead of linking each file on its own?

In NodeJs I would go for something like

const diagramViewer = require('diagramViewer');
diagramViewer.init(data, "myCanvas");

but what is the equivalent for HTML?

I have to support IE 9

Answer 1

You could use Browserify for this. The official Documentation is https://github.com/browserify/browserify#usage . You can use the require statements like Node.js and it can also bundle the files together like webpack.