Using RequireJS alongside non-AMD JavaScript files

Question

I'm trying to convert a JavaScript-heavy page to use TypeScript, with RequireJS to manage the module dependencies.

The problem I've got is that, as well as the inter-dependencies between the TypeScript files, the page also depends on some common JavaScript files that are shared with other parts of the system, not yet converted to AMD.

Is it very dangerous to put non-AMD scripts in normal <SCRIPT> tags above the tag for Require, and just assume that they're loaded?

If that's a bad idea, what's a better way to handle this? Do I need to have AMD and non-AMD version of each script? Or do I need to convert all scripts so that they optionally call define()?

Turning Javascript into Typescript is like turning gold into ash :/ — jAndy
– jAndy, Commented Jan 29, 2013 at 16:41
depends wether your code is asynchronous or not , but without seeing the code , nobody knows. — mpm
– mpm, Commented Jan 29, 2013 at 16:42
@mpm Not exactly sure what you mean by asynchronous in this context.There are two JS files that all pages use, loaded with normal <SCRIPT> tags. Just wondering what the best way to handle these is when using RequireJS. — Jonathan Sayce
– Jonathan Sayce, Commented Jan 29, 2013 at 16:50

ddotsenko · Accepted Answer · 2013-01-30 11:56:12Z

Recent versions of RequireJS allow you to pretend that the plain JS files are actually AMD modules that just return nothing.

The most recent version I tried - 2.1.4 - actually allows you to treat plain JS files like modules. Example:

require(
    [
        'path/to/module' // <- AMD module
        ,'path/to/plainjs' // <- actually a plain JS file
    ]
    , function(module, plain){
        // module will be per define in that file.
        // plain will be 'undefined' type
    }
)

You can just mix module-like refs to plain JS files freely. As long as they are loaded in the right order, they will update whatever globals they update and you get what you want. Example:

require(['js/underscore'], function(){

    // nesting to insure Underscore, a prereq to BackBone
    // completes loading before backbone starts
    require(
        [
            'path/to/module' // <- AMD module
            ,'js/backbone' // <- actually a plain JS file
        ]
        , function(module){
            // module will be per define in that file.

            window.BackBone // is available for you

        }
    )

})

Note, while RequireJS used to require that you add ".js" to the end of the plain JS files to indicate that they are plain JS, in the examples above you do NOT use ".js" This, extension-less module reference allows the module ID to follow paths and maps aliases, while ids with .js are treated as literal and are never translated.

I've tried this with knockout however ko is not exists in window (globally)

Fenton · Accepted Answer · 2013-01-29 17:04:14Z

1

You can manually include the additional scripts in script tags, but this could become the reason things always break for your team (someone forgot to add a particular script).

You can reference the require.d.ts definition from Definitely Typed and make direct calls to the require function rather than an import statement, which might make things more consistent for you.

answered Jan 29, 2013 at 17:04

Fenton

253k74 gold badges403 silver badges413 bronze badges

Collectives™ on Stack Overflow

Using RequireJS alongside non-AMD JavaScript files

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related