Since most issues with require.js build has to do with file structure and relative path reference, I created a repo here: https://github.com/ttback/requirejs-example for easier troubleshoot.
The error is when i run grunt, I will get no such file or directory requirejs-example/src/js/bundle/js/bundle/utils.js
This is due to the wrong baseUrl. I want it to be src/ but I can't set it since it goes to find the dependencies for src/js/bundle/main.js based on my Gruntfile. So the base is at src/js/bundle. The current main.js works with the index.html, if I change the relative path to utils.js from .js/bundle/utils.js to ./utils.js inside main.js, the app wil break.
Is there any way I can make the grunt-requirejs work with what I have?
First of all, points for adding a decent code example.
The problem is easy to solve actually.
Simply change:
var utilsObject = require('./js/bundle/utils.js');
to:
var utilsObject = require('./utils');
Now the build tool and the app will work.
By adding a .js suffix you were bypassing the baseUrl rules that RequireJS applies to module paths. From the docs:
RequireJS also assumes by default that all dependencies are scripts, so it does not expect to see a trailing ".js" suffix on module IDs.
There may be times when you do want to reference a script directly and not conform to the "baseUrl + paths" rules for finding it. If a module ID has one of the following characteristics, the ID will not be passed through the "baseUrl + paths" configuration, and just be treated like a regular URL that is relative to the document:
- Ends in ".js".
- Starts with a "/".
- Contains an URL protocol, like "http:" or "https:".