Working project structure that uses grunt.js to combine JavaScript files using RequireJS?

I use the grunt-contrib-requirejs task to build project based on require.js. Install it inside your project directory with: npm install grunt-contrib-requirejs –save-dev BTW: –save-dev will add the package to your development dependencies in your package.json. If you’re not using a package.json in your project, ignore it. Load the task in your grunt file with: grunt.loadNpmTasks(‘grunt-contrib-requirejs’); … Read more

How to use UMD in browser without any additional dependencies

Ok, so you are running in an environment without RequireJS, CommonJS, SystemJS, etc. The key line is factory((global.mymodule = global.mymodule || {})) this does a few things: If global.mymodule truthy, then it is equivalent to global.mymodule = global.mymodule // A noop. factory(global.mymodule) Otherwise it is equivalent to: global.mymodule = {} factory(global.mymodule) Inside the factory: Your … Read more

Interacting with require.js modules from the Firebug/Chrome console?

Say we have module /app/scripts/methodsModule.js that returns a few methods: define({ someMethod: function() { // do stuff }, anotherMethod: function() { // do some more stuff } }); In our data-main file /app/scripts/main.js we have: require([‘methodsModule’], function(methods) { methods.someMethod() // call someMethod methods.anotherMethod() // call anotherMethod }) Once requireJS loads up our data-main, we can … Read more

Catching module loading errors and processing them

It is also possible to use errbacks to have customized error handling appropriate to the specific use of require. Errbacks are documented here http://requirejs.org/docs/api.html#errbacks. Basically, you can add to require a function to be called if the load fails. It comes right after the function to be called if the load is successful. Chin’s case … Read more

How does RequireJS work with multiple pages and partial views?

Update – I’ve added an example of using RequireJS with modular HTML components. Build tool example included – https://github.com/simonsmith/modular-html-requirejs I have also written a blog article about this – http://simonsmith.io/modular-html-components-with-requirejs/ The approach of just using main.js for everything is probably more suited to a single page application. The way I’ve handled this situation is to … Read more