Question

So I am just getting started with Yeoman. I just setup a basic project and I am not sure where to put my scripts. Should I just put stuff in the provided app.js? Or should I make my own files and add them to some build script somewhere or require them somewhere? Any advice is appreciated.

I also don’t understand the purpose of this in the app.js file:

define([], function() {
return 'Hello from Yeoman!';
});

Answer 1

Okay, so you opted to use RequireJS for your project. RequireJS allows you to break your code down in modules – not only improving the tidiness of your code (reducing spaghetti code), but also de-cluttering the global namespace.

If you look in your main.js file, you’ll notice the following:

require(['app'], function(app) {
  //use app here
  console.log(app);
});

What this does is include app.js into your main javascript file and runs it.

Now, where i think you’re getting confused, is with the new syntax RequireJS introduces – but essentially each file forms a closure and has its own scope.

Imagine the following:

If you weren’t using RequireJs to separate your files, and all the code was in one single file. It would look like this:

function app () {
    return 'Hello from Yeoman!';
}

console.log(app());

You can write whatever you want inside app.js as long as it’s wrapped with the required RequireJS syntax:

define([], function() {
    //Start writing your code here
});

And that’ll be included in main.js and compiled down into one file for production.

The docs for Yeoman are a little sparse at the moment, so i’d recommend you head over to the RequireJS site and read through their documentation if you’re keen on writing modular JavaScript.

You can always choose not to include RequireJS when initialising a new Yeoman project if you don’t want/need this functionality.

Hope that helps 🙂