Merge multiple bower.json dependencies in automated way - javascript

I've got a complex architectural problem with bower. I'm building an online platform where user create pages using dynamic widgets which contain JS-code. Those widget have predefined format, description, icons etc., they will packaged into archive (like apk's, war's, jar's, ear's but with front-end code). Users will be able to dynamically add widgets when website is already deployed.
We're using bower and the problem is the following: widgets should also be able to specify their bower dependencies.
Simplified directory layout is the following:
bower.json
gulpfile.js (used for website building)
bower_components # our own deps + deps from all the widgets
widgets
widget1 # any name is possible here
widget2
widget-random
another-widget # for each of the widgets above the layout is the same
bower.json (or simplified version like dependencies.json which contains only dependencies list).
many other files
After widget is uploaded bower.json should be merged with all the deps from other widgets, gulp build will run and rebuild the whole thing.
How do I merge all the bower.json's into a single one? Especially when there is the same dependency twice e.g. one widget depends on "jquery": "<=2.1.0" and another widget depends on "jquery": "^2.1.0". They are both compatible but what string do I write in bower.json? If I write both bower uses only the second and will install the latest jquery - 2.1.1 which is already not compatible with the first widget. And that's a simpler use case.
We can actually assume that there will be not every possible semver spec variation, like <= for example. I can also force widget-writers use my own dependency specification but I can't think how to design it.
Any help is appreciated!
Other approached for widget dependency solution are accepted but note: they cannot have they're own versions of libs because in runtime multiple widgets are loaded. I can't have two jqueries at once, for example, just because two widgets use specs like in the example above.
UPD: I know about RequireJS and I'm actually using it. But, first, I need to download the dependency itself so I could use it with RequreJS later on.

The solution was the following:
each widget itself is a bower package with it's bower.json; The project's bower.json is renamed to bower-base.json and bower.json is generated from bower-base.json with all the widgets added to dependencies property. Then bower automatically handles widget's dependencies.

Is there a reason this has to be done with bower? Bower isn't really intended for runtime dependencies. For that you want to use something like RequireJS.

Related

How to use JavaScript NuGet libraries in ASP.Net Core project correctly on the example MathJax?

I installed MathJax library for my site on ASP.Net Core from Package Manager.
I have seen 'MathJax (2.7.0)' in NuGet Dependencies:
Image of My Dependencies
But is it all. When I see wwwroot\lib directory in my project I don't see 'MathJax' folder or something similar in it:
Image of My fron-end lib
But when I need use MathJax I need write something similar in my html-page:
<script type="text/javascript" async src="~lib/MathJax/MathJax.js?config=TeX-AMS_HTML-full"></script>
I can't copy NuGet library directly in wwwroot\lib, because I don't want to add my git repository a lot of files external project (> 36 Mb, > 1500 files). Besides, why use NuGet then?
Also, I can't add existing items of MathJax NuGet library manually (menu Add -> Existing Item...), because they are a lot and the absolute path will not correctly on another PC.
How I can get correctly link on MathJax library in NuGet package?
The JavaScript/CSS library NuGet packages are not for Core. They're for MVC. ASP.NET Core has a completely different approach to static files and client-side libraries than ASP.NET MVC did.
For an ASP.NET Core site, you need to use either LibMan or npm to get your client-side libraries. LibMan is easier, but also very naive and limited. In particular, it only supports libraries that are on cdnjs. While there's a lot of coverage there, it's not comprehensive, and there's some libraries that just are available. I'm not sure whether your particular library is or not.
However, given that you'll almost inevitably end up needing something you can't get through LibMan, and and then you'll be forced to use npm anyways, you might as well just use npm and get used to it. There's more of a learning curve because you also need to create build tasks with something like Webpack, Gulp, Grunt, etc. The npm packages go into a node_modules folder, which should not be served directly. At the very least, you'll need to use Webpack, Gulp, etc. to copy the dist/build of the npm package (i.e. the actual JS/CSS files that you'll be referencing) into your wwwroot/lib directory. There's lots of guides online for how to set this up. Just do some research.
In the VS2019, go to the wwwroot/lib directory, right click and select Add -> Client-Side Library. then include your file.
Go to the web project, right click and go the manage client scripts, then search your library and instal.

Using a pre-minified Javascript library with jspm?

I am trying to do all my package management with JSPM, and I would like in some cases for the bundled minifed version of a library to be loaded by SystemJS instead of each individual source files (and I don't want to do the bundling myself with the JSPM CLI).
For example, I am doing the following:
jspm install angular2
And then I have a small application based on Angular2. When I look at what happens on the network, the browser loads a whole bunch of files that are part of Angular2, although in this particular case I would like to use angular2.dev.js, which is part of the angular2 module installed by JSPM (and maybe in production I would like to load something else).
Is there a way to do this with jspm (basically to replace bower + a script tag)?

bower custom build - choose specific files

I am continously encountering the issue, where I need / want to include a specific file from a bower package to my app, and find no easy way to do it. This is not limited to minified versions.
Example: Moment.js comes with about four different files one can choose to include. Those are moment.js, moment.min.js, moment-with-langs.js, moment-with-langs.min.js. The bower.json and the hidden .bower.json files inside the package specify which file should be included during the build in the "main" array (here's an example with sass-bootstrap bower package):
"main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css", "./dist/fonts/*"]
But there is no such thing in the apps bower.json file to specify for dependencies. One can only specify the dependency.
There is some discussion on the case: I found two topics on bower's github, namely https://github.com/bower/bower/issues/368 and https://github.com/bower/bower/issues/369 and also here How to configure Grunt to replace Bower dependencies by its minified versions but the issue is not limited to the minified versions.
All the topics end in the same way, stating that bower, as a package manager, should not take care of the custom build process that an app requires. But that leaves the developer with the problem of having to go about bower with the majority of the repos OR minifying the packages on his/her own. There are many who disagree on both.
The way I went about the problem with moment.js is I created a vendor folder and manually added the file that I needed and then added a Grunt task to do it automatically. But it just would be so much easier if there was a standard way of providing users the option to include e.g. all recommeded (default) files, the minified versions or just allow to choose specific files from the app's bower.json dependency list.
Perhaps I am not using it right, or maybe it's not a popular problem. I don't know if it's some feature that should be added to bower, but maybe other devs have experience dealing with the case?
If you use browserify it has debowerify transformation that just grabs the first file from the main array. To include a particular extra file call the require function with appropriate path.

Meteor package load order

The order I add packages on Meteor makes any difference in the result ? Lets say I use bootstrap 3 and accounts ui with bootstrap 3, if I add the latter first or vice versa would work the same way ?
In Meteor the package order that you add them in does not matter.
There is a module in meteor called linker that analyses each packages dependencies to ensure that the dependencies load first.
For example: If bootstrap-3 is a dependency of accounts-ui-bootstrap-3 then even if bootstrap-3 was added after, it would be loaded first.
There isn't currently a way to test for or access an optional dependency from within a package. You can test for it's existence by testing if Package['author:package'] is defined. The problem is the load order. I got around it temporarily by editing the packages file in .meteor and moving the optional dependency package higher up in the list. I don't think it's a good long term fix though. This should be a Meteor feature suggestion, if it's not already.
Each package has a package.json file that lists what other packages it requires. This practice ensures that packages load in a proper order. Read these files to troubleshoot load-order issues.

Twitter Bower file choosing

I was just playing about with Bower and got it to pull down jQuery 1.9.1 and Fancybox 2.1.4
That's great but for example, Fancybox pulls it's entire repo down including all the demo files and not just the actual files I need.
How should this situation be dealt with?
Neil
You have three options at the moment:
Bug the author about either properly using the ignore attribute of the component.json (or soon to be bower.json) or maintaining a separate repository just for bower like AngularJS does for example.
Register and maintain a component yourself.
Pull in just the file you need via HTTP like this:
"dependencies": {
"fancybox": "https://raw.github.com/fancyapps/fancyBox/master/source/jquery.fancybox.js"
}
Last last option comes with the drawbacks that neither dependency resolution nor multiple files will work. The best long-term solution is to lobby the author to correctly support bower.

Categories