We do not give bandla spoil your life

Recently I ran into the problem of bandl conflict in a MVC project, it happened that some scripts were connected several times in different bundles. Distinguishing an extra script from one of them can lead to a serious headache, because the same bundle can be used on different layouts.

I saw different ways of grouping scripts, but to be honest, I didn’t like one of them completely. How can we group scripts in such a way that it would be most difficult to get confused in them and not have to bother about conflicts of different bundles on the same page? For myself, I came up with an approach that, in my opinion, will simplify life. I will be very happy to receive healthy criticism and useful advice.


')
To begin with, let's try to analyze a couple of approaches for grouping scripts:
The first approach is grouping according to the general purpose of the scripts.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); 

Simple enough and there shouldn't be any problems, but this approach is not enough. Custom scripts also somehow need to be grouped. This is where the second approach comes in - combining scripts into some kind of basic bundle.

 bundles.Add(new ScriptBundle("~/Scripts/base").Include( "~/Scripts/placeholder.js", "~/Scripts/modernizr-*", "~/Scripts/my-custom-script-1", "~/Scripts/my-custom-script-2)); 

And then the question arises what to include here. Jquery seems to be a basic script, but for it we already have a separate bundle. The same story can happen with any other script that one of the developers in a large team considers to be included there. Thus, the more opinions - the more unexpected problems with grouping scripts.

I chose the following path for myself:
1. For each layout - 1 bundle.
I call the bundle with the same name as the layout itself and decide the headache with what to connect, where to connect and how much to connect.

2. Bundles are connected only on the layouts.
The result: how many layouts - so many of the same name bundles.

If here you have a storm of indignation, then hold them to the end of the path when the whole picture is formed.

3. Introduce the concept of groups, which will be just an array of strings.
The group combines all the necessary scripts for a particular functional. Here is an example of a group of scripts for rendering reports with graphs on svg canvases:

 var reportScriptGroup = new[] { "~/Scripts/jquery-{version}.js", "~/Scripts/raphael.js", "~/Scripts/Custom/charts.js", "~/Scripts/Custom/report.js" }; 

Suppose that in the same layout you need client validation, we add a group for validation:

 var validationScriptGroup = new[] { "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.validate.js", "~/Scripts/jquery.validate.unobtrusive.js", "~/Scripts/Custom/jquery.custom.validate.js" }; 

Note the presence of jquery- {version} .js in both groups, but this does not prevent us from adding both groups to the same bundle. He will take care to make the distinction.

 bundles.Add(new ScriptBundle("~/Scripts/_DashboardLayout") .Include(baseScriptGroup) .Include(validationScriptGroup) .Include(reportScriptGroup) ) ); 

4. I also needed to exclude the script from the group in order not to create a new one.
For example, a script that shows the page gradually splaying it. It is in the baseScriptGroup group. I don’t need it at all on the layout to prepare all good for printing or converting to pdf, etc.

Let's write a simple method to exclude a script from the group:

EDITED : according to the lair user, you can use the Except method

 private static string[] Exclude(this IEnumerable<string> input, params string[] items) { var output = input; foreach (var item in items) { output = output.Where(x => x != item).ToArray(); } return output.ToArray(); } 

A bundle for him will look like this:

 bundles.Add(new ScriptBundle("~/Scripts/_PrintLayout") .Include(baseScriptGroup.Exclude("~/Scripts/Custom/fading.js")) .Include(reportScriptGroup) ) ); 

That's all. This way, you can simply merge groups into a bundle. I wanted to connect the charts - I added a group with charts to the bundle. Wanted validation - add it.