I seem to be overlooking something rather simple here, but I'm struggling to figure it out. Lately, I've started using AMD (RequireJS) in my web applications that run in browsers.
Initial Setup
With TypeScript 1.8, there is a new feature that allows you to compile an entire project consisting of external modules into a single output file when using AMD.
To take advantage of this, I made the decision to switch from internal modules to external modules for all my VS2015 project files with the following compiler arguments:
--module AMD --outFile main.js
Generated Output
The resulting main.js output file contains all the modules included in the project:
main.js
define("Project/MainModule", ["require", "exports" ...], function (require, exports ...) {
"use strict";
console.log("MainModule defined");
// ...
});
...
Usage Scenario
Now, my question is how do I execute Project/MainModule from a file like index.html so that it shows "MainModule defined" in the console? I have RequireJS set up to handle the AMD syntax and have specified the loading of main.js immediately:
index.html
<script data-main="main" src="Require.js"></script>
This code successfully loads main.js, as verified by adding a console.log statement after the list of defines in that file. Apologies if this is a basic query, I couldn't find relevant information on how to utilize a compiled application using this method (maybe I used the wrong search terms?).
Edit: I attempted to require the module by its name:
index.html
<script>
window.onload = function () {
require(["Project/MainModule"], function () {
// this
});
}
</script>
However, unfortunately, RequireJS cannot locate the module.