I installed UglifyJS2 in my ASP MVC 4 Project in Visual Studio as command line tool and used it to uglify a js file i wrote. I need to keep the function names as they are so i set --keep-fnames.
So far so good after i tried the following command i got my uglified file containing the function names:
uglifyjs sample.js --compress --mangle --keep-fnames --output sample.min.js
But as soo as i edited the uncompressed file i recognized that there was a so called source map which automatically compresses the new version to the .min.js file.
I want to use this source map but the problem is it doesnt keep my function names of the original javascript file and i found no solution to set the compression options anywhere in this source map file, neither i found any soultion in the web...
EDIT
After a little bit of research i found out that the source map comes from an extension for visual studio (webessentials 2012). Still i did not found any documentation about how to config the source map (if it is even possible).
Related
I am the author of TreeJS. So far, I use TypeScript to generate the build file (plain browser-understandable JS), a Type Definitions file, and a map file for the unminified build. I use an external tool called Minify to minify the build.
My question is, should I also create a map file for the minified build, or the map file for the unminified build will work with the minfied one?
And, If I do need to build a map for that, does anyone know any tools?
Since it is your library, you don't need to do anything you don't want, but source maps can be huge help for your users. Minify uses terser to minify JavaScript, and terser can generate composed source maps. I never worked with Minify, but it seems like you can pass map generated by typescript in options.
I am new to JavaScript and came across this practice of minimizing javascript files. I however couldn't find any tool Online or in VS code which could maximize my js code using an attached source file.
Here are the files that I have
a.js:
webpackJsonp([1],{681:function(... One line code
//# sourceMappingURL=a.js.map
a.js.map:
{"version":3,"file":"a.js",...
Which Online or VS Code tool can I use to unuglify my code?
Background:
I've tried uglify-js in the terminal
loc/to/uglifyjs/binary a.js -b --source-map a.js.map -o a_unuglified.js
I got an error saying a.js.map is not a supported map. I've also tried using VS code plugins but none of them seem to work.
EDIT
The following worked:
1) loc/to/uglifyjs/binary a.js -b -o a_unuglified.js --source-map "filename='a.js.map'"
2) Using developer tools as Jon suggested
However, the unuglified code still had unknown symbols and variable names. I looked around and realized that that it is equivalent to compressed binary code and that it would be near impossible to get the original code. That compelled me to look for the source code which I instantly found.
TLDR
Look for original source code if you have that option instead of trying to unuglyfy.
Just an update to this question, the uglify-js API changed a little. Currently, it'd be something like:
npx uglify-js ugly.js -b --source-map "filename='ugly.js.map'" -o beauty.js
Take a look at https://developers.google.com/web/tools/chrome-devtools/javascript/reference#format. So, if you can load your code into the Chrome browser, you can make a minified JS file readable via the Developer Tools, and copy/paste from there...
(Quick edit... In fact, take a look at https://stackoverflow.com/a/36554691/7696162, as I think that answers your question.)
Would like to try this Rhino Debugger however having problems
I downloaded latest from here according to doc it says just simply run:
java org.mozilla.javascript.tools.debugger.Main [options] [filename.js] [script-arguments]
however..it's source code, so I probably need to build it first...(unless there are precompiled download out there?). Assuming I need to build it to get the jar file for debugger, I assume just build the build.gradle file at the root dir. Or run gradle tasks build ? When I do that I get error:
Execution failed for task ':checkstyleMain'.Unable to create a Checker: configLocation {C:\rhino\rhino-1.7.8\checkstyle.xml}, classpath {C:\rhino\rhino-1.7.8\buil
dGradle\classes\java\main;C:\rhino\rhino-1.7.8\buildGradle\resources\main}.
So..I'm a bit lost. Been ten years since I've worked with Java, but hopefully I'm missing something simple.
Any experienced Rhino JavaScript devs out there that can point me in the right direction? Should I just stick with using Eclipse? (Had that working, but I'm still curious about this debugger)
Download the latest rhino from the link you provided, at this time it is "rhino-1.7.8.zip". Unzip that and change directory to "rhino1.7.8/lib"; you need the "rhino-1.7.8.jar" in your CLASSPATH. Assuming you are in "rhino1.7.8/lib" that should be in your current folder, and you can then do
java -cp rhino-1.7.8.jar org.mozilla.javascript.tools.debugger.Main
Which should render like
Recently I have seen files with the .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised a few questions in my head:
What is it for? Why do the guys at Angular care to deliver a .js.map file?
How can I (as a JavaScript developer) use the angular.min.js.map file?
Should I care about creating .js.map files for my JavaScript applications?
How does it get created? I took a look at angular.min.js.map and it was filled with strange-formatted strings, so I assume it's not created manually.
The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the source map will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the source map, then any error would seem cryptic at best.
Same for CSS files. Once you take a Sass or Less file and compile it to CSS, it looks nothing like its original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
So, to answer you questions in order:
What is it for? To de-reference uglified code
How can a developer use it? You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file? If you care about being able to debug production code easier, then yes, you should do it.
How does it get created? It is created at build time. There are build tools that can build your .map file for you as it does other files. Sourcemaps fail if the output file is not located in the project root directory #71
I hope this makes sense.
How can a developer use it?
Don't link your js.map file in your index.html file (no need for that)
Minification tools (good ones) add a comment to your .min.js file:
//# sourceMappingURL=yourFileName.min.js.map
which will connect your .map file.
When the min.js and js.map files are ready...
Chrome: Open dev-tools, navigate to Sources tab. You will see the sources folder, where un-minified applications files are kept.
I just wanted to focus on the last part of the question; How are source map files created? by listing the build tools I know that can create source maps.
Grunt: using plugin grunt-contrib-uglify
Gulp: using plugin gulp-uglify
Google closure: using parameter --create_source_map
The map file maps the unminified file to the minified file. If you make changes in the unminified file, the changes will be automatically reflected to the minified version of the file.
Just to add to how to use map files: I use Google Chrome for Ubuntu and if I go to sources and click on a file, if there is a map file a message comes up telling me that I can view the original file and how to do it.
For the Angular files that I worked with today I click Ctrl + P and a list of original files comes up in a small window.
I can then browse through the list to view the file that I would like to inspect and check where the issue might be.
I recently discovered the existence of source maps in chrome via source debugging in the haxe language. It allows to debug generated javascript inside the chrome browser while seeing the bug reason in the original source code.
Has anyone written a source map generator for coffeescript / Is coffeescript source mappable ?
It would help debug the javascript generated by coffeescript.
Coffeescript 1.6 has native support for source maps.
Use the "--map" or "-m" option to enable it. Or if you use the npm compiler, you will have to add the sourceMap: true option.
npm install -g coffee-script
Should install coffee-script as a global module. Check version > 1.6 by typing
coffee -v
If you need help you can use. Use it to see meaning of options used below
coffee -h
For regular compilation use
coffee -mo script/ -cw src/
This should auto-generate maps files. I leave this running in terminal as I code, it compiles every time I save.
KNOWN BUG:
The current coffee-script compiler does not seem to handle different /src and /script directories. In map file you find that sources = {filename} rather than {relative file path}.
SOLUTION:
Keep your .coffee files in same directory as .js
Modify source directive manually in .map file. This will get overwritten again on next save
This has long been an active issue on the CoffeeScript project (indeed, it predates the source map standard). However, no (complete) CoffeeScript source map generator exists yet. For discussion, see https://github.com/jashkenas/coffee-script/issues/558
Source map support is also one of the goals of the "CoffeeScript Redux" compiler that was recently funded on Kickstarter (see http://www.kickstarter.com/projects/michaelficarra/make-a-better-coffeescript-compiler). That project has just begun; you can watch it at https://github.com/michaelficarra/CoffeeScriptRedux
Ps, if you're on vim, use:
au BufWritePost *.coffee silent make -m
which compiles with source map on file save. I've found it extremely handy when I want some random buffer to start compiling coffee for me.