Question

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

从 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"

在木偶方面，我可以加载一个简单的应用程序。

的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模块？我在这里阅读了有关使用AMD https://github.com/marionettejs/backbone.marionette/wiki/AMD-Modules-vs-Marionette's模块的模块的信息，但我不能在我的marionette模块定义中使用 define 关键字，因为“define”和“require”不会公开。早午餐仅使用它来加载其插件和我的应用程序源文件。

通常的Marionette模块如下所示：

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启动你的bootstrapper（在这个例子中是main.js）。它应该在名为“data-main”的脚本标记属性中提供。也许这是Brunch为你做的事情，我不确定。

<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启动任何为该函数添加前缀的资源，如此...

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

    // code goes here
});

Marionette JS模块，Brunch JS和需要JS项目结构

1 个答案: