The very simplest way to "require" or "import" to modularise javascript ASP.Net MVC 5, Visual Studio 2015

Question

All I would like to do is to be able to modularise my javascript/jquery/ajax client-side code, to use some existing library code which I have written and now want to use in the scripts section of my pages - using something simple like in Node "require" or ES6 "import" syntax.

[ASP.Net MVC 5, Visual Studio 2015]

In webpage:

@section scripts
{

    @Scripts.Render("~/Scripts/Views/Items/Index.js")

}

In Index.js:

$(function ()
{
    var myLib = require("../Shared/my-lib");

OR

$(function ()
{
   import * from "../Shared/my-lib";

In my-lib.js:

export var myFunction1 = myFunction1;
export var myFunction2 = myFunction2;

I am an experienced .NETter but a bit of a js noob, so if I am missing anything utterly obvious, please tell me kindly! I just want to keep it DRY, you know?

I tried just doing it as above but it throws syntax errors about either "import" or "require", so I figure it doesn't just work out of the box.

I've looked up Browserify and RequireJS - but that seems like a TON of fiddly setup (yeah i am fine with npm but it is all the settings files, build files, specific way of writing the library code ... etc. etc.) - do I really have to do all that just to "include"/ import some code?

Should I write my library as OO javascript? Would that help?

At the moment I am just doing:

 <script src="@Url.Content("~/Scripts/Views/Shared/my-lib.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/Views/Item/Index.js")" type="text/javascript"></script>

which doesn't strike me as very elegant...

Answer 1

Depends on how many files you are going to maintain and dependencies between those files. If this is just about a few files then you can simply include them as you already do and put the repeated code into JS module (of course in order) to keep your code DRY.

e.g.

var myLib = (function(){
    var privateVar = 1;

    var method1 = function(){
    };
    // export
    return {
        method1: method1
    }
})();

Also, using jQuery you can always load your JavaScript conditionally if you need so using $.getScript so you can load only particular JS file depending on your current page route, name etc.

If however we are talking about more JS files (even with only 10 files/JS modules the maintaining of project can become pretty hard if you consider more complicated dependencies scenario such as file1 depends on file2, file4 on file3 and file2 etc.). In this case it is definitely worth to invest your time into some AMD framework such as RequireJS. Other frameworks such as Angular have their own modularization features and these can actually live together with RequireJS as was discussed here.

Also, very often project seems to be simple at the beginning but then grows unexpectedly fast. It's up to you to decide though.

You can also consider some existing nuget packages such as RequireJS.Net to help you with integration into ASP.NET MVC project.

Btw. In terms of the import and export - as stated in docs:

Note: This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.