How to include sub-dependencies in a Bower repository - javascript

I am creating a basic JS framework which I will be uploading to Github and hope to create a bower package so that I can install it in my other projects using Bower. I've never done this before but I could probably work that bit out.
The confusion comes with other dependencies which my Framework relies on. For example I want to specify Fastclick.js as a dependency and call it from within my framework like this.
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
So my question is how am I supposed to do this? I assume I don't include the Fastclick library in my compiled "/dist" folder and that I can specify it in my Bower file so that when somebody installs my framework they will get the correct version of Fastclick? If that's the case then how do I make sure they load the library before my library? I don't have control over their HTML or the order in which they load scripts.
I could just copy and past the Fastclick code into my library, that is one option of course but I feel there must be a better way to do this. My brain is telling me that to do it properly would require some kind of JS module loading system though.
As you can tell. I don't really know what I'm talking about so apologies if the question is quite vague. Any help would be greatly appreciated though.

Do a
bower install --save <library-name> // in your case Fastclick.
This will create a bower.json file, or update it with the library. It should also be saved now in bower_components/.
Now go to bower_components/<library-name> and see which file you want to include into your project. For example, from the bower.json of FastClick, it seems like you need to include lib/fastclick.js for the functionality.
So to use the library, in your project's index.html, you'll need to add a script tag something on the lines of:
<script src="bower_components/FastClick/lib/fastclick.js"></src>
Now you're done!
Anyone who clones your git repo simply has to do a bower install, and everything should work out of the box.
You don't need to checkin the bower_components folder, but only the bower.json file, which can be used to install all the dependencies.
Hope this helps!

In the end I just included the whole Fastclick library in the code I was bundling up. It was the only way to ensure that it got loaded first in the final app. I could have just included it in the bower file and the final app would have needed to include it in their template in the right order, but this way seemed safer.

Related

Why some libraries in simple vanilla Js require NPM?

I am pretty new to js. And I am looking to learn js. Recently I came across one library called bounce.js which is animation library. Which require NPM to install but why? I am dont want to use NPM (or any packet Manager) they havent provided min.js file to direct import in scrpit tag?? Why??. Similarly for Tailwind it require NPM. And as NPM require it means I need vercel to deploy and all stuff.
2) As I use django I dont know how to install NPM modules in my templates.
Please help me clear out from this mess.
When all I can find is NPM based installation guides I like to search the library name followed by CDN which typically brings up some minified results. In your case I tried searching for bounce.js CDN which brought up lots of results including this one:
https://cdnjs.com/libraries/bounce.js/0.8.2
which points to
https://cdnjs.cloudflare.com/ajax/libs/bounce.js/0.8.2/bounce.min.js
You should be able to do some searching and find the CDN you wish to use. If you want the source JS to serve from your own server you can visit the .js link and right click and download (or copy and paste into your own file).
One of the advantages of using npm over a direct download is facilitating the integration into your workflow.
For instance, if you use a module bundler, the bundler will generate an "optimised", minified version for you: Getting rid of unused code for you (=> Tree shaking) reducing the size of your resulting code, solving some import issues, and more
NPM will also help you keep track of your imported library. You know if you use an up-to-date or outdated version. It will also inform you about
Eventual securities issues. And much more.
There are many, many advantages of using npm over direct download.

Can it be imported a minified file into a nodejs project? How do you import external local modules inside many other npm projects?

I'm facing the problem to import a min.js file into a nodejs project. I don't have an HTML file (I'm using express.js for backend activities) therefore I cannot import it in the normal way.
You can ask why I need a minified file inside the project. I forked another npm package and I made some edit to it. I don't want to publish it on npm since I need to test it first but I don't want to copy and paste the entire project inside others.
A min.js is perfect since it can places in many projects without effort.
Is it then possible? Do you know best practices regarding this problem?
EDIT:
The minified file was useful in a DOM context but I don't need to have it. It would be really handy if I could use it also in Nodejs.
What I need it's to import an edited npm package in other projects such that I don't need to copy and paste it every time in each project folder.
Other ways using package.json would be great.
Thank you in advance!

Newbie in React: how to edit a component that was installed via npm?

I've followed the instructions in this URL (https://github.com/react-component/calendar) to install a component app in my dependencies. I have succesfully installed it, imported it and it is visible and usable in my web app.
npm install rc-calendar
import Calendar from 'rc-calendar';
<Calendar />
However, I can't seem to edit it or find a 'Calendar.js' file to make changes to it? I'm able to see it in my package.json file but not more than that
You'll find the source files in your node_modules folder in your project. But I would not edit them there. If you want to use that plugin as a starting point and edit it from there, I recommend downloading the source files from the github repo and including it in your project as a regular .js file / regular component. Then you can edit from there. It looks like that plugin has many files that are written in typescript.
TL;DR You can, but you shouldn't.
When you use npm it's supposed that you don't change those packages, what you can do is create your own version. If you want to find the source code, some packages come with it, you'll find it in: <project folder>/node_modules/rc-calendar.
The typical convention is to not edit packages installed via npm . However, you can clone the package repo and include it in your project. There, you can do what ever you want.

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.

Ember app kit how can I exclude jquery from the list of included js libraries when I run grunt dist

I'm using ember app kit to create an ember.js app. It's including jquery for me which works great when I'm running the as a standalone app using grunt server. However I would like to use grunt dist to compile it all down to a few single files for inclusion in another app. This other app already includes jquery so I would like to exclude jquery from being compiled/minified in with grunt dist. Short of deleting jquery from the vendor folder is there a good way to do this?
Ember App Kit uses bower to install/remove the packages. Remove $ from bower.json
If jquery is managed by Bower in your case, you'd want to run
bower uninstall jquery
http://bower.io/#uninstalling-packages
So as it turns out, I didn't actually need to use bower at all. While doing a
bower uninstall jquery
would indeed remove jquery from the vendor dir, and adding the bower.json would keep it from coming back, neither of these things would prevent it from getting added to my compiled, minified js that results from a
grunt dist
What I finally figured out is that the index.html has special comment blocks that dictate what grunt decides to include. Specifically the
<!-- build:js(tmp/result) /assets/vendor.min.js -->
dictates what gets included in the vendor.min.js output. In my case I simply removed jquery from this block. Another option would be to keep it in the block but include it in the
<!-- #if dist=false -->
block. Hope this helps anybody else with the same issue.

Categories