Monthly Archives: June 2014

How I share JavaScript files between web projects #coding #JavaScript

It’s the first wall to climb when you have multiple web projects with common code, how to share scripts between web projects without duplication, copy paste etc. Sure, I have nugget packages for libs, but do I need to have the same scripts in every web project (and branches thereof too)? My last count was 15 copies of everything (15 TFS workspaces), if I make a change to only one of my scripts, that is 14 that are potentially out of date and it’s easy to miss one!

TFS workspaces are certainly not as helpful as they could be, so I resorted to windows symbolic links / symlinks (CreateSymbolicLink function in kernel32.dll) as a means of sharing files and folders and then cloaking the folders in my TFS workspace. I can live with manually including additions and deletions as a result of the cloaking, the upside is that I can link extra scripts into one web project and share the rest with the other projects. It is perfect for an administration project that has extra scripts from the normal projects and we don’t want to have those admin scripts included in the normal projects.

So, I have a good solution that reduces the duplication, but it didn’t play well with IntelliSense (go to definition). I’m using Microsoft Visual Studio Ultimate 2013 Update 2 with the corresponding Web Essentials and IntelliSense doesn’t like these links, specifically, configuring the _references.js file in “Tools -> Options -> Text Editor -> JavaScript -> IntelliSense -> References” doesn’t seem to work for me, maybe I’ve just not got it correct yet, anyway, I gave up in favour of a different approach. It also falls flat when someone doesn’t have it configured correctly, it requires everyone to have it configured, and it’s fixed regardless of project.

Fortunately (and deliberately) the relative path to each Scripts folder is the same level of depth. So rather than use the above way to configure it, I opted for placing a reference to it in each script I wanted it, like so:

/// <reference path=”~/../../Shared/Scripts/_references.js” />

And in the _references.js the references are like so (of course there are a LOT more than just this one):

/// <reference path=”~/Scripts/angular.js” />

where the symlinks are like so:

XYZ/Solution1/Project1/Scripts/_references.js -> XYZ/Shared/Scripts/_references.js

XYZ/SolutionN/ProjectN/Scripts/_references.js -> XYZ/Shared/Scripts/_references.js

and

XYZ/Solution1/Project1/Scripts/angular.js -> XYZ/Shared/Scripts/angular.js

XYZ/SolutionN/ProjectN/Scripts/angular.js -> XYZ/Shared/Scripts/angular.js

This means I only have one copy of the scripts on my hard disk, the _references.js are shared between each project etc and I’m not constantly fighting to keep them all up to date.

Additional references can be defined in other files and referenced where required, for example the administration ones, but I tend to only keep core script references in the _references because if you get a circular reference then IntelliSense stops working!

If you are struggling with sharing scripts, then I hope this helps in some way, please post a comment with your experiences

Advertisements