Develop Reference

How to maintain same version for a library in a website with 20+ webpages

I'm using a third party JavaScript library in a website with 20+ HTML pages each with its own JavaScript and CSS file. But the problem is if a new version is available to the library then, I have to go through all the HTML files to edit the version number. How to maintain the same version of the library in all the webpages?

If you're using any kind of server-side processing before serving the pages, you can have a separate file that contains just the (shared) script tags that need to be loaded and include that file with each of the HTML pages.
If not, editors like VS Code (Ctrl + Shift + H) can do Find/Replace across all files in a project.
Finally, you could omit the version number from the script file names (you'll just have to be aware of how the caching works - people may not get the new file right away).

If you are not using any kind of server-side processing, you could create your own javascript file loader that comes from your own file and loads the external javascript. So you only have to change the external part in one file that gets included in all your other html pages.
Something like this: JavaScript - function to load external JS files is needed

AngularJs SPA Javascript file

Do i have to include all my javascript file while loading main index page?
In single page application when we are not logged in, we include all of our .js file in main index file. This contains js file that is only needed when users are logged in.
What is better approach of managing angular app in this context?

Simple answer: yes.
Your application is a single-page one, so you can combine all JS files into one and load it at one request. It saves time for processing in the future.
Alternatively, create two pages login.html and others.html, then load two different sets of JS files accordingly.
Normally, nowadays the bandwidth is not the bottleneck, loading a larger JS file does not make trouble (usually).

You can split your code into multiple modules and then just load the js needed for that module.
I suggest using Gulp with packages to inject HTML when appropriate. You then have single lines of code as place holders for your Javascript and you run the Gulp task to inject the Javascript into the areas where it is needed.
You could also run gulp tasks to minify your js into just a few minified files. You will need to be sure your js in min safe (gulp can do this too).

If you make AMD - most often using RequireJS - then you won't need to include all from the very beginning.
A while ago we did a similar project, although without AngularJS, and by using RequireJS we made the different pages, which use different files. And this way people's browsers will never download certain files if they never go to certain pages.
(Of course, we had many pages inside the app, not just 2 or 3, where this wouldn't make any difference.)

Cost of using require.js in an existing project?

I am planning to use requireJS in my project. But does that cost more work to add it to my existing project as i have a good number of js files already in my project. what is the easier way to rope in require js into my project?

requireJS is good for avoiding unwanted scripts from loading.
if you think that your project has lot of Javascript files, that are loading unnecessarily, you can go for RequireJS. You can load the Javascript files in your page dynamically.
This will help you to reduce unwanted load in your application. This will also increase the speed of your application.
You need to add a define/require with the js files that are needed, a return at the end of each file. And you are done with 90% of code change. Your bigger part is calling the function of one file from another. You need to change them at most of the area in the code.

Should pages that are included in other pages have their own script?

I am using RequireJS and I am creating a own script file for each page. However I also have some components that are included into some of the pages (server side). Should these pages also get their own script file, or should the necessary javascript be in the containing page? Some of the functionality for the included pages are common to many pages.

I think you'd be better off thinking about your javascript as reusable modules rather than page-specific functionality. So, say your page has a search box which initiates an AJAX request, a few date pickers, and a whole bunch of tabs. Each of these should be a module (or if the functionality they provide is complex enough, a few modules). By breaking down your app into small pieces that have very focused aims, you make it easier to test each bit in isolation (automated unit tests) and reuse the functionality elsewhere.
Now as to how to load your javascript modules, there's a point where it makes sense to strategically load stuff based on user needs (ex: core.js is loaded by default but search.js isn't loaded until the user accesses the "search" tab) but you can get pretty far just packaging everything into a single file (require's r.js tool does this for you) and using the same script file (main.js) on every page.
When using a single script file, keep in mind that your js will need to work when the target of it's functionality is not present. jQuery makes this super simple and you almost don't have to think about it - ex:
$('#js-foo').on(...) // <-- this doesn't blow up if '#js-foo' isn't on the page.
I've also seen people set a data-attr on the body tag for the page - e.g. data-page="foo" and key js off of that:
var page = $('body').data('page');
if (page === 'foo'){
component1.setup();
component2.setup();
}
In your case, I would try building everything into a single file using RequireJS / AMD-style modules. Each component would get its own module file (mycomponent.js), your main.js would require() all your modules and init things appropriately, and finally you'd configure your r.js build to package everything into a single file when deploying to / running in production.
If you are interested in exploring this topic more, check out these posts:
Single Entry Point FTW
Single Entry Point Redux

Way to link multiple javascript files without minifying or combing into one document?

Is there a way to link multiple javascript files without making them one file?
What I would like is to have one file (javascript or otherwise) which houses links to my other javascript files.
For example, the webpage has one file called allmyscirpts.js, and inside this file is a list of links to my actual individual, separataed javascript files.
Is this possible?
Tod

JS can't simply import more JS, but you could easily write a simple server-side script that concatenates your files together. If you can't/won't work on the server, scriptloader libraries are very plentiful out there these days. Check out require.js, lab.js, yepnope.js, etc. and see if one of them suits you well.

The only way I can think of is to load Javascript files through ajax. The YUI Loader you to not only load all your js files (and those from YUI) within javascript, but it also allows you to configure dependencies between your js files. So For instance, if widget1.js requires global.js, you can configure that dependency, then you can tell the loader to load "widget1" and the loader will also load global.js when it loads widget.js.
Unlike css, I do not believe there is built in syntax in javascript that automatically includes another javascript file. But there are javascript utilities out there that allow this.
For a simpler solution than the YUI Loader, check out the YUI get utility. For my projects I have setup the YUI loader, and as a result my HTML pages only have about 2 or 3 javascript files included, and the rest of what I need is loaded on demand by the Javacript controller for that page.