How can I include all JavaScript files in a directory via JavaScript file

Question

I have a bunch of JavaScript files that I would like to include in the page  but I don t want to have to keep writing    lt script type  text javascript  src  js file js  gt  lt  script gt    So is there a way to include all files in a directory  unknown size   Can I do something like       getScript  js   js          to get all the JavaScript files in the  js  directory  How can I do this using jQuery

User · Answer

It can be done fully client side  but all javascript file names must be specified   For example  as array items    function loadScripts       var directory    script       var extension     js      var files     model    view    controller         for  var file of files           var path   directory   file   extension          var script   document createElement  script           script src   path         document body appendChild script

User · Answer

You can t do that in JavaScript  since JS is executed in the browser  not in the server  so it didn t know anything about directories or other server resources   The best option is using a server side script like the one posted by jellyfishtree

User · Answer

In general  this is probably not a great idea  since your html file should only be loading JS files that they actually make use of  Regardless  this would be trivial to do with any server-side scripting language  Just insert the script tags before serving the pages to the client   If you want to do it without using server-side scripting  you could drop your JS files into a directory that allows listing the directory contents  and then use XMLHttpRequest to read the contents of the directory  and parse out the file names and load them   Option  3 is to have a  loader  JS file that uses getScript   to load all of the other files  Put that in a script tag in all of your html files  and then you just need to update the loader file whenever you upload a new script

User · Answer

What about using a server-side script to generate the script tag lines  Crudely  something like this  PHP  -   handle   opendir  scripts      while    file   readdir  handle      false        echo   lt script type  text javascript  src       file      gt  lt  script gt       closedir  handle

User · Answer

I was looking for an answer to this question and had my own problems  I found a couple solutions in various places and put them together into my own preferred answer    function exploreFolder folderURL options      options                  type            explaination        REQUIRED   callback   FUNCTION        function to be called on each file  passed the complete filepath     then                    FUNCTION        function to be called after loading all files in folder  passed the number of files loaded     recursive               BOOLEAN         specifies wether or not to travel deep into folders     ignore                  REGEX           file names matching this regular expression will not be operated on     accept                  REGEX           if this is present it overrides the  ignore  and only accepts files matching the regex      ajax       url  folderURL      success  function data           var filesLoaded   0          fileName                  data  find  td  gt  a   each function                fileName     this  attr  href                 if fileName                          return     to account for the  go up a level  link              if        test folderURL   fileName                   return    if the url has two consecutive slashes                   if options accept                   if  options accept test fileName                         if accept is present and the href fails  dont callback                     return               else if options ignore                  if options ignore test fileName                         if ignore is present and the href passes  dont callback                     return               if fileName length  gt  1  amp  amp  fileName substr fileName length-1                           if options recursive                        only recurse if we are told to                     exploreFolder folderURL   fileName  options                   else                     return               filesLoaded                options callback folderURL   fileName                 pass the full URL into the callback function                     if options then  amp  amp  filesLoaded  gt  0  options then filesLoaded                 Then you can call it like this   var loadingConfig         callback  function file    console log  Loaded file      file          then  function numFiles    console log  Finished loading     numFiles     files           recursive  true      ignore    NOLOAD      exploreFolder   someFolderURL    loadingConfig     This example will call that callback on every file folder in the specified folder except for ones that start with NOLOAD  If you want to actually load the file into the page then you can use this other helper function that I developed   function getFileExtension fname       if fname          return fname substr   -fname lastIndexOf       gt  gt  gt  0    2       console warn  No file name provided      var loadFile    function filename       var img   new Image         return function            var fileref              filename   arguments 0               filetype   getFileExtension filename  toLowerCase             switch  filetype                case                     return              case  js                   fileref document createElement  script                    fileref setAttribute  type   text javascript                    fileref setAttribute  src   filename                   break              case  css                   fileref document createElement  link                    fileref setAttribute  rel    stylesheet                    fileref setAttribute  type    text css                    fileref setAttribute  href   filename                   break              case  jpg               case  jpeg               case  png               case  gif                   img src   filename                  break              default                  console warn  This file type is not supported    filetype                   return                    if  typeof fileref     undefined                  head   append fileref               console log  Loaded file      filename                           This function accepts a JS   CSS    common image  file and loads it  It will also execute the JS files  The complete call that needs to be run in your script to load all images and  stylesheets and other scripts could look like this   loadingConfig         callback  loadfile      then  function numFiles    console log  Finished loading     numFiles     files           recursive  true      ignore    NOLOAD      exploreFolder   someFolderURL    loadingConfig     It works amazingly

User · Answer

You can t do that in Javascript from the browser    If I were you  I would use something like browserify  Write your code using commonjs modules and then compile the javascript file into one   In your html load the javascript file that you compiled

User · Answer

Given that you want a 100  client side solution  in theory you could probably do this   Via XmlHttpRequest  get the directory listing page for that directory  most web servers return a listing of files if there is no index html file in the directory      Parse that file with javascript  pulling out all the  js files   This will of course be sensitive to the format of the directory listing on your web server   web host   Add the script tags dynamically  with something like this   function loadScript  dir  file     var scr   document createElement  script     scr src   dir   file   document body appendChild scr

User · Answer

You could use something like Grunt Include Source  It gives you a nice syntax that preprocesses your HTML  and then includes whatever you want  This also means  if you set up your build tasks correctly  you can have all these includes in dev mode  but not in prod mode  which is pretty cool    If you aren t using Grunt for your project  there s probably similar tools for Gulp  or other task runners

User · Answer

jellyfishtree it would be a better if you create one php file which includes all your js files from the directory and then only include this php file via a script tag  This has a better performance because the browser has to do less requests to the server  See this  javascripts php    lt  php      sets the content type to javascript     header  Content-type  text javascript           includes all js files of the directory    foreach glob  packages   js   as  file          readfile  file          gt     index php    lt script type  text javascript  src  javascripts php  gt  lt  script gt    That s it  Have fun

User · Answer

Another option that is pretty short    lt script type  text javascript  gt    ajax     url    js partials     success  function data          data  find  a contains  js    each function               will loop through          var partial    this  attr  href              getScript    js partials     partial  function  data  textStatus  jqxhr                          lt  script gt

[javascript] How can I include all JavaScript files in a directory via JavaScript file?

Examples related to javascript

Examples related to jquery

Examples related to getscript