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項目結構

回答

相關問題