How to decode JavaScript files chunk.js? [duplicate] - javascript

Is there any way to convert webpack bundled js file into source code ts?
I have bundle.js file with me bundled with webpack. Unfortunately the source code files are deleted by a stupid accident. I want to reverse engineer my bundle.js file to get back my source code typescript files. Is there any possible way to achieve this?

Do you still have your source map files by any chance (e.g. main.bundle.js.map )? If so, you can run your app (ng serve), open the Chrome Dev Tools in your browser and you'll see your sources in TypeScript under the tab Sources -> webpack://

You may try using debundle node module.
Debundle

Related

Wrong source map for concatenated .js file in grunt-contrib-concat

Recently I faced a very nasty problem with source mapping using grunt-contrib-concat. Grunt-contrib-concat concatenates several .js files into one and uses source-map module for source mapping.
So breakpoints in my code paused incorrectly both in Chrome and in VS Code. (You know what is it, if you faced the same problem).
My environment: Windows 10, VS Code with Debugger for Chrome extension, Chrome browser, Node.js project with grunt-contrib-concat dependency.
It is very unefficient to debug your client-side code without correct breakpoints.
I have spent several hours to clear the problem, and finally I have found the solution. Problem was in concatenate minified .js files. After these minified files line numbers in source map become wrong.
So the solution is to exclude minified files and use normal instead.

Electron-builder with webpack

tl,dr:
Here's what I got:
Electron
React
Webpack
electron-builder
electron-edge
node-fibers
some static assets (.png, .svg etc.)
Here's what I want:
A crossplatform autoupdating installer for the software
The long version and the problems:
I can get Electron, React, Electron Edge, node-fibers, webpack and the static assets to run perfectly when I start the webpackserver in dev mode.
However, how can I integrate this into electron-builder?
I'm new to this whole build process and I just took this boilerplate to get started:
Github of the boilerplate
To me, the dev debug process seems to go like this:
Have webpack create a bundle.js and an index.html out of my src folder
Start a webpackserver with hot mode that serves these files
However, how should I tell electron-builder where to get the different files from? There is no package.json nor node_modules/ inside dist/ and node-fibers isn't getting bundled as well (because webpack seems to fck with __dirname or smth, so I excluded it).
Whenever I launch the generated .exe file (that's not the installer, just an exe file that's supposed to launch the program), a message appears that main.js can't be found in the app.asar file. I tried extracting it, but it fails before it gets to extract the whole package. Main.js is never needed anyway though, because that was the whole point of having webpack transpile it or am I missing something here?
I have searched all over the internet for hours now, but I don't get all the concepts ..
Could anyone here explain what's wrong with my setup and what I can do to fix that?
I recommend you to use https://github.com/chentsulin/electron-react-boilerplate
If you don't want to use boilerplate for react app, consider to use https://github.com/electron-userland/electron-webpack (but boilerplate is strongly recommended).
I ended up with this boilerplate:
https://github.com/szwacz/electron-boilerplate
I couldn't get HMR to work and had to fix some es6 stuff, but at least it's doing its job.

How can I modify and test javascript source code for a project which uses minified javascript code in production?

I'm working on a project which uses js source files from multiple directories and compiles them into a common dist/ directory which is used in production. One way I can test my changes to the js code would be to make the changes into the source code and reinstall the entire project to generate the new dist/ directory. Is there an easier and more practical way to do this?
As I like my production and development environments to be (mostly) equal I use source maps for this issue. This is the way I usually build by js:
JS Hint
Generate Source maps
Concat JS into one file
Uglify
I do this by using gulp and some plugins. Those shouldn't be hard to find.
The benefits of this aproach are:
Serving a small js file
no difference between dev and prod
readable JS source for debugging
no redeploy needed

Does UglifyJS2 support base64-encoded in-source-maps?

I'm using UglifyJS2 to compress an output file from Browserify. Browserify has generated its own source map which it tacks the bottom of the file like so:
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjo...
I've got an error my JS somewhere in one of the files I've require'd, but Chrome is telling me the error occurred somewhere in the browserify output file rather than pointing me all the way back to require'd file.
The in-source-map option doesn't say anything about base64-encodings, so I haven't set it to anything.
i think sourcemap with uglified js has not support yet.
our team deploy minified source and debug it by Chalres's Map Local or Fiddler's autoresponder with not minified source with sourcemap.

Can I re-construct the original JavaScript source file from a minified version and the corresponding source-map file?

I am working on a project where I have to statically analyse JavaScript code. However, for a few libraries, I only have access to a minified version of the file and the corresponding source-map. Is there a method/technique with which I can generate the original file using these files?
I found a node.js library that can help do this: Maximize
Corresponding github repo
If your objective is "just" to do a onetime re-construction of the original source code I did it using:
Online Source Visualization
use the "Custom" option
upload compiled file
upload source map file
Depending on filesize it may take a while to view the results.
The correspoding Repo is here
This command line tool is really easy to use
npx uglify-js ugly.js -b --source-map "filename='ugly.js.map'" -o beauty.js
https://www.npmjs.com/package/uglify-js
https://stackoverflow.com/a/70584632/13581139

Categories