Marionette JS 模块、Brunch JS 和 require JS 项目结构

Question

我正在使用 BrunchJS 来处理咖啡脚本和资产编译。 该项目使用了几个Brunch插件，例如需要“commonjs”包装器才能运行的brunch-handlebar。

从我的 config.coffee

中提取

    modules:
        # We cant avoid require js wrapping since brunch modules use commonjs
        # Otherwise Marionnette JS offers its own modules loading strategy
        # loading mechanism
        wrapper: "commonjs"
        definition: "commonjs"

在 Marionette 方面，我可以很好地加载一个简单的应用程序。

index.html

  <script type="text/javascript">
    var app = require('application');
    app.initialize()
  </script>

application.coffee

# 加载车把块助手 需要'lib/view_helper'

class Application extends Backbone.Marionette.Application
    initialize: =>

        @addInitializer((options) =>
            console.log "HELLO WORLD"
            AppLayout = require 'views/app_layout'
            @layout = new AppLayout()
            @layout.render()                
        )

        @start()

# module.exports is the object that's actually returned as the result of 
# a require call.
module.exports = new Application()

从那里开始我如何使用 Marionette JS 模块？我在https://github.com/marionettejs/backbone.marionette/wiki/AMD-Modules-vs-Marionette's-Modules 阅读了有关在 AMD 中使用模块的信息，但我不能在我的木偶模块定义中使用 define 关键字，因为“define”和“require”没有公开。 Brunch 只使用它来加载它的插件和我的应用源文件。

一个常见的木偶模块如下所示：

MyApp = new Backbone.Marionette.Application();

MyApp.module("Foo", function(){

  // module code goes here

});

MyApp.start();

在一个单独的文件 moduleA.coffee 我尝试这样做：

MyApp = require 'application'

define ["MyApp", "Marionette"], (MyApp, Marionette) ->
  MyModule = MyApp.module("MyModule")

  MyModule.addInitializer ->
    console.log "HELLO FROM MODULE"

  MyModule

但是define没有定义。

我也尝试过：

MyApp = require 'application'

MyApp.module "ModuleA", (MyApp, ModuleA, Backbone, Marionette, $, _)  ->
    ModuleA.addInitializer ->
        console.log "HELLO FROM MODULE"

但是我需要在 application.coffee 中要求我所有的木偶模块（“moduleA”）并遇到一些循环依赖问题。

我正在考虑的解决方案之一是禁用 BrunchJS commonjs 包装并从供应商文件夹加载把手，而不是作为早午餐插件。

Answer 1

JavaScript 示例以防万一！

我认为重要的是通过 require 启动引导程序（在本例中为 main.js）。它应该在名为“data-main”的脚本标记属性中提供。也许这是早午餐为你做的事情，我不确定。

<script type="text/javascript" data-main="js/main" src="js/libs/require.js')}"></script>

那么你的 main.js 可能看起来像这样。

/* global require, console */
require.config({

    baseUrl: 'js',

    paths: {
        'jquery': 'libs/jquery/jquery',
        'underscore': 'libs/underscore/underscore',
        'backbone': 'libs/backbone/backbone',
        'backbone.wreqr': 'libs/backbone.wreqr/lib/backbone.wreqr',
        'backbone.babysitter': 'libs/backbone.babysitter/lib/backbone.babysitter',
        'marionette': 'libs/marionette/lib/core/backbone.marionette'
        ...
    },

    shim: {
        'underscore':  {
            deps: ['jquery'],
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'backbone.wreqr': {
            deps: ['backbone', 'underscore'],
            exports: 'wreqr'
        },
        'backbone.babysitter': {
            deps: ['backbone', 'underscore'],
            exports: 'babysitter'
        },
        'marionette': {
            deps: ['backbone', 'backbone.wreqr', 'backbone.babysitter'],
            exports: 'Marionette'
        }
    }
});

// Start the main app logic.
require([
    'app'
],
function (App) {
    App.start();
});

一旦这一切都设置好了，你可以启动任何以定义为前缀的资源，像这样......

define([
    'jquery',
    'underscore',
    'backbone',
    'marionette'
],
function ($, _, Backbone, Marionette) {
    'use strict';

    // code goes here
});