We Keep Coding

Can you publish an npm package for a frontend JavaScript file?

A client would like to use an npm package to access our JavaScript file's functions instead of adding a script tag to their html. Is this possible? The only resource I've come across for creating an npm package is for NodeJS files (https://docs.npmjs.com/creating-node-js-modules).

This is possible but you cannot import the npm package and have it work in the browser without some sort of bundling system like webpack.
Alternatively, which is a bad idea, would be to ship your dist folder with node_modules in it. This isn't recommended for a multitude of reasons, but it will work.

Following approach might be suitable for your client's requirement.
Create a NPM project using the javascript file you have
Publish it on client's Github account as a package.
Create a .npmrc file in root of your client's project.
Add your package in .npmrc file and in packages.json both.
Refer this doc for using a package with .npmrc file:
https://docs.github.com/en/packages/guides/configuring-npm-for-use-with-github-packages#installing-a-package).

How to imitate my library is a node module without uploading to the NPM?

If I'm developing a library which work is based a lot around of current working directory and the filesystem generally, a lot of paths resolution, and I want to see how it will behave when will be installed as a node module, I don't want to get unexpected results when I'll upload it to the npm. How do I test my library behavior pretending it's a node module? Is placing its folder in node_modules enough?

Make a local package and install it everywhere:
$ npm pack
it will generate a zipped file, so you can copy somewhere and install it.
// another project
$ npm install /path/to/pack
Resources:
npm pack,
Add local package
Absolutely you can use npm link too. link

Including JS plugin files directly in Github repository?

I am relatively new to using git and GitHub, and I am working on my personal website. I am using the JS plugin Slick, a responsive carousel feature. I downloaded all of the necessary files and stored them within my local repo. The size and content of the Slick zip folder is much larger than the files for my site at the moment, so when syncing with GitHub this makes my project appear as 75% Javascript, whereas the actual website is not.
Am I doing this correctly, storing the files for my JS plugin directly within my repository folder? Or should I be using some other method to implement Slick on my site? Or is this just something I should not be worried about? Thanks

If you're just using one library, manually storing it in your Git repo is fine. You'd have to manually update the files if a new version is released, but that's not a big deal for one library. (And you might not even care about updates to this library).
However if you're using more than one library, I'd highly recommend using Node Package Manager (NPM) and a build tool like Webpack.
Here's an article that introduces these tools (plus a few others): https://medium.com/front-end-hacking/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987

For using git, you should store your dependencies in a folder that is in your .gitignore. If you install browserify or another similar tool like webpack, you can use the npm package manager to create a dependency list file with npm init that allows for easy package installation with npm install by anyone. You can install packages slick with npm install --saveslick-carousel and use them with require() in your main js file. Then, take your js file and run browserify jsfile.js -o outputfile.js and it will package your js and your dependencies together to be used by the browser
When uploading to your git repo, add a .gitignore like this one for Node. This prevents your dependencies from being uploaded to the repo and instead when someone wants to run your project, they must run npm install to get all the dependencies.
Browserify gives an output JS file you add to your web server, the name of this file should be put in your .gitignore as well. Your code is stored in the js file you pass to browserify and other people can still access it without the output file, but they need to run the browserify command to package your code.

How do I include JavaScript packages I install from Nuget?

Possibly a stupid question. I installed Chart.js using package manager. It's in Solution explorer.
But where are the actual JS files or how do I get them? When I installed it, there are no changes that Git detects, so I'm not sure if anything at all happened.

Chart.js 2.5.0 includes a Content\Scripts directory inside its NuGet package which contains a Chart.js and Chart.min.js. Depending on what sort of project you are using these files may or may not be added directly into your project.
If you are using a .NET Framework project that has a packages.config file then the JavaScript files will be added into a Scripts folder into your project.
If you are using a project.json file, or your project uses PackageReferences, then nothing will be added since this sort of project only supports files that are in a contentFiles directory inside the NuGet package. Your project looks like a .NET Core project which will use PackageReferences. The Chart.js NuGet package itself will be in the %UserProfile%\.nuget\packages directory if you need to get the javascript files.
Tseng's answer that recommends switching to using Bower or the Node Package Manager to add the JavaScript files seems like the best solution here instead of using NuGet, which does not have good support for adding source files to your project for newer project file formats.

The usage of NuGet for css/javascript libraries is discouraged. For ASP.NET Core you should use the java script / node package managers, bower and npm respectively.
You can use either one. Bower is more focused on browser libraries and css, while NPM is more for server-sided stuff (using node.js). But node.js also contains most (if not all) of the packages bower has, so it's matter of preference.#
For that, you need to select your MVC project and add a new file to the project root. While in the template manager (Add->New File...), search for "Bower Configuration File" or "npm Configuration file".
Then edit the file and add your dependency, i.e.
package.json (npm)
{
"dependencies:" {
"chart.js": "2.5.0"
}
}
Once you save, the file will be downloaded in a directory named "node_modules`. This alone won't be enough, as the required files need to be copied over to wwwroot folder, where they can be accessed when the application runs.
For this you'd need either use the bundler to bundle the files together (should be in default ASP.NET Core project template) or use task runners such as Gulp or Grunt to run tasks on build/publishing, which does that for you. See ASP.NET Core Docs on Gulp examples.
Update
Bower been deprecated now for over a year.

Create shared library with Webpack's DllPlugin

I want to create a core NPM package that contains all dependencies which rarely change, e.g. Angular. Since different projects will use this NPM package and Webpack is the preferred bundling and build tool, I thought Webpack's DLL plugin would be a good choice.
But somehow the consumer packages cannot resolve the contents of the library package created with the DLL plugin. I've created a minimal example here https://github.com/matoilic/webpack-dll-example. The core module only contains Angular and the consumer module should then be able to use Angular from there. But the build of the consumer package fails with the error, that 'angular' could not be found.
Module not found: Error: Can't resolve 'angular' in '.../packages/poc-module/src/application'
Does anyone have an idea what the issue could be?

It seems like the DLL plugin doesn't handle symlinks properly. In my case, I have a mono-repo with multiple packages which are linked to each other.
https://github.com/webpack/webpack/issues/3489
The workaround is to create an installable package through npm pack and to install the resulting archive instead of using npm link.