Use require.js to load named TypeScript modules

Question

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:

Is that possible?
Or do you suggest another approach?

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.

Fenton · Accepted Answer · 2013-02-08 09:32:45Z

2

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.

answered Feb 8, 2013 at 9:32

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Marius Schulz Over a year ago

I have updated my question and included a more detailed explanation. Is that possible or am I just making things up?

Fenton Over a year ago

If you bundle and minify all your files, I would recommend just including those files in a script tag and ditch all module-loading altogether. That would be the simplest solution to reduce the requests (to 1 request).

Marius Schulz Over a year ago

So you're suggesting not to use external TypeScript modules at all? Instead, I could use internal TypeScript modules, right?

Marius Schulz Over a year ago

Alright, that sounds like a plan. However, do you know if it's possible to let TypeScript generate named AMD modules?

Fenton Over a year ago

Ah I see - I don't know of a way.

|

Collectives™ on Stack Overflow

Use require.js to load named TypeScript modules

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related