CODEWITHSUNDEEP
javascriptrequirejstypescriptamdbundling-and-minification
Marius Schulz
Marius Schulz

Reputation: 16440

Use require.js to load named TypeScript modules

Brief problem description: I'd like to use TypeScript to generate AMD-style named modules, which I then want to load from a bundled and minified file using requires.js.

Questions:

I want to combine the benefits of having all scripts bundled and minified (so that no additional HTTP requests are necessary) with loading named AMD modules which are generated by TypeScript.

Update: I was thinking along the lines of the following JavaScript solution:

define("greeter", ["require", "exports", "jquery"], function(require, exports, $) {
    function greet() {
        alert("Hello World!");
    }

    exports.greet = greet;
});

Then I could bundle and minify the generated JavaScript modules into a file that could easily be cached by browsers. Also, require.js wouldn't have to go out there and grab the modules via several GET requests — they're already defined. Plus, I'd have all the advantages of using TypeScript to generate those modules.

Upvotes: 3

Views: 2101

Answers (1)

Fenton
Fenton

Reputation: 250882

I would tackle this by using RequireJS directly in TypeScript.

There is a definition file for it and I've written an example for using raw RequireJS in TypeScript (rather than import statements) with jQuery, that you might be able to adapt.

Here is the resulting TypeScript code...

///<reference path="require.d.ts" />
///<reference path="jquery.d.ts" />
require(['jquery'], function ($) {
    $(document).ready(() => {
        alert('Your code executes after jQuery has been loaded.');
    });
});

If this doesn't do what you want, show me how you would do it in JavaScript and I'll happily supply the TypeScript equivalent.

Upvotes: 2

Related Questions