Understanding r.js options w/grunt & backbone and relative paths

Question

I'm trying to figure out how to use r.js. I keep getting errors thrown such a module path does not exist, or files getting dumped where they shouldn't be.

I've got a single page application that is integrated with wordpress. I've adopted this backbone boilerplate for my general structure, although I've set things up quite different. My file structure is shown below.

.Theme Folder
├── _assets
|   ├── _application
|   |   ├── css
|   |   ├── fonts
|   |   ├── img
|   |   ├── _js
|   |   |   ├── main.js  //this is my require.js config file
|   |   |   ├── _app  //here's where the boilerplate structure comes into play
|   |   |       ├── collections
|   |   |       ├── models
|   |   |       ├── routers
|   |   |       ├── templates
|   |   |       ├── views
|   |   |   ├── libs
|   |   |   ├── utilities
|   |   ├── scss
|   |   ├── video
|   └── build  //Concatenated application directory mirror
|   └── gruntfile.js
|   └── bower.json
|   └── package.json

To save the heartache of deciphering my gigantic grunt file. Basically I originally set it up so that everything gets conatenated, uglified, and compiled into the build folder. I created a simple task for r.js to just test things out. I get an error saying my lodash library cannot be found (first path in my main.js file). It thinks lodash is in assets/lodash.js it's ignoring my baseUrl property in my main.js (require.js configuration) it's actual location is assets/application/js/libs/lodash.js. My requirejs task is below:

        requirejs: {
          compile: {
            options: {
              baseUrl: "./",
              mainConfigFile: "application/js/main.js",
              name: "./application/js/main",
              out: "./build/js/optimized.js"
            }
          }
        }

I'm having the hardest time figuring out what exactly rjs is doing. When I expect it to work it's not looking for the files in the right directory. When I configure it to find the right files it copies my entire assets folder and dumps it into my build folder... Which has caused a lot of confusion as to what all r.js is doing and what it wants me to input for it's options.

This is the error I am currently getting:

>> Error: ENOENT, no such file or directory
>> 'path-to-theme-folder-here/assets/libs/lodash.js'
>> In module tree:
>>     application/js/main.min

Louis Louis · Accepted Answer · 2014-10-14T10:22:05

It seems to me with the description you give, this should work:

requirejs: {
  compile: {
    options: {
      baseUrl: "application/js/",
      mainConfigFile: "application/js/main.js",
      name: "main",
      out: "build/js/optimized.js"
    }
  }
}

Understanding r.js options w/grunt & backbone and relative paths

1 Answers