JS - Can't combine lib files

Question

I have multiple lib files in an an index.html file, that are loaded in proper sequence for an app I am running.

<!-- example of some of them... --> <script src="/./sys/lib/jquery.min.js"></script> <script src="/./sys/lib/jquery.ui.min.js"></script> <script src="/./sys/lib/jquery.easing.min.js"></script> <script src="/./sys/lib/underscore.min.js"></script> <script src="/./sys/lib/handlebars.min.js"></script> <script src="/./sys/lib/backbone.min.js"></script> <script src="/./sys/lib/moment.min.js"></script> <script src="/./sys/lib/libs.extensions.js"></script> 

These run fine, they are already all minified.

Now, I want to combine these all into one file for load speed:

<script src="/./sys/lib/libs.all.js"></script> 

So I open up the new libs.all.js file, and one by one paste the minified .js files into it, with zero modification, in the exact same sequence as listed above. This works until I get to moment.js. When I then paste that in and run it, I get a JS error.

TypeError: (intermediate value)(...) is not a function 

I don't get what I am missing - if I paste them in the right sequence as they synch loaded in the HTML file, what is the difference?

Answer 1

Most probably one of your js files is missing a ; at the end. Open up the one you believe is causing the error and add a ; at the end, or add a ; to the very first line of the next js file.

Answer 2

Modifying the javascript code is not fixing the root cause of the problem so this could happen again as soon as you introduce a new JavaScript file.

You have at least few choices for a permanent fix - they involve changing the build so that this cannot happen in the future, even if a semi-colon is missing:

• Inject a ; between the files you are concatenating. This is usually a simple one-line change depending on how you are concatenating the files.
• Minify the files first and then concatenate. This should leave a \n between the files you are concatenating, allowing ASI to take care of this for you.