how to include javascript libraries in my own script

Question

I have written some functions in javascript and I've put them in a separate JS file (visualisations.js). The functions I've written use several other javascript libraries, at the moment these libraries are all included in my HTML page, so I have 7 lines like this

<script src="JS/jquery-1.9.1.min.js"></script>
<script src="JS/raphael.2.1.0.min.js"></script>
<script src="JS/justgage.1.0.1.min.js"></script>
<script src="JS/jquery-ui.js"></script>
<script src="JS/jquery.ui.touch-punch.min.js"></script>
<script src="JS/dygraph-combined.js"></script>
<script src="JS/visualisations.js"></script>.

My question: is there a way to include the libraries into my own JS file (visualisations.js) so eventually I only need to include my own JS file in the HTML file and not write 7 lines to include all the libraries.

Any suggestions? Please keep your answer understandable, I'm no advanced programmer.

Grtz Stijn

There are some libraries that help with issues like this, like requirejs. You can also do library groupings (paste everything together) ... honestly tho, I wouldn't be concerned. Unless you have some good reason to need a "very optimized" page. — Bosworth99, May 06 '13 at 14:46
@Bosworth99 i'm not concerned for optimization but for ease, the library i'm writing will be used by other people and the people i'm making this for would like to have it so you only need to type 1 line which includes everything they need. — Stijn De Schutter, May 06 '13 at 14:53
@StijnDeSchutter Then you also will have to take into account the fact that so many websites already use jQuery. If they include your script and their site already includes jQuery and jQuery UI, that can have a big impact on the sites load time if you load it a second time. — Kevin B, May 06 '13 at 15:01
@KevinB yeah you are right, well to hell with this idea, the company I'm doing this for will just have to take it as I make it. If they already use jquery then they don't need to include it anymore or if they don't need vector graphics then can remove the line for the raphael library. — Stijn De Schutter, May 06 '13 at 15:16

score 2 · Answer 1 · answered May 06 '13 at 14:49

There are a lot of tools around though they seem overkill for what you have to do.

I think your best bet would be to take those files and copy paste them into one single file.

If you want to use a tool, since you require it (and its complexity :D) then I would recommend trying out grunt, it is easy to set up and if you'll ever need to expand it to suit further needs it will be almost hassle free, for example, to concatenate:

grunt.initConfig({
  concat: {
    dist: {
      src: ['libs/first.js', 'libs/second.js'],
      dest: 'out/first-and-second.js'
    }
  }
});

score 1 · Answer 2 · answered May 06 '13 at 14:42

1

There are multiple tools that do what you want:

http://requirejs.org/

https://developers.google.com/closure/compiler/

answered May 06 '13 at 14:42

fmsf

36,317
49
147
195

This would be considered a link only answer and is probably better suited as a comment. You could improve it though by explaining how each tool you linked to can solve this problem. – Kevin B May 06 '13 at 15:03

score -1 · Answer 3 · answered May 06 '13 at 14:43

-1

write a function with the next line for each js :

document.write('<script type="text/javascript" src="JS/jquery-1.9.1.min.js"></script>');

answered May 06 '13 at 14:43

elopez

109
9

how to include javascript libraries in my own script

3 Answers3