JavaScript project type for Visual Studio?

Question

I have a tasks that involves creating a JavaScript library that will then be used by multiple projects in a Visual Studio solution. Ideally I would like to find a project type that would, for my JavaScript code, behave as if it was a C# class library, i.e.:

• It would "compile" (minify, check by Closure, ...) the JavaScript code into some output **.js* file
• This output could be "referenced" by other projects, e.g. by an ASP.NET MVC project
• I could specify a "build order" of my projects (standard VS feature)

Is this possible with VS 2010 / 11 or do I need to write some BAT / PowerShell files and script it myself?

Similar but slightly different question: Visual Studio Project Template for JavaScript/VBScript?

Answer 1

Based on my experience developing Asp.Net MVC, Visual Studio has limited support for JavaScript. I suppose there is something you can do to mimic the behavior you want:

1. Create a project to store your JavaScript files, perhaps a Class Library project it doesn't really matter, as long as it supports Build Events. Put your JavaScript files inside new project.

2. Create a post build step on this project to minimize your JavaScript using an external tool. I use YUI Compressor. Your post build step should contain lines similar to the following:

   java -jar $(ProjectDir)Scripts\yuicompressor-2.4.7.jar $(SolutionDir)Scripts\yourJsFile.js -o $(SolutionDir)Scripts\yourJsFile.min.js --charset utf-8

3. Include this new project in your solution. Then for your Asp.Net projects, set up your Active Server Pages such that they reference the JavaScript files, I am using Razor syntax as an example. It might be tricky to specific the correct path though:

@if (@Model.IsDebug)
{
<script src="@Url.Content("~/Scripts/yourJsFile.js")"  type="text/javascript"> </script>
}
else
{
<script src="@Url.Content("~/Scripts/yourJsFile.min.js")"  type="text/javascript"></script>
}

Again it might be tricky to ensure that you can accurately reference the JavaScript files from your Asp.Net project. But I'm sure there is a way to do it. Perhaps you can have your post build step copy the JavaScript files to some common location. If you do this you will also want to mark the post build event on your JavaScript project as "Always Run", so the JavaScript files are always copied.

Answer 2

Good question (+1). Me decision was to put all javascript general files to separate javascript project and use linked files to needed js files in web/mvc project.

This way you get possibility to use subversioning control from javascript project side and compacting and merging js files from separate general projects side using all available tools.

Answer 3

I am really curious about this! Please @ comment to me if anyone comes up with other/better ideas.

Option 1: ASP.NET Web project with Web Essentials

If you just want a front end javascript project, this is an easy option. Web Essentials is easy to use and install in Visual Studio. You can use this for easy minification. Then you can use Qunit for testing. This is a pretty easy and light weight entry point into javascript client-side development.

Option 2: Node.js Tools for Visual Studio

Use Node.js Tools for Visual Studio. It will give you project templates for a lot of these good things. You may not end up using node.js especially if you are just creating a client side js library, but having node.js is helpful for testing and you will want/need npm to install all the other good things mentioned in my original answer (Option 3).

There is a lot of setup involved with this one. It may be a barrier to entry for some .NET developers.

Option 3: Web Site Project

Here is what I have done in the past:

I actually created this project in Eclipse! (Don't hate me). Later I created a Visual Studio solution with a Web Site Project. I installed node.js which is certainly not required, but I was using it as a lightweight web server.

Then you can use Nuget or Bower to install other things like:

1. require.js for module management
2. jasmine for unit testing
3. grunt or gulp for builds (minification)
4. You could install jslint or jshint for code correction.

Not all of these things are required. I think Bower is integrated into Visual Studio 2015. Some of these will require command line builds, but there are very few commands to run once you set it up.

Answer 4

If you want access to pre-build/pos-build (not really needed with task runner explorer), create an empty ASP.net Core project (it will hide the node_modules folder and files will automatically be put into project (just copying them, it is not required to add them manually). BUT, this generates an obj and bin folder, which can be annoying. One good thing here is that if you build your project in the wwwfolder, you can use the publish command from Visual Studio.

If you don't care about none of the above, a shared C# project don't generate output, so it is a good template to make a javascript project (I use it for all my vue spa projects). The downside here is that file nesting won't work =\