There is no standard way to ask npm to get the minified version of a library. Some developers will produce packages that contain both minified and unminified versions (that's what I've done for one of my projects, which is web-only but can be installed through npm) or will create a package that contains an unminified version and another package that contains the minified version. This is done on a case by case basis, varies from package to package, and has to be determined by looking at a project's documentation.
If a developer has not cared to provide a minified code base through npm then you'll have to perform the minification yourself or get the "official" minified code through some other means.
» npm install unminify
Videos
» npm install unminified-webpack-plugin
» npm install @wakaru/unminify
I found some large JS files online that I'd really like to peel back and learn from. However, the code is minified/obfuscated (whichever you'd describe it). From what I could get out of searching around it might be done by a bundler of some sort. Below is a snippet of what I'm working with.
P.S. Just to clarify I'm not doing this to learn HOW to write javascript, I've used javascript for most of my projects. I sometimes like to see how some of my favorite apps/websites do what they do.
(() => {
"use strict";
var e,
t,
n,
r = {
8029: function (e, t, n) {
var r = (this && this.__importDefault) || function (e) { return e && e.__esModule ? e : { default: e }; };
Object.defineProperty(t, "__esModule", { value: !0 }), (t.TotalStats = t.WebsiteStats = void 0);
const a = r(n(7294)), l = r(n(932)), o = n(2247), u = n(5761), i = n(2540),
s = l.default.div`
display: flex;
flex-direction: column;
gap: ${(e) => e.theme.spaces.minimal};
margin-bottom: 15px;
`;
(t.WebsiteStats = function (e) { const { t } = (0, o.useTranslation)(), { summary: n } = (0, u.useSummarizedOpenAttempts)(e.website.host), r = e.website.name; return a.default.createElement(
s, null, a.default.createElement(i.Round.Large, null, n.last24HoursAttempts.length), a.default.createElement(i.Paragraph.Small, null, t("interventions.basicBreath.last24Hours", { subject: r })));
}), (t.TotalStats = function () { const { t: e } = (0, o.useTranslation)(), { preventedAttemptsIndication: t, populatedEnough: n } = (0, u.useWebsitesStatsSummary)(),
r = Math.round(60 * t * 3), l = (0, u.useFormatDuration)(); return n ? a.default.createElement( i.Paragraph.Small,
{ style: { textAlign: "center" } }, e("popup.totalTimeSaved", { time: l(r) })
) : null;
});
},
...
}
...
}
)();Edit:
The below answer is valid if you don't have a source map (common in production environments). If you have a source map you can refer the @AliKazemkhanolo answer
Answer:
You can't unminify a minified file. Minification is a destructive operation and involves loss of information.
For example, if you have a function with a descriptive name, after minifcation that name will be substituted with a meaningless one. There's no way to go back from this operation.
You can use a beautifier to make it more readable, but you will have a weighty job of reverse engineering in order to understand what the code means.
source-maps are what you want. in the process of making a minified js file, you should get a source-map file, too (it depends on what tool you use for minification).
Then using source-map library you can recover the original files.
If the source-map file does include the minified source, this file is enough to unminify. otherwise, you have to tell the library the minified source manually.
More info, on the library's Github page.
You can use this : http://jsbeautifier.org/ But it depends on the minify method you are using, this one only formats the code, it doesn't change variable names, nor uncompress base62 encoding.
edit: in fact it can unpack "packed" scripts (packed with Dean Edward's packer : http://dean.edwards.name/packer/)
Chrome developer tools has this feature built-in. Bring up the developer tools (pressing F12 is one way), in the Sources tab, the bottom left bar has a set of icons. The "{}" icon is "Pretty print" and does this conversion on demand.
UPDATE: IE9 "F12 developer tools" also has a "Format JavaScript" feature in the Script tab under the Tools icon there. (see Tip #4 in F12 The best kept web debugging secret)
