在木偶项目中包含javascript文件

Question

I have a marionette project, and I have my main js file which looks like:

define(["marionette", "handlebars"], function(Marionette, Handlebars){
    ...
});

Now I want to make a structure of my big app. So I would like to separate the content of this function to different files. So how can I do something like:

define(["marionette", "handlebars"], function(Marionette, Handlebars){
    include routes.js
    include menu/model.js
    include menu/views.js
    ...
});

I think require.js can help me, but I don't know how. Any ideas?

Answer 1

To require a file in the AMD structure (like the one you describe), you can give the path to the file in the array and get the exported value as argument of the callback like this.

define(
  [
    "marionette",
    "handlebars",
    "routes",
    "menu/model",
    "menu/views"
  ],
  function(Marionette, Handlebars, Routes, Model, MenuView){
    // ...
});

Since this is a very basic thing in AMD, you should really read the documentation of Require.JS ( here ) and explanation about AMD modules (like this one ). You will find lot of information about the AMD structure, etc

Answer 2

If you prefer, browserify lets you to load front-end javascript modules using the require syntax. It looks like this.

// library includes
var Marionette = require('backbone.marionette');
var handlebars = require('handlebars');

// custom includes
var routes = require('./routes.js');
var models = require('./menu/models.js');
var views = require('./menu/views.js');


var App = new Marionette.Application();

It includes modules recursively and there is less code. It implements the Common.js format so it looks and feels the same as node.js.