CODEWITHSUNDEEP
javascriptrequirejstypescriptjs-amd
ryan
ryan

Reputation: 6655

TypeScript, RequireJS shim, ambient module declaration

I've got the following which points to a backbone.d.ts definition.

import Backbone = module("../../../dep/backbone/backbone");

export class Codebook extends Backbone.Model {

    defaults() {
        return {
            id: -1,
            title: -1
        }
    }

    initialize() {
        // do nothing
    }

}

With --module amd it generates the following.

define(["require", "exports", "../../../dep/backbone/backbone"], function(require, exports, __Backbone__) {

I've shimmed backbone with my RequireJS configuration file because of the global. I'd like for my define to just say backbone instead of the relative path. Is there any workaround besides a post-build process to manipulate the define?

Upvotes: 4

Views: 3713

Answers (3)

blorkfish
blorkfish

Reputation: 22874

I have just put together a blog on how to use AMD modules in TypeScript.

Firstly, just use a reference path to backbone as follows: 

/// <reference path="../../modules/Backbone.d.ts" />

Then define your class without an import:

export class MTodoCollectionView extends Backbone.View {
...
}

Then your require.config, and apploader:

require.config({
    baseUrl: '../',
    paths: {
        'underscore': 'lib/underscore',
        'backbone': 'lib/backbone'
    }, 
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    }
});

require(['jquery','underscore','backbone','console','app/AppMain', 
     ], 
    ($, _, Backbone, console, main) => {
    // code from window.onload
    var appMain = new main.AppMain();
    appMain.run();
});

Once the app hits the require block of code, Backbone is globally defined.
Have fun,

Upvotes: 0

Absolom
Absolom

Reputation: 1389

Instead of using a relative path, I always use the path from the root. Something like:

import underscore = module('libs/underscore/underscore');

and the hack is that you can define the same name in your shim. Something like this: 

require.config({
    paths: {
        'libs/underscore/underscore': 'libs/underscore/underscore'
    },
    shim: {
        'libs/underscore/underscore': {
            exports: '_'
        }
    }
});

By always using a path from the root, the path stays the same as opposed as if you were using the relative path. It's a hack, but it works for me (GitHub).

Upvotes: 1

Fenton
Fenton

Reputation: 251262

I think the solution to this issue is to put the Ambient Declaration in the same location as the eventual real module, so you can reference it with the same path.

So backbone.d.ts needs to be in the same location as backbone.js.

Upvotes: 3

Related Questions