How can I include a set of JS files in my Karma Config that are dynamically loaded in my code?
I'm not sure how I can load those files dynamically. We are trying to avoid having to download them and maintain them separately.
Google hasn't helped much so some help would be great.
Create a js file that loads them and add this to the list of files in the karma conf somewhere near the top.
I think there are two ways to do this kind of thing:
Include the files in the files array, specifying a pattern and setting include to false.
Have a look to the RequireJS page on the Karma website for an
idea on how this works.
Use proxies. Have a look on the Karma configuration page.
Related
I have multiple javascript files that are bundled and minified in one file "bundle-min.js" and is linked in one of my html page. Now I want to introduce versioning in those js files. Means when I change any of my js file, I want my bundle file version to be updated. I have found gulp-version-append but I am not sure whether it will help me or not. Also I don't want to update the reference link of bundle-min.js in my html file again and again. I want my html page to get the latest version it self somehow. Is this possible and what's the best approach? Any help?
There are plenty of modules available for this. it depends on your module loader.
Webpack
https://www.npmjs.com/package/webpack-version-file-plugin
https://www.npmjs.com/package/versioning-webpack-plugin
or you can use define plugin for this
https://webpack.js.org/plugins/define-plugin/
Refer
How can I inject a build number with webpack?
Do i have to include all my javascript file while loading main index page?
In single page application when we are not logged in, we include all of our .js file in main index file. This contains js file that is only needed when users are logged in.
What is better approach of managing angular app in this context?
Simple answer: yes.
Your application is a single-page one, so you can combine all JS files into one and load it at one request. It saves time for processing in the future.
Alternatively, create two pages login.html and others.html, then load two different sets of JS files accordingly.
Normally, nowadays the bandwidth is not the bottleneck, loading a larger JS file does not make trouble (usually).
You can split your code into multiple modules and then just load the js needed for that module.
I suggest using Gulp with packages to inject HTML when appropriate. You then have single lines of code as place holders for your Javascript and you run the Gulp task to inject the Javascript into the areas where it is needed.
You could also run gulp tasks to minify your js into just a few minified files. You will need to be sure your js in min safe (gulp can do this too).
If you make AMD - most often using RequireJS - then you won't need to include all from the very beginning.
A while ago we did a similar project, although without AngularJS, and by using RequireJS we made the different pages, which use different files. And this way people's browsers will never download certain files if they never go to certain pages.
(Of course, we had many pages inside the app, not just 2 or 3, where this wouldn't make any difference.)
The homepage for blanket.js says I only need to data a data-cover attribute to my script tags.
But how is blanket.js supposed to modify the files before they are run?
The documentation on Github says its first step is
Loading your source files using a modified RequireJS/Require script.
Do I have to use RequireJS to get blanket.js to work?
(I cannot find anywhere where this is documented.)
Currently, I do not use requireJS, and currently, blanket.js is not working. Could this be the cause of the problem?
A while ago, Blanket used Require.js internally - I don't know if this is still true. Though, require.js was bundled with the blanket.js file. So no, you don't need to include require.js.
What you may need to include is an adapter for your Unit test Framework. https://github.com/alex-seville/blanket/tree/master/src/adapters
I've got a rails app with a couple .js files that refuse to work together. I want to try making the highcharts.js and it's modules to be page specific. The problem is that since they're from a gem, I don't know how to locate them and put them in subfolders of app/assets/javascript. Has anyone solved any similar problems befores?
Why do you use gem for that? You can grab highcharts files directly from http://www.highcharts.com/
I was able to place the require statement in a folder and file specifically made for the controllers that would use the highcharts scripts. I added javascript_include tags to reference the script files.
I took a snapshot of the jquery.js file and jquery-ui files that I use and dumped them into a giant .js file with all of the other .js files that I use for my site.
When I do just this with no minfication/packing, the files stop working and I get "recursion too deep" errors on the file when I try to load it on my site instead of the usual .js files. All of the errors came from jquery and jquery-ui. Using a simple numbering scheme I made sure that the jquery.js/jquery-ui files were the first listed in the file and in the correct order (the same as includes as individual files.)
Two questions:
1) Doesn't the include tags for JavaScript have the same effect as dumping all of the files into one giant file? Is there extra isolation/insulation that JavaScript files get from being in their own script tags or in different files?
2) My goal is to make my site faster by having one huge .js file with all JavaScript I ever use in my site (which is heavy in JQuery) and minify that file. Why is this misguided? What is a better way to do it?
NOTE: Google's CDN version of the JQuery files don't work for me, all of the JQuery plugins/themes I use don't work with Google's versions (anyway who says that they can successfully use Google's CDN is lying.)
UPDATE: Thanks for the good advice in the answers, all of it helped me learn more about deploying JavaScript files on a production server. I am actually always using the latest SVN branch of the JQuery UI plugins and there were errors in the UI plugins that prevented them from being merged together with my files. I got the latest Theme Rolled plugins that are already minified in one file and that worked around the problem.
Probably your JavaScript files have some syntax errors. Browser can correct them when loading files one by one, but fail when "bad" files combined. You can try to compile your file using Rhino compiler (http://www.mozilla.org/rhino/)
java -cp build/js.jar org.mozilla.javascript.tools.jsc.Main giant.js
Also you can use JSLint validator (http://www.jslint.com/), thought likelly it will not be able to handle jQuery. But you still can combine all your files and validate them.
I'd recommend using a script manager such as this one to only register the files and plugins you need, and load them on the fly.
This keeps your requests to a minimum, and you don't have to load some huge 300k JS file one very page.
Another problem could be the load order changed. Most JavaScript files should be load order independent, but if you load jquery at the end after you have your:
$(document).ready(function() {});
you'll run into problems.