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.
Related
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.
Maybe this question has already been asked but after a bit of googling I haven't found anything reasonable.
The main goal I'm trying to achieve is to obtain a dependency tree of a specific npmjs library of specific version e.g. obtain dependency tree of library angular of version 1.5.3
Now, I would like to use HTTP requests for this as much as possible instead of launching npm on server-side or using some js library code for that.
What I've found out is:
From http://registry.npmjs.org/package-name one could get all metadata for the specific package as well as list of available versions e.g. http://registry.npmjs.org/angular
From http://registry.npmjs.org/package-name/package-version I could get all metadata for the specific package of specific version e.g. http://registry.npmjs.org/angular/1.5.3
Now, what I'm struggling to find is how to obtain package.json of specific library and specific version because http://registry.npmjs.org/angular/1.5.3/package.json doesn't contain anything
Thanks a lot in advance for any hints!
Ok, it turns that list of dependencies is actually present in file with metadata for the whole package ( located in http://registry.npmjs.org/package-name ).
It's located in versions -> [version-id] -> dependencies, devDependencies and optionalDependencies properties.
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.
I am currently using the accounts-ui-bootstrap-3-blaze package in my Meteor application and I want to modify the login_buttons_dropdown.html file to just add an additional button in the drop down.
How can I patch this package in a 'clean' way?
I already downloaded the package and embedded it manually via the smart.json file, but then I was not able to perform an automatic update via mrt.
Any help would be greatly appreciated.
If it's only for the purposes of a single project then the easiest way would be not to use mrt at all, but put the package source code to the packages directory manually. You will also have to update the .meteor/packages file by yourself. One advantage of this solutions is that any updates to the package source code will be automatically detected by Meteor, so you can take advantage of the hot-code-push feature. This is particularly convenient while in the development process.
If you're planning to re-use your patches in other projects, then I would recommend forking the original repository. It should be quite easy as it will be probably hosted on github. You don't need to publish a package on the atmosphere to be able to install it with mrt command. The only thing you need to do is tell the meteorite to look for this particular package in your custom github repository, so:
"accounts-ui-bootstrap-3-blaze": {
"git": "https://github.com/yourUsername/accounts-ui-bootstrap-3-blaze.git"
}
in your smart.json and you are good to go.
I'm trying to incorporate a Twitter Bootstrap template with Meteor and I'm having trouble understanding how I should include files. For example, let's start with Bootstrap itself, should I install it with Meteor/Meteorite or do it manually with script includes? Same for other javascript plugins (e.g. jquery <- this one is builtin to Meteor right?, lightbox.js.. etc.)
Hope I'm making sense, thanks!
By default meteor already includes jquery.
It's best to look to get your plugins installed via Meteorite. So something like this could get you started
sudo -H npm install -g meteorite
Then in your project directory
mrt add bootstrap-3
For other plugins you can't find on atmosphere add the files into a directory in your project /client/lib. Meteor will automatically reference the files for you, both css and js.
This way they only run on the client side and are loaded first. (such as lightbox.js)
You might have to modify a few files with Meteor, though. In meteor each file's variables are file-scoped. So you can't access them from other files. (meteor basically throws a (function() {..}).call() around the code.
So if you get some kind of issue about a variable being undefined look for the variable and remove the var keyword and remove it so that the variable/method becomes global. With jquery plugins this usually isn't a problem.
Most that have the variable scoping issues are on http://atmosphere.com so you shouldn't run into too many problems.
The most common libraries such as jQuery and Bootstrap (v2.3.0) are provided by the Meteor core (v0.6.6.3). They can be listed using meteor list and included with meteor add.
As referred before, Atmosphere is a collection of unofficial Meteor packages giving an easy way with Meteorite to include even 3rd party solutions to your own project.
Moreover, you should learn the Meteor App structure. Directories created on your project have different preferences in terms of files visibility and loading order. I recommend reading Ritik Malhotra's presentation about the App structure at http://www.slideshare.net/RitikM/building-a-production-ready-meteor-app. There's also a Youtube video about his presentation that can be watched here http://www.youtube.com/watch?v=gfFGjmiKfnA.