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

我使用BrunchJS来处理咖啡脚本和资产编译。该项目使用多个Brunch插件，如需要“commonjs”包装器操作的brunch-handlebar。从我config.coffeeMarionette JS模块，Brunch JS和需要JS项目结构

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的模块，但由于“定义”和“要求”没有公开，所以我不能在我的木偶模块定义中使用定义关键字。 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

但定义没有定义。

我也试图做的事：

MyApp = require 'application' 

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

但后来我需要需要application.coffee我所有的提线木偶模块（“moduleA”），并遇到了一些循环依赖的问题。

我想到的解决方案之一是禁用BrunchJS commonjs从供应商文件夹中包装和加载把手而不是作为早午餐插件。

来源

2014-01-15 coulix

你有没有设置你require.config？我不确定coffeeScript，但我可以给你一个js例子。 –

不，因为我相信早午餐是为我们做的吗？我会试一试。 – coulix

这是可能的，我也不确定早午餐。我使用require，骨干牵线木偶，并没有这个问题...所以可能值得检查。 –

JavaScript示例，以防万一！

我认为重要的一点是通过require启动你的引导程序（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([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'marionette' 
], 
function ($, _, Backbone, Marionette) { 
    'use strict'; 

    // code goes here 
});

来源

2014-01-15 17:49:35

但是，为什么我需要垫木下划线和其余的时候，他们已经暴露在我的程序中。 – coulix

正如我所说我不确定早午餐和它提供什么。但是，当使用require.js时，通常垫片提供了两个主要特征。 1.依赖管理，因此需要了解加载所请求的资源的顺序。 2，导出你的资源作为一个命名的全局变量。 –

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

回答

相关问题