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.
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.
I am looking through the documentation and features for jQuery Globalize (https://github.com/jquery/globalize) and although it is a bit heavy and complex, it seems to do most of what I want.
The problem is maintenance.
As I understand it, to have access to each of the modules (messages, numbers, etc), I must first run the build in order to acquire a ./dist folder. So in my company's automated build system (largely ant-driven), the following steps would be required:
Ensure Node installed
Ensure Grunt and Bower installed
Run both npm install and bower install
Modify the grunt task to exclude the failing "commit" task (why do they even want an automatic commit on build?)
Run the whole grunt to get a ./dist folder
Execute my project grunt file, which copies the files out of this dist and further processes them
This is rather heavy when all we really need are the files ultimately found in dist. The bigger problem is that an update of the plugin then requires downloading the repo again and running through the same process and hope that dependency fetching and grunt build execution tasks don't fail.
Does anyone familiar with globalize know a better way to do this that's more future-proof? Any idea why the dist files arent' just part of the repository?
As mentioned directly in the README.md file, you need to go to a "tagged branch". This means going to the "releases" tab of the repository and picking an appropriate release. This will download a versioned release which includes the dist folder.
Clicking the "download" button in the sidebar will only retrieve the master development branch, which is not tagged and does not include dist.
As of this writing, the tagged branches found on the "releases" tab are at this link: https://github.com/jquery/globalize/releases
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 have a library that I'm developing and I'm publishing it to bower. Right now I'm ignoring everything except genie.js (the library) and genie.min.js. Is there value in having the README.md or the travis build file or the demo files or anything else? It seems to me that the reason someone adds your component to their project is so they can use it in their product and they don't want their file system polluted, am I wrong?
You're right, just the minimum. I would go a step further and drop the minified file, which is the best practise in Bower, as users are most likely using a build system and having an additional minified file is just wasting space.
You can easily ignore everything but one file by using globbing in the "ignore" property in bower.json like this:
"ignore": ["./!(genie.js)"]
I'm looking for a package manager that can be added as a task in grunt that will download the latest version (maybe even a specific version ie: jquery v1.10 vs v2) of a library or js or css file and place it in a specific folder. Here is what I'm looking for:
Run grunt task that will download the latest version of jQuery UI (js and css).
Move the latest JS version of jQuery UI into assets/js and name the file jquery-ui.js
Move the latest CSS version of jQuery UI of no-theme into assets/css and name the file jquery-ui.css
Another example would be:
Run grunt task that will download the file at http://domain.com/css/grid.css.
Move that file to assets/css and name the file grid.css.
Lastly, I'd like a way to do an update that will allow me to update all scripts or css files that I specify, so it knows which files to try to update. Also, I'd prefer if the package manager didn't clutter the repo with many additional files.
Does something like this exist? I've looked into Bower and Jam, but I'm not seeing this ability.
Bower does indeed let you specify download url's for your packages.
From the bower.io site:
# Using a local or remote package
bower install <package>
Where <package> can be any one of the following:
....
A URL to a file, including zip and tar.gz files. It's contents will be extracted.
Then you should just run bower update whenever you need to update things. Obviously you should use a CDN of sorts to automagically get links to the latest versions of the files you need.
Bower's .bowerrc file should let you specify the installation directory for your components. Keep in mind that this will have to be project specific.
It does create and rename files it manages on its own way, but that's a good thing. Specially because it exposes a very nice API for you to use.
Solved this by using grunt-curl.
https://github.com/twolfson/grunt-curl