Develop Reference

Unuglify js file with a source map

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.)

Find dead code in large Javascript Application [duplicate]

In order to refactor a client-side project, i'm looking for a safe way to find (and delete) unused code.
What tools do you use to find unused/dead code in large react projects? Our product has been in development for some years, and it is getting very hard to manually detect code that is no longer in use. We do however try to delete as much unused code as possible.
Suggestions for general strategies/techniques (other than specific tools) are also appreciated.
Thank you

Solution:
For node projects, run the following command in your project root:
npx unimported
If you're using flow type annotations, you need to add the --flow flag:
npx unimported --flow
Source & docs: https://github.com/smeijer/unimported
Outcome:
Background
Just like the other answers, I've tried a lot of different libraries but never had real success.
I needed to find entire files that aren't being used. Not just functions or variables. For that, I already have my linter.
I've tried deadfile, unrequired, trucker, but all without success.
After searching for over a year, there was one thing left to do. Write something myself.
unimported starts at your entry point, and follows all your import/require statements. All code files that exist in your source folder, that aren't imported, are being reported.
Note, at this moment it only scans for source files. Not for images or other assets. As those are often "imported" in other ways (through tags or via css).
Also, it will have false positives. For example; sometimes we write scripts that are meant to simplify our development process, such as build steps. Those aren't directly imported.
Also, sometimes we install peer dependencies and our code doesn't directly import those. Those will be reported.
But for me, unimported is already very useful. I've removed a dozen of files from my projects. So it's definitely worth a shot.
If you have any troubles with it, please let me know. Trough github issues, or contact me on twitter: https://twitter.com/meijer_s

Solution for Webpack: UnusedWebpackPlugin
I work on a big front-end React project (1100+ js files) and stumbled upon the same problem: how to find out which files are unused anymore?
I've tested the next tools so far:
findead
deadfile
unrequired
None of them really worked. One of the reason is that we use "not standard" imports. In additional to the regular relative paths in our imports we also use paths resolved by the webpack resolve feature which basically allows us to use neat import 'pages/something' rather than cumbersome import '../../../pages/something'.
UnusedWebpackPlugin
So here is the solution I've finally come across thanks to Liam O'Boyle (elyobo) #GitHub:
https://github.com/MatthieuLemoine/unused-webpack-plugin
It's a webpack plugin so it's gonna work only if your bundler is webpack.
I personaly find it good that you don't need to run it separately but instead it's built into your building process throwing warnings when something is not ok.
Our research topic: https://github.com/spencermountain/unrequired/issues/6

Libraries such as unrequired and deadcode only support legacy code.
In order to find the unused assets, to remove manually, you can use deadfile
library:https://m-izadmehr.github.io/deadfile/
Out of box support for ES5, ES6, React, Vue, ESM, CommonJs.
It supports import/require and even dynamic import.
It can simply find unused files, in any JS project.
Without any config, it supports ES6, React, JSX, and Vue files:

First of all, very good question, in large project coders usually try many lines of code test and at the end of result, hard to find the unused code.
There is two possible that must be work for you - i usually do whenever i need to remove and reduce the unused code into my project.
1st way WebStorm IDE:
If you're using the web-storm IDE for JS development or React JS / React Native or Vue js etc it's tell us and indicate us alote of mention with different color or red warning as unused code inside the editor
but it's not works in your particular scenario there is another way to remove the unused code .
2nd Way unrequired Library: (JSX is not supported)
The second way to remove the unused code inside the project is unrequired library you can visit here : unrequired github
another library called depcheck under NPM & github here
Just follow their appropriate method - how to use them you will fix this unused issue easily
Hopefully that helps you

I think the easiest solution for a create-react-app bootstrapped application is to use ESLint. Tried using various webpack plugins, but ran into out of memory issues with each plugin.
Use the no-unused-modules which is now a part of eslint-plugin-import.
After setting up eslint, installing eslint-plugin-import, add the following to the rules:
"rules: {
...otherRules,
"import/no-unused-modules": [1, {"unusedExports": true}]
}

My approach is an intensive use of ESlint and make it run both on IDE ad before every push.
It points out unused variables, methods, imports and so on.
Webpack (which has too nice plugins for dead code detection) take care about avoiding to bundle unimported code.

findead
With findead you can find all unused components in your project. Just install and run:
Install
npm i -g findead
Usage
findead /path/to/search

This question recalls me that react by default removes the deadcode from the src when you run the build command.
Notes:
you need to run build command only when you want to ship your app to production.

Quick way to write JavaScript that requires babel and run it?

I want to write a JavaScript example and run it to see how something works.
The sample code might require a browser but not always. I'm open to two solutions, one that works with NodeJS, and one that is used for browser based code. In browser, I'm using React with class and other ES6 syntax including import/export which is not (yet) supported directly by node or node --harmony.
In Python, Java/Groovy, C/C++, C#, others, I could just run a command to compile the file and then run the executable (or just interpret the code), so I'm looking for something similar for JavaScript.
Conceptually, I would like to say:
dotranspile --out bundle.js main.js
node bundle.js (or firefox index.html, which loads bundle.js)
The key is that I don't want to have to create a webpack configuration file in every directory. I thought I found a command like this when searching one day, but can't find it now.
How do other people run javascript sample programs when babel/transpiling is required? I would also like to be able to save them for future reference (in some cases).
Currently, each time I want to write a test I create a directory with a webpack.config file, package.json, and use npm install, and npm run to run the code or start a NodeJS express server to serve index.html.
This seems to be a lot of overhead for a quick test, and it results in dozens of node_module directories with tons of files in them.

Maybe is not answer that you want, but you can always use jsfiddle with babel + jsx. I think that jsfiddle is very good tool for quick run simple app in babel/jsx or other libs, transpilers etc.

How do you automagically minify your JS and CSS on OS X or in Webstorm?

I use two different IDE's based on what I'm doing. My primary IDE is Visual Studio, whereby I use Chirpy to mash and minify my code. It works flawlessly and I love it. Problem is that when I'm not on my Windows box, I don't have access to it.
When not using Visual Studio, I'm usually writing Javascript apps in Webstorm on my Macbook Pro. Here in lies the problem. I haven't found a Webstorm plugin or any other app that I can configure to watch my scripts and mash/minify them.
How do you Mac users mash/minify your JS and CSS at design time with minimal effort?

For those who have now updated to WebStorm 6, this functionality is in-built. Simply go to File (or whatever the Mac equivalent is) -> Settings -> File Watchers and define a file watcher for the type of file you need to watch.
The relevant help documentation is here - http://www.jetbrains.com/webstorm/webhelp/using-file-watchers.html

You could use YUI Compressor without Command Line with these little Apps:
http://www.webmaster-source.com/minimus/ – free
http://www.matmartinez.net/delivery/ – free

I'm neither a Mac nor Webstorm user, but this might still be relevant.
For javascript I use the closure compiler as part of an upload script to minify. It doesn't monitor the files, it runs when I run the upload (a bash file).
If you wanted to keep it all in the IDE, it looks like Webstorm has an Ant plugin http://plugins.intellij.net/plugin/?webide&id=4526 that you could use to execute the closure compiler.
If you can find a command line css minifier then you could put that in the Ant script as well.

I use lessc and uglifyjs to concatenate and minify my css and js files. Here's a makefile from Twitter Bootstrap that I used a modified version of:
https://github.com/twitter/bootstrap/blob/master/Makefile
It's simple since all I do is type make in the command line whenever I want to compile.

I use Minify. It's on the Mac App Store.
I developed it to support my own workflow. minifyapp.com

Can JsLint be integrated into xCode?

I'm editing some Javascript files using XCode's editor (I know, you want to ask me why, but bear with me here), and I'd like to have lint run on my edits, regularly.
I don't have a real preference - it might be every time the file saves, or on each edit, or, worst case scenario, automatically when I hit the build or run button.
Can a setup along these lines be put together? Any pointers?

You could use the jslint command line utility (installed as a ruby gem) and add a pre-action to your build scheme.
You already have ruby and rubygems installed on Mac OS X, so just
(sudo) gem install jslint
Then create a pre-action to run
jslint path/to/javascript/file.js
Source code for the jslint rubygem