Develop Reference

Bundle and publish client-side web code on NPM

I made a Javascript file. Let's say the contents of it are this:
let myCoolAlert = (str) => {
alert(str)
}
// in a different js file (SO doesn't allow you to cross-file as far as I know
myCoolAlert('Hello World!')
I already hosted the JS file on a CDN. Now, I want it to be automatically hosted locally by whoever installed it if you install it via NPM. Is there a way to do this?
Also, I noticed that to do the same using Socket.io, you have to pass Socket.io to the HTTP/HTTPS server you created. Will I have to do this also? (I would prefer not).
Thanks!
Edit:
I am trying to make a better alert system (like sweetalert). I coded it in Javascript and works when using it through the CDN. However, I also want users to be able to install this via NPM (kind of like SweetAlert? I am not sure about that last statement however because I do not use it). When they install it with NPM, it's obviously going to be useless because it is for the browser. However, I want them to either:
Automatically have the source code needed available at a URL like localhost:3000(or server name)/betterAlert.js and be able to use that URL as a script in the HTML files
OR, have the user pass the HTTP or HTTPS server they created to the module (like socket.io does) and have it automatically host it from there.
Please note:
The code I am trying to bundle is native to the web. Will it still work with a bundler like webpack?
Is this possible? Thanks again.

To bundle client-side code and publish it through NPM you'll need to do a couple things: learn how to package and publish modules, and write some code that can be consumed. This means using module.exports or export to expose your library, depending on whether you want to use CJS or ESM. The consumer of your library can usually be assumed to be using Webpack, Fuse, Rollup, or some other bundler which knows how to deal with modules.
You can also use a tool like Rollup yourself to build and bundle up your library for different targets and apply various transformations to it (example from my own library boilerplate). Using a bundler like this makes more and more sense as your library inevitably grows larger.
Using modules like this rather than distributing through a CDN or in some other way that puts your library code on the global/window object is generally better for consumption in complex apps, large apps, and/or apps already being built with tools like Webpack (so, anything written in React, Angular, Vue, etc.). But having a CDN distribution is still a good idea for something like your library, since it may well be used by people building sites with jQuery and vanilla JS.

Writing SDK in javascript

Im writing a SDK for a project at work. This SDK will be used by js vanilla projects as well as a angular/react projects. I currently develop the sdk.js file as bunch of functions wrapped in a big IFFE. (Immediately invoked function expression). The problem is that it feels old and messy - I want to use modern modules (import,export keywords). What are my options? It is a js file and so i cannot use the import export kewords without a development server. (even es modules as I understand). I consider develop this library (SDK) using import export keywords and bundle them into es5 code using webpack. How is this solution compared to simply use IIFE pattern without modules

in my opinion, you are correct - you should definitely consider implementing the sdk as a module (some call it a library).
if that is what you are after, i strongly recommand you to read:
Creating Node.js modules
You Don't Know JS - Modules
that should give your a staring point.

Custom NodeJS build including javascript modules

is it somehow possible to build NodeJS together with some selected JavaScript modules? I believe that for native modules, I should be able to achieve this with node-gyp, but I have no idea how to do this for JavaScript modules. The main idea is to be able to use custom application without npm install.
I know that I can use any of the bundlers like pkg or nexe, but this has some drawbacks with respect to the development...
Thanks!

You can include JS files as described in here.
Just add a link-module parameter.
> .\vcbuild link-module './myCustomModule.js'

How do you build a standalone external dependency js file for a library that has been modularised?

Basically I have a number of legacy web applications that reference and use a library from a CDN (Kendo UI). I have a task to remove such requests to remote hosts and so I'd like to encorporate the library into an existing npm script task that collects all dependencies into a single local js file which the application references.
The problem I'm having is that this library does not provide pre-compiled js files that can be used immediately (unlike other libraries such as jquery or angular), but it is modularised and requires webpack or browserify to use it.
Since our legacy applications do not use the modular approach to loading dependencies, and I have no scope to rewrite them, I would like to somehow package the modularised library into an equivalent js file that will load the library so my application can access it simply via a <script> reference to it.
I have tried using browserify to compile from a source js file that contains simply a require reference to the library, but then referencing the compiled file in my application results in an error as the library's functions are not available to my application.
Can anyone point me in the right direction?

If your using some library's that are module based, and you want to use them standalone, you will need to do 2 things.
expose the module to the global scope. Maybe using the expose loader https://github.com/webpack-contrib/expose-loader or even just assign to the window object.
If the modules are also using a library that your also including standalone, you need to tell webpack about these,.
eg.
{
externals: {
jquery: 'jQuery'
}
// other stuff..
}
Finally when you include these, remember the ordering of your script tags. eg. make sure you include jquery before your bundled javascript.

Use of Node JS for Frontend

I have heard about Node.js being used in the frontend side of the application as opposed to the backend side, but I cannot find any use cases for which it can be used. Can somebody explain the use cases for which Node.js is used in the frontend.
Also for a fairly complex system such as a CMS(Content Management System) for an e-commerce site, would Node.js be the right choice?
Thanks in advance

Node.js is a javascript runtime that uses the Chrome V8 javascript engine. The front-end already uses a javascript engine on the browser (V8 for Chrome, SpiderMonkey for Firefox, Chakra for Edge), so whether Javascript is running in the browser on in Node.js, you can expect very similar environments.
However, you might be interested in using Node.js modules on the front-end. The modules are packaged using a tool called npm. You can use module loaders or bundlers like Browserify, webpack, or Rollup.js to accomplish this.

You'd usually use Node.js and its ecosystem as part of your toolchain when developing frontend applications, but the deployed application will still be regular JavaScript that runs in the user's browser. You can use Node's package manager npm instead of Bower for managing your frontend dependencies, for instance.
And there's Browserify which will let you use npm packages that were designed for Node in your frontend JavaScript application (that runs inside the user's browser).