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.)
Related
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
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).
I am using IntelliJ 14.1.4 for creating a JavaScript application. For debugging, I fire up a webserver using Gulp. I then fire up the JavaScript debugging and connect with Chrome (via the plugin). I can debug "normal" JavaScript this way but when using source maps (created by browserify), IntelliJ does not trigger the break points anymore. If I use Chrome's debugging tools, everything works as expected but IntelliJ does not seem to being able to translate its break points.
Is there any way to make this work? I have spent quite some time researching the issue and as far as I understand it, IntelliJ supports source maps. Also, I was able to debug GWT generated JavaScript using this approach which uses source maps, as well.
Update: It seems like there is a current issue for this problem. If any workarround is know, I am happy to hear a solution.
The answer below solves the problem. Here is how I set up my gulp build:
bundler.bundle()
.pipe(exorcist('./build/bundle.js.map', null, null, '../src'))
with ./build being my build folder and ../src being the root of the JavaScript source files, relative to the build folder.
The current workaround is to use exorcist to generate external source maps. You can set the base path to evaluate paths from with the -b parameter, more info in their docs.
As an example, here's what my call to watchify looks like:
bin/watchify -d -v -p [tsify --target es5] -t debowerify js/tests/karma/**/*.ts -o 'bin/exorcist -b "js/compiled/" js/compiled/tests.js.map > js/compiled/tests.js'
Be aware that plugins and transforms might output weird paths when piped together; if your sourcemaps don't work, make sure browserify or watchify output the path properly. I once had browserify output "../../js/tests/karma/unit/js/tests/karma/unit/Calculator.spec.ts" instead of "../../js/tests/karma/unit/Calculator.spec.ts", causing my maps to be useless.
Is there any tool to detect code duplication in JavaScript? I tried "PMD Duplicate code detector" but it is not supporting .js extension.
I would recommend JSCPD
Installation
npm install -g jscpd
Run
jscpd ./path/to/code
(you have several type of reporters, default is console, but you can use html like this: jscpd -r html ./path/to/code)
Other solutions:
JSinspect wasn't good for me because didn't support .ts and .tsx (jscpd supports 150+ formats
InteliJ IDEs (I'm a big fan of them) don't seem to work since WebStorm found no duplicated code.
You can use JS Inspect it detects copy-pasted and structurally similar code, also supports *.js
Installation
npm install -g jsinspect
Run
jsinspect -t 50 ./path/to/src
I would recommend looking at this thread (also on stackoverflow):
Javascript source code analysis ( specifically duplication checking )
IDE can have this functionality. I use IntelliJ, this IDE has a built-in duplicate code checking mechanism at 2 scopes:
Inline: Duplicate codes are underlined when opened in editor so that developer can easily catch and do refactoring.
Analysis: Go to menu Analyze->Locate Duplicates.., specify scope to run through and list all duplications.
I use notepad++ for my JavaScript development now. I am wondering if anyone has successfully integrated jsDoc with notepad++ for easy code commenting.
I was usint Aptana earlier and it was already integrated in it as ScriptDoc I believe but Aptana grew out to be painfully slow.
It it is possible to get jsDoc to work using the NppExec plugin. The steps are pretty straightforward, and should be a lot more straightforward after you read this.
In NPP (I'm using v. 5.9.3) open the plugin manager
Install NppExec plugin. (Npp restarts, I believe)
Go to the NppExec menu under plugins, choose the "Execute" menu option. A tiny scripting window opens.
Enter the following NppExec scriptlet:
NPP_SAVE
cls
SET jsDocPath = e:\javascript\jsdoc
cmd /c if "$(EXT_PART)"==".js" echo "Running JSDoc" && $(jsDocPath)\jsDocMe.cmd $(jsDocPath) "$(FULL_CURRENT_PATH)" "$(CURRENT_DIRECTORY)\jsDoc"
NPP_CONSOLE 0
(the line beginning with cmd and the following line should all appear on one line...)
Explanation: The set command sets a variable for where your jsDoc path is.
The cmd line first checks to see if the currently open file has a .js extension, and if so
it calls a .cmd file called jsDocMe.cmd, text below, passing in the jsDocPath, the full path of the current file, and the directory of the current file. The use of these variables can be seen in the .cmd file. The text of the .cmd file is below, a simple set of batch commands that changes to the jsDoc directory, runs the jsrun.jar file, and sends output to a new jsDoc folder beneath the current working directory.
cd /D %1
java -jar jsrun.jar app\run.js -d=%3 -a -p -t=templates/jsdoc %2
%3\index.html
exit
Notepad++ uses Scintilla, which does not parse inside comments, so I doubt there would be any plugins doing this. (See the comments for this feature request.)
I've been using N++ for JS development for years now, and I'm pretty sure there is no way to get JSDoc going, unless you write your own plugin.
You should always be aware that N++ is not an IDE. I've tested several, and I've always come to the same conclusion as you:
N++ == slim && fast; IDE == feature rich && slow;
IMHO, the IDE with the very best JSDoc support is WebStorm (commercial product).