minified js bundle search for required files on IE - javascript

I am using web essential to generate the bundle file for javascript. It also generate the minified file for bundled js. Generate bundle works on all browsers except IE & edge. When i hit webpage on IE it start searching for files which are included in bundle and throws file not found error in console window. I am not getting it why IE is giving such error. This is only not working for js bundle but working for css files.If I remove .min and use only bundled js file then it works But I want to use min.js file. I had used same in past and it was working on all browsers.
What could be possible issue?

Related

WebStorm highlights all $-operators as "unknown" in a jQuery project

Maybe a newbie-question:
Why does my WebStorm IDE not recognize any jQuery code when on the other side the created page works well in the browser?
That's what I did:
I've installed WebStorm Version 2018.2.6.
Then I downloaded a simple jQuery demo project, this one:
http://javascriptbook.com/code/c07/example.html (the html-file, the css file and the .cs file).
Then I downloaded a minified jQuery, "jquery-3.3.1.min.js".
I put all the files in a folder, changed the relative paths and updated the jQuery filename, so in the html file it reads "<script src="jquery-3.3.1.min.js"></script> <script src="code.js"></script>"
When I view that via WebStorm (=when I launch Chrome and WebStorm provides the webserver), then everything works perfectly. Animation is done just nicely.
However, in the WebStorm IDE all occurrences of the $ operator in the .js file are marked as "unresolved function".
I found these articles:
phpstorm unresolved function or method $()
I can't add jQuery to WebStorm, why?
So I went to Languages & Frameworks | JavaScript | Libraries and download&installed "jquery". It's then listed as "#types/jquery".
However, the error highlighting is still there.
Do I need to make more source mofications or how do I get that working?
Types resolving won't work when using minified library version, but downloading typings (#types/jquery) should work:
make sure that the library is downloaded properly (can you see it in External libraries list in the Project tool window?); invalidating caches (File | invalidaate caches, Invalidate and restart) can also help

How to use Bundler and Minifier in deployable web applications and installer projects

This is about how to use Visual Studio 2017 with both Bundler and Minifier and also the "Visual Studio Installer Projects" extension.
My web app has only one main page, so the <script> tags are all there on one ASPX page, about 40 of them as there are 40 JS files. When I run bundler and minifier, I want one script tag to point to the bundled and minified JS which is now in one file (and CSS is also bundled from 7 files to one)
When running in release mode I want to use the bundled and minified version so its a simulation of what will be running when live.
When running in debug mode I want to use the unbundled files so I can debug the javascript in the IDE and see the CSS in f12 etc.
I think this means that my one page, a.aspx, has to have two versions ?
When building using the installer projects extension, I want to build only in release mode and that would be using the single bundled JS and CSS files, I don't want the other uncompressed javascript and CSS files shipping in the project even though I want them there when debugging.
How do we go about setting up a project to achieve this ? Is it even possible ? or do people write code to copy out the projects and edit the project files before compilation ?
thanks in advance

MVC5 bundle url version and content are missing

In my MVC5 web application I use two bundles for a page, one contains the common JavaScript files for all the pages and the other bundle is specific for the page. This works fine in development environment but the page specific bundle does not load in the staging. The Rendered script tags are as below.
<script src="/bundles/jsAll?v=72eJMPeVrT1mvbZw1VAU7y6r7vodOImt5NOMq4Gcp581"></script>
<script src="/bundles/my-page?v="></script>
Could not figure out why this happens...
The problem was locally this works because all the files are available, but did not work after deployment because the script file was not included to the project, hence the file does not get deployed to the destination. Since the file is missing the bundle has nothing to serve, so there won't be a version nor content.

ASP.NET bundling and minification failing on angular.js

When I turn on bundling everything bundles and minifies correctly except my angular.js file.
I get the following error:
"Minification failed. Returning unminified contents. (173,115-122):
run-time error JS1019: Can't have 'break' outside of loop: break a"
However it seems to return a minified result and the site doesn't load.
I have tried updating the file to angular 1.5.8, and tried bundling the .min.js file but no success.
What I end up doing is just remove angular.min.js from project and let ASP bundling process to minimize angular.js and produce final minimized package.
Sometimes I had to do same trick with other JS libs (if my memory serves JQquery..)
Also in our solution we use .min.js files, but devs forget to regenerated this file from source and there were cases when release version had "fixed" but not fixed version of the file. I gave up fighting with this and just deleted all .min.js files. -))

Javascript files working on Chrome when accessed through Node.js server, but not working when opened from folder

Yesterday I split my single Javascript file into multiple files. When I tried to export/import the additional files, I was getting an error ("Unexpected token export" and "Unexpected token import"). When I removed the export/import lines, the code worked fine through my basic Node.js server.
I was checking something else just now and opened the file in Chrome from the folder (i.e., not through the server but opening the HTML file directly) and got an error, which I tracked down to a lack of sharing between the multiple JS files. I added the export/import commands again and got the original error.
What's odd is that the code works on the server in Chrome, works on both the server and from the folder in Firefox, but does not work from the folder in Chrome.
Why might it be that (1) I was prevented from using the export/import commands, and (2) I'm getting a perplexing combination of success and failure by launching the file in these different ways?
Export and Import are keywords introduced by ECMA2016 Specs.
These are not yet supported by latest node out of box. If it worked then am pretty sure you're using babel to transpile the code on the fly. (check in your package.json)
Also modules are not yet supported in browser either.
Hence a bundling system like webpack or browserify needs to be in place to bundle all your javascript modules into one file to make them work on browser. Also, if you're using import and export in those files instead of CommonJS module style require('') , then you need to add babel transpilation as a plugin in your bundling tool as well.
http://blog.andrewray.me/how-to-use-es6-in-nodejs/
https://github.com/babel/babel-loader
Note: Babel6 has brought in a lot of changes which may not work in the traditional way .so make sure which babel version you're using.

Categories