Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loading non amd modules with require.js

Currently I am using require.js for a fun side project I am working everything is working fine except a code syntax higlighting plugin called prism.js. I can see that the plugin is being pulled via the network tab in chrome, but the plugin isn't initializing.

I am not sure if it's a require problem or uf the plugin is the issue and was wondering if anyone could help.

Here is a look at my main.js:

require.config({
  // 3rd party script alias names
  paths: {
    // Core Libraries
    modernizr: "libs/modernizr",
    jquery: "libs/jquery",
    underscore: "libs/lodash",
    backbone: "libs/backbone",
    handlebars: "libs/handlebars",

    text: "libs/text",
    prism: "plugins/prism",

    templates: "../templates"
  },
  // Sets the configuration for your third party scripts that are not AMD compatible
  shim: {
    "backbone": {
      "deps": ["underscore", "jquery", "handlebars"],
      "exports": "Backbone"  //attaches "Backbone" to the window object
    }
  }
});

// Include Specific JavaScript
require(['prism', 'modernizr', 'jquery', 'backbone', 'routers/router', 'views/AppVIew' ],
  function(Prism, Modernizr, $, Backbone, Router, App) {
    this.router = new Router();
    this.App = new App();
  }
);
like image 594
Lawrence Avatar asked Oct 31 '12 23:10

Lawrence


People also ask

Can I use require in JS file?

“Require” is built-in with NodeJS With require , you can include them in your JavaScript files and use their functions and variables. However, if you are using require to get local modules, first you need to export them using module. exports . For example, let's assume that you have a file called blogDetails.

Is RequireJS still relevant?

RequireJS has been a hugely influential and important tool in the JavaScript world. It's still used in many solid, well-written projects today.

What is require () in JavaScript?

require() statement basically reads a JavaScript file, executes it, and then proceeds to return the export object. require() statement not only allows to add built-in core NodeJS modules but also community-based and local modules.

What is the difference between RequireJS CommonJS and AMD loaders?

The main difference between AMD and CommonJS lies in its support for asynchronous module loading. "The main difference between AMD and CommonJS lies in its support for asynchronous module loading."


2 Answers

Change the shim section to include prism, and make sure it exports "Prism":

shim: {
  "backbone": {
      "deps": ["underscore", "jquery", "handlebars"],
      "exports": "Backbone"  //attaches "Backbone" to the window object
  },
  "prism": {
      "exports": "Prism"
  }
}
like image 153
Chris Salzberg Avatar answered Sep 29 '22 15:09

Chris Salzberg


Handlebars and Prism are not compatible with AMD(Asyncronous Module Definition) so you need to shim it yourself like below;

requirejs.config({
    shim: {
        'backbone': {
            "deps": ["underscore", "jquery", "handlebars"],
            "exports": "Backbone"  //attaches "Backbone" to the window object
        },
        'handlebars': {
            "exports": 'Handlebars'
        },
        'prism': {
            "exports": "Prism"
        }
    }
});

You may wish to look at the require.js shim documentation site; http://requirejs.org/docs/api.html#config-shim

Hope this will help

like image 28
Gokhan Tank Avatar answered Sep 29 '22 13:09

Gokhan Tank