0

hi can anyone please tell me how to imports all the javascripts files and stylesheet files within a common file and import within the html

<script src="common.js"></script>
<link href='common.css' rel='stylesheet'>

say

jquery.js, 
angular.js, 
bootstrap.js, 
flot.js....etc

within a single common.js file, similarly

bootstrap.css, 
flot.css
alerts.css
models.css.....etc

within a single common.css file

If doing like this import is there any drawbacks?

Alex Man
  • 4,746
  • 17
  • 93
  • 178

1 Answers1

1

Your javascript question has an answer here: Including a .js file within a .js file, but note that you need to be careful. If your files contain code that executes when it loads, but depend on the contents of another file, it may not work well.

For multiple files, you'd work with a list (array, probably) of script names, and then call a function on each to add it:

function addScript(script) {
    var x = document.createElement('script');
    x.src = 'http://example.com/' + script;
    document.getElementsByTagName("head")[0].appendChild(x);
}

Your stylesheet question can be addressed by simply using @import: https://developer.mozilla.org/en-US/docs/Web/CSS/@import. Some downsides to that (performance) are covered here: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Neither of these approaches assume a flat-text file with just filenames in them, but that could be accomodated either with Javascript or a bit of server-side code (or a build script, which is likely the best approach, that reads in the files, minifies, compresses, and merges them).

Community
  • 1
  • 1
Pete Scott
  • 1,516
  • 10
  • 10