Develop Reference

Angular Build reverse engineering: How to revert minified javascript files to their original typescript form

I have a series of js files. (i.e. 0.js , 1.js, 2.js, 3.js ... 15.js) along with 0.js.map , 1.js.map ... 15.js.map in a folder that also contains main.js and main.js.map and vendor.js along with vendor.js.map.
These are files that contain Phonegap(Cordova) and Ionic code.
The project is probably using Angular for building. Although in the Chrome Dev Tools in the Sources tab I can only see the ng folder. A webpack folder does not seem to be displayed. According to https://angular.io/cli/build :
The application builder uses the webpack build tool, with default configuration options specified in the workspace configuration file (angular.json) or with a named alternative configuration.
Is there a way to convert the files in their original Typescript format using the source map files (.js.map) in order to alter them?

Cannot find module (trying to load a module from a folder)

I'm new into webpack, and I'm having an issue trying to resolve a subdependency.
I'm importing a dependency that is trying to require a module from a specific folder (not the node_modules) (let's call it subdependency). That folder contains two files:
subdependency/package.json
subdependency/build/Release/addon.node
subdependency/lib/src/index.js (this index.js requires the addon.node)
I'm using webpack, and when importing my dependency it was not able to find subdependency.
The subdependency is there but it was not accessible. I added a loader for loading .node files https://www.npmjs.com/package/native-ext-loader and it was still not working; trying to identify what was happening I modified in my build the require path from ./subdependency to ./subdependency/build/Release/addon.node and the file was accessible (so I guess the native ext loader is working fine, but it's not loading other files like the index.js).
I think the problem is that webpack is not able to understand that ./subpdendency is a module, or that I'm not loading it correctly.
Any suggestion or idea is welcome!

I resolved the issue by forking the dependency and switching from node-pre-gyp to prebuildify, since node-pre-gyp doesn't works fine with webpack.

Webpack Including JavaScript File via <script> Tag

I'm using Webpack with Storybook and need to include a JavaScript library file in an HTML file via a script tag. Unfortunately, I get a 404 error indicating that the file was not found (the file's path is based on my local filesystem and is correct). How do I inform Webpack regarding where to look for my library or "static" files?

Add files in entry object in webpack.config.js
entryPoint = {
app: ['path/to/script', 'path/to/script2','./index.js'],
};
This will make sure that you have the library loaded when you have run index.js (entry point of project).
More on Webpack entry points.

how to use webpack to load CDN or external vendor javascript lib in js file, not in html file

I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.

externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});

You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))

There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file

Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.

I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.

How to use webshim with assetic in a Symfony2 project?

I would like to use Webshim in a Symfony2 project.
So far, the webshim library is in mybundle/Resources/public/components/webshim...
The webshim library has a polyfiller.js that loads specified scripts from the ./shims directory. This is also clearly explained from the webshim docs:
The code inside of the polyfiller.js automatically detects the path to the script it is run from and assumes, that the shims folder is in the same directory. This means, you have to make sure, that either the shims folder is placed parallel to the code of the polyfiller.js or to configure the path using the basePath option.
I'm using other libraries and they all end in the /web/js or /web/css directories as they should do. They are combined and have names like "6464de0.js" and are perfectly accessible.
But, webshim tries to load scripts from the shims folder. This makes sense when you look at the docs.
This is an example of 404's in the console:
GET http://domain.dev/app_dev.php/js/shims/combos/1.js 404 (Not Found)
How can I make the webshim library work with assetic?

I have the same issue and here is what I did:
Put the 'shims' folder in the public folder of your desired bundle (eg. AcmeBundle/Resources/public/js/shims) then when you do assets:install using the console command it will be installed in the Symfony/web directory.
Then set the webshim option so that it points to that path:
webshim.setOptions('basePath', '/bundles/acme/js/shims/');