We Keep Coding

Blazor: how to include javascript-package, which is installed with Nuget-Package-Manager?

I'm afraid this will be a stupid question. But I don't manage it to use my JS-Package (for example jQuery), which i have installed with Visual Studio Nuget-Package-Manage in my .net 5 Blazor Server-App.
What i did:
Installing the Package. Here I installed jquery.datatable which includes jQuery itself:
Image of my Project
But now, i don't know how to include it for example in my "_Host.cshmtl"-File:
<script type="text/javascript" charset="utf-8" src="???WHERE IS IT????"></script>
Where is my *.js-File? For example: query.dataTables.js ??
I found it on "C:\Users\xxxxx.nuget\packages\jquery.datatables\1.10.15" and
"C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"
Do i realy have to copy it to my wwwroot-Folder manualy?
If so, why i should use the package-manager?
Thanks for your help!!

Traditional web applications using JavaScript normally load the file from a local folder or from a web CDN (e.g. CDNJS.com etc). This is then loaded from the page (often referenced from a layout file).
Early on it used to be the case that JS libraries could be loaded via NUGET packages but this approach is now discouraged. It had to fix the creation of the script in a set location, e.g. /Scripts and there was no flexibility. Almost all client-side libraries are now in NPM as packages or on CDNs like cdnjs.com.
The current approach for .NET web apps to load client-side assets is either use LibMan or NPM and have some sort of webpack arrangement to compile/pack/copy. You would never load the JS from a /packages folder in the way you suggested.
Blazor Approach
Blazor (since .NET 5.0) can load either embedded JS modules (from your code), or from a URL directly.
If you want to package some JS with your application you should look at Razor Component libraries. This allows static assets such as JS files to be embedded in the code, which Blazor makes available via the _content route, e.g.
_content/LibraryName/myfile.js.
Because Blazor is a SPA you don't include JavaScript using a <script> tag in your HTML, you should load it as a module and reference it there.
This documentation explains it:
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor-javascript-isolation-and-object-references
DataTables, JQuery
So should you include jquery.min.js and jquery.datatables.min.js in your library? I'd suggest a better approach is to load from a CDN - your package is smaller and there is a chance the URL is already cached and loaded, e.g.
var module = await js.InvokeAsync<IJSObjectReference>(
"import", "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js");
This loads the module on-demand from the URL directly. You'd also need to load jquery before this.
Finally I'd make this observation: are you sure you want to go down this route?
There are several native Blazor libraries on NUGET for rendering and handling tables. You'll find it much easier to go this way rather than try to patch jquery-based libraries into a Blazor app.

I had a similar issue. Not with the same libraries, but I was wanting to do something that wasn't available in a Blazor library yet. I needed a video player that could handle a certain format that the default HTML 5 video element can't handle. There is an open source player, videoJS , that did the job, but it's a javascript library. It's available on npm and there are cdn's - however the plugins (as far as I could tell) weren't on CDN - so I had to go down the npm route.
When you install an npm package it puts it into a hidden node_modules folder. Unfortunately even if you point to that path or even copy the file in with your other js files it won't work. Npm packages are designed to be run by nodejs, rather than directly in the browser. In order for them to run in a Blazor app (in the browser) you have to do an intermediary step of transpiling it into a browser friendly format.
What I really wanted was a re-usable component, that wrapped the javascript.
It took me a while to get there but I finally figured it out. I've written a series of articles on my blog detailing it. The final one ports everything into a Razor Class library that can be consumed with no knowledge of the underlying js. The fourth article deals with importing npm libraries and using them within a web assembly app. I'll put the link below but essentially the process is:
Create a folder eg JS and initialise it for npm (npm init -y)
Install the required npm packages (npm install --save)
Create a src folder within the JS folder that that you will put your own js files in
Create an index.js file in src that imports the required javascript modules and exports what you want to consume
Install snowpack (npm install snowpack --save-dev) (or webpack but I found snowpack seems to work better)
Configure snowpack to process the contents of the src folder into wwwroot/js (without snowpack or similar the files in the npm package won't be in a browser or blazor useable format)
use javascript isolation to pick up your index.js file from wwwroot/js
See blog post here for full details (It's part 4 of a 5 part series - part five puts it all in a razor class library so you can add it to a project without ever seeing the javascript)
I know this is late but this SO question was one I kept coming across when searching on how to do what I wanted, so thought I'd put my solution here in case it helps anyone else searching for what I did.

Cordova - share the common code

Is there is any way to have a common project which contains plugin, java script file etc and there is a multiple Cordova project which can access/get those plugins and java script files.
For an example, Cordova-Project-A and Cordova-Project-B has some common plugins, CSS files and java script files. So need to separate these common codes and place it on separate project.
Note: Cordova templates will do this work. But if there is any plugin/JS file update in the template, it won't reflect anything on Cordova projects.

there is. this place is called npm, and it serves as a giant, worldwide, warehouse for javascript developers. by the way, cordova is already using it to power its plugin system.
to join the party:
create the desired projects to contain the common, extracted, code as npm projects (i.e. use npm init on them).
use npm's link to always have the updated source in all consuming projects.

JS plugins, ok for Meteor?

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.

project structure for java web application with javascript providing dependency management, unit testing, ci and support for maven and eclipse?

I am writing a java webapp, but the bulk of the codebase is actually browser-side javascript, which depends on dojo, and uses qunit for unit testing.
With serious abuse of maven and git I was able to wire in javascript unit testing and javascript dependencies.
However I cannot get pom.xml into a shape where both maven command line and eclipse maven plugin would be able to compile and test the whole project.
Moreover neither sonar can realize the project have javascript components, nor eclipse can help much with the javascript parts.
For reference the project is here: https://github.com/magwas/worldmodel/
What would be the correct project structure to have one war in the end of the day which contains all the javascript with dependencies, unit tested, analized (with sonar), and ready to submit to jenkins?
I have found http://mojo.codehaus.org/javascript-maven-tools/, but I don't know whether
is putting the javascript part to a separate project better, and if so, how should it be included in the java one?
how should I handle the dependencies (dojo, dijit & quint)?
I realize it is a complex question, pointers to documentation or source code of projects which have already solved it would be welcome.

I have found this: http://mojo.codehaus.org/javascript-maven-tools/javascript-ria-archetype/index.html
This might be an answer to parts of the question.
Now I only have to figure out how to use it with dojo.

Javascript and CSS Asset Packaging in Visual Studio

I have several backbone.js views, javascript modules and style sheets in an ASP.Net MVC app i'm developing. I want to seperate these files during development but combine/consolidate, compress, uglify, resolve dependencies etc. before deployment. The Ruby community has solutions for this including Juicer and Jammit. Are there similar solutions for .Net web developers ideally solutions that integrate with visual studio.

I've used Chirpy for this in the past. Also compiles SASS, LESS, and CoffeeScript.

We use YUI Builder for exactly this purpose. (We also happen to use YUI extensively in our products.) It's Java/Ant based, but it wasn't hard to get msbuild to do all the work by creating a project file (csproj in our case) and overriding the "build" target. We include the project in our main .sln file, and it automatically builds along with all of our C#/.NET projects.
One thing to watch out for: We initially got frequent/random "access denied" errors when building this way. It turns out that Visual Studio was locking many of the intermediate files that YUI Builder generates. So our workaround is to robocopy all the relevant files to a temp folder, do the work there, and robocopy them back.
It's not ideal, and certainly not an out-of-the-box integration like you're probably hoping for, but it works well for us. It gives us minification, JSLint checking, dependency management, and an infrastructure for serving one combined file rather than individual scripts.