I am adding the following ScriptBundle in BundleConfig:
bundles.Add(new ScriptBundle("~/bundles/javascript").Include(
"~/Scripts/jquery-1.*",
"~/Scripts/load-image.min.js",
"~/Scripts/bootstrap.*",
"~/Scripts/bootstrap-image-gallery.*",
"~/Scripts/my.global.js"));
This is referenced at the end of my _Layout.cshtml as:
#Scripts.Render("~/bundles/javascript")
When debugging I notice that the output of this script rendering is:
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-image-gallery.js"></script>
<script src="/Scripts/my.global.js"></script>
Notice the load-image.min.js script is missing? What I want is to use that same minified script whether I'm debugging or not. Under release conditions the script is included in the bundled JS file.
I assume it's seeing the 'min', looking for an un-minified version, not finding one, then deciding what's best is to ignore it entirely. Brilliant. If I make a copy of load-image.min.js, call it load-image.js and then reference it in BundleConfig as "load-image.*" I find it is included in both configurations but what's the point of having to do that?
I assume I'm missing something here. I don't have the un-minified version and I frankly don't care about it. It's used by my Bootstrap image gallery plugin and nothing else. Any ideas out there?
This behavior has been improved (fixed) in the 1.1.0-alpha1 release. We moved all of the old default ignore list entries into a new DirectoryFilter ignore list that are only used when including search patterns like *.js which was the origional intent for this functionality. As a result this should no longer be an issue when you are including individual files explicitly.
Note: the one place this might still be an issue is if you try to include something like jquery-{version}.min.js.
There is ignoreList, which you can clear if you need, it looks like:
public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
{
if (ignoreList != null)
{
ignoreList.Ignore("*.intellisense.js");
ignoreList.Ignore("*-vsdoc.js");
ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
return;
}
else
{
throw new ArgumentNullException("ignoreList");
}
}
More details: Advanced Options of ASP.NET Bundling and Minification
Related
This question already has answers here:
Mismatched anonymous define() module
(8 answers)
Closed 5 years ago.
Let's say I have 2 files: test1.ts and test2.ts. This is the content of test1:
export const x = 1
This is the content of test1:
import { x } from './test2'
alert(x);
When I run the application, I get this error: Uncaught ReferenceError: exports is not defined at test1.js:2.
According to other posts, this error is caused by the fact that web browsers don't support export, and require(...). To solve it, one of the solution would be to use something like RequireJs.
So I've done some readings. This article has been the easiest for me to understand.
I've added this line in the _Layout.cshtml file.
<script src="~/Scripts/require.js"></script>
Create a config file.
requirejs.config({
baseUrl: '/Scripts/js'
});
I've put test1 and test2 in the /Scripts/js folder.
Run the application, but still get the same error: Uncaught ReferenceError: exports is not defined at test1.js:2.
How to fix the error using RequireJs?
Thanks for helping.
EDIT
The solution doesn't have to be RequireJs but anything the fix the problem. There are so many great tutorial on typescript, but they all assume that people are using node or angularjs. All I need is to add some typescript to my asp.net mvc app. As long it was one file, things were fine. Now I'd like to re-use some of the code, thus I organized them in different files. Unfortunately, I can't move forward because of that error. I've been sitting there for 3 days now.
EDIT 2
I've added commonJs to amd as you suggested by #artem,
{
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
}
}
now I'm getting this error.
Uncaught Error: Mismatched anonymous define()
module: function (require, exports, CommonTypes_1) {
//...
It seems like this question is dealing with the same issue. Should I put this code in a new file?
I know this is a little old, but just ran into this problem. Here's how I solved it.
This post was very helpful: https://volaresystems.com/blog/post/2014/05/27/Adding-RequireJS-to-an-ASPNET-MVC-project
First, add require.js to your BundleConfig.cs. Mine looks like this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/require.js"));
Next, make sure _Layout.cshtml renders "scripts" section after your bundles. Mine looks like this:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
Then in your view, render the scripts section like below. My Index.cshtml looks like this:
#section scripts
{
<script>
require(["Scripts/Init"],
function (Init) {
Init.Start();
}
);
</script>
}
My ~/Scripts/Init.ts file looks like this:
import * as DataBind from "./DataBind"
export function Start() {
DataBind.SetAllDatabinds(null);
}
From there, you can load in all your modules as needed. The important thing I found is to not have any "loose code" in your TypeScript files (i.e. the "alert(x)" in the example). Everything should be exported.
Attempting to use css and js files with same virtualpath bundle name
1 - is it possible ? (tried:but failed. cant define same virtual path name both for script and style)
2 - it it possible to builtup a ScriptAndStyleBundle together included with a mixed bundle ?
Just because I wantto use same name both for css and js.
//in BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/doMenu")
.Include("~/Plugins/doMenu/files/js/doMenu.js")
);
bundles.Add(new StyleBundle("~/bundles/doMenu")
.Include("~/Plugins/doMenu/files/css/doMenu.css")
);
//in _PartialLayoutMenu.cs
#Scripts.Render("~/bundles/doMenu")
#Styles.Render("~/bundles/doMenu")
result is:
<!--MENU LAYOUT-->
<script src="/Plugins/doMenu/files/css/doMenu.css"></script>
<link href="/Plugins/doMenu/files/css/doMenu.css" rel="stylesheet"/>
<!--/MENU LAYOUT-->
any clue ? or I want such a useless mind ?(thanks)
I'm using Cassette, which does support this feature.
Configuration:
bundles.Add<ScriptBundle>(BundleNames.Grid,
new[] {"~/Scripts/Grid.js"},
bundle => bundle.AddReference("~/" + BundleNames.Base));
bundles.Add<StylesheetBundle>(BundleNames.Grid,
new[] {"~/Content/Grid.less"});
BundleNames is a helper class I have with constant strings.
Reference bundles in views:
#{
Bundles.Reference(BundleNames.Grid);
}
As you'd expect, this will include all CSS and JS, in the correct order.
I'd also mention that I've started using Cassette before ASP.Net had bundle management and I'm very happy with it. I didn't find any interesting feature ASP.Net had that I'm missing.
Bundle names should be unique within the both styles and scripts. And since they are entirely different types you cannot mix them into a single bundle because then you wouldn't know how to reference it in the DOM: whether you should use a <script> or a <style> tag. Unfortunately what you are asking for is not possible.
I'm working on an MVC 5.0 (.Net 4.5) application where I need to apply a custom JavaScript transform to my included bundle files. One of those files, which I'm calling dummy.js for illustration purposes, has a minified file called dummy.min.js.
I created a custom script transform to replace injected window.jQuery references with a different expression. Everything works fine when I run locally and in debug mode, but when debug mode is turned off in the Web.config file, the Bundle returns the contents of the dummy.min.js file, but my script transform is not applied to it. It only gets applied to JavaScript files that don't have an associated .min.js file.
Does anyone have an idea on how to resolve this? It almost sounds like a bug in MVC.
A workaround is to remove the minified file. This post kind of addresses my situation by suggesting removing the .min.js file since MVC minifies by default, but I'm looking for an alternative solution (if any).
Thank you so much in advance.
Here's how to reproduce the above:
If you're interested in reproducing my issue, here's a quick BundleConfig and the actual custom script transform. It replaces all instances of window.jQuery with window.$jq1_9||window.jQuery, assuming it is injected via a self-executing anonymous function.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(
new ScriptBundle("~/bundles/dummy")
.Include("~/Scripts/dummy.js", new InjectedJQueryVariableRewriteTransform()));
}
}
public class InjectedJQueryVariableRewriteTransform : System.Web.Optimization.IItemTransform
{
public string Process(string includedVirtualPath, string javaScriptCode)
{
// TODO: I understand this approach is naiive, but it does the trick for now.
return javaScriptCode.Replace("window.jQuery", "window.$jq1_9 || window.jQuery");
}
}
If you have Visual Studio 2012 and MVC 4, you will need version 1.1.0 of the System.Web.Optimization assembly, which you can obtain by running the following command in the Nuget Package Manager. At time of writing it installs version 1.1.2 of the package.
Install-Package Microsoft.AspNet.Web.Optimization
Here's the sample JavaScript dummy.js. You can create a copy of it and name it dummy.min.js:
(function ($) {
"use strict";
// TODO: Do something interesting...
})(window.jQuery);
Set the debug attribute to false in the following element in Web.config:
<compilation debug="false" targetFramework="4.5" />
Assuming the application's port is 9221, render the bundle in Firefox or Chrome:
http://localhost:9221/bundles/dummy
You will see that when debug is set to true, the transform is applied, as shown below:
(function(){"use strict"})(window.$jq1_9||window.jQuery)
When it is set to false. It is ignored and only the .min.js file is used:
(function(){"use strict"})(window.jQuery)
If you add this line:
bundles.FileExtensionReplacementList.Clear();
you will remove the rule for using .min files when bundling is enabled. You will remove all rules, unfortunately, so if you need any of the other ones you'll need to add them manually. Also, this will change the rules for all bundles.
If you just want to disable these replacement rules for just one bundle, you can just set the EnableFileExtensionReplacements property to false on that specific bundle:
var bundle = new ScriptBundle("...");
bundle.EnableFileExtensionReplacements = false;
Is there any way we can make the ASP.NET 4.5 Bundling functionality generate GUID's as part of the querystring when running in debug mode (e.g bundling turned OFF).
The problem is when developing locally, the scripts/CSS files are generated like this:
<script type="text/javascript" src="/Content/Scripts/myscript.js" />
So if i change that file, i need to do a hard-refresh (sometimes a few times) to get the file to be picked up by the browser - annoying.
Is there any way we can make it render out like this:
<script type="text/javascript" src="/Content/Scripts/myscript.js?v=x" />
Where x is a GUID (e.g always unique).
Ideas?
I'm on ASP.NET MVC 4.
Until the NuGet package is patched as per the other answer above, for now i've ended up using the same wrapper code i did for the beta NuGet package:
private static IHtmlString JsUnbundled(this HtmlHelper htmlHelper, string bundlePath)
{
var jsBuilder = new StringBuilder();
foreach (var file in BundleResolver.Current.GetBundleContents(bundlePath))
{
var tagBuilder = new TagBuilder("script");
tagBuilder.Attributes["src"] = file.AddCacheKey(); // add GUID
tagBuilder.Attributes["type"] = "text/javascript";
jsBuilder.AppendLine(tagBuilder.ToString());
}
return MvcHtmlString.Create(jsBuilder.ToString());
}
I then have another HTML helper which checks if debug, then uses the above - otherwises uses Scripts.Render.
Obviously this doesn't do any kind of hashing of the file - it will ALWAYS request the file. But i don't mind this, as it's only for debug.
We don't currently examine the contents of the files in debug mode, but we could add this feature.
I filed it as an issue on codeplex here.
Try HashCache: https://github.com/kemmis/System.Web.Optimization.HashCache
Execute the ApplyHashCache() extension method on the BundlesCollection Instance after all bundles have been added to the collection.
BundleTable.Bundles.ApplyHashCache();
This will add content hashes to the script/style tags output when in debug mode.
I have a WebForms app that I'm converting to MVC, but for now running legacy stuff side-by-side.
For some reason, the ScriptManager left to it's own devices tries to load the following files from a very strange (and non-existent) location:
<script src="Scripts/WebForms/MsAjax/MicrosoftAjax.js" type="text/javascript"></script>
...
<script src="Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js" type="text/javascript"></script>
I can't find the setting of that location, and googling "Scripts/WebForms/MsAjax" brings back nothing.
Changing the (obsolete) ScriptPath property on the ScriptManager does nothing to help with these two scripts.
Trying to override the Path location like the following also does not work (it just tries to load both scripts)
Scripts.Add(new ScriptReference { Name = "MicrosoftAjax.js", Path = ContextUtil.MapApplicationPath("~/My/Script/Location/MicrosoftAjax.4.0.js") });
Scripts.Add(new ScriptReference { Name = "MicrosoftAjaxWebForms.js", Path = ContextUtil.MapApplicationPath("~/Shared/Scripts/Legacy/MicrosoftAjax/MicrosoftAjaxWebForms.4.0.js") });
What I can't understand is
Why is it not loading the scripts by default from a Embedded Resource?
Where is this strange path coming from?
Why won't it accept my overridden script paths?
Can anyone help?