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();
}
);
“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.
RequireJS has been a hugely influential and important tool in the JavaScript world. It's still used in many solid, well-written projects today.
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.
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."
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"
}
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With