Problem will get demostrated on my current use-case, bundling cytoscape.js with dependencies (layouts and their respective dependencies), but answers should not be limited to this use-case. Also the answer might use other dependency management tool or bundler, than what I mentioned/tried in the question.
I'm interested in possibility of using npm/yarn or other dependency-management system in JS environment, to obtain project dependencies with respective dependencies (full depth of dependency tree) and being able to bundle them for non-JS application, where such bundle can be used in standard HTML/CSS/JS applications (regardless of the server-side language)
I'm currently using Cytoscape.js for rendering graphs in my application. Since I wanted to provide user with option to change graph layout, i'm using several layout extensions supported by cytoscape.js (https://js.cytoscape.org/#extensions/layout-extensions). namely cola, cise and dagre (d3)
Full package of the cytoscape with extensions and required dependencies is in my case 8 files, which I sometimes obtained from github repository (usually dist folder or releases), some from CDN (such as cdnjs) or from respective project demo pages. The reason is that not all dependencies have nicely named and provided release files in repository, cdn or elsewhere.
I hope it is possible, to create js project (using npm/yarn), add the dependencies I require, let the npm/yarn figure out the correct latest versions of all dependencies in the project, and have the bundler create single minified and not-mangled javascript file, that can be used in standard javascript/jquery frontend code, without having to write my-app javascript in the same project as well
The question is, is it possible to automatically bundle js project dependencies, and provide js bundle, that can be used in non-js application? (eg. similar to what Jquery UI Download Builder provides in the end)
Optimization of resulting bundle (size) is in my opinion impossible, since the bundling process cannot assume which parts of which dependency gets used or not, it can be of course minified, but mangling symbols is out of question.
Links:
- https://github.com/cytoscape/cytoscape.js/issues/2810 - this issue explained for cytoscape.js use-case
- simplest build system for cytoscape.js? - Similar question, where only answer provided does not address the issue of obtaining layouts with dependencies
- https://github.com/smarek/cytoscape.bundle.js/tree/esbuild - actually working cytoscape with few layouts example, using ESBuild
