Модули Marionette JS, Brunch JS и требуемая структура проекта JS

Я использую BrunchJS для обработки сценария кофе и компиляции ресурсов. В проекте используется несколько плагинов Brunch, таких как brunch-handlebar, для работы которого требуется оболочка «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"

На стороне Marionette у меня может быть простое приложение, загружающееся просто отлично.

index.html

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

application.coffee

# Загрузить хелперы блока handlebars требуют '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-Modules, но я не могу использовать ключевое слово define в определении моего модуля марионетки, так как "define" и " требуют" не выставляются. Brunch использует его только для загрузки своих плагинов и исходных файлов моего приложения.

Обычный модуль 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"

но тогда мне нужно потребовать все мои модули-марионетки ("moduleA") в application.coffee и столкнуться с некоторыми проблемами циклической зависимости.

Одно из решений, о котором я думаю, - отключить обертку BrunchJS commonjs и загружать рули из папки поставщика, а не как плагин для бранча.


requirejs marionette brunch
person coulix    schedule 15.01.2014    source источник
comment
Настроили ли вы require.config? Я не уверен насчет coffeeScript, но могу привести пример js.   -  person Jonathan Miles    schedule 15.01.2014
comment
Нет, так как я считаю, что Бранч делает это за нас? Я дам ему попробовать.   -  person coulix    schedule 15.01.2014
comment
Возможно, да, насчет Бранча я тоже не уверен. Я часто использую require, backbone marionette и у меня нет этой проблемы... так что, вероятно, стоит проверить.   -  person Jonathan Miles    schedule 15.01.2014

Ответы (1)


arrow_upward
1
arrow_downward

Пример JavaScript, если это поможет!

Я думаю, что важным моментом является запуск вашего загрузчика (в данном примере main.js) через require. Он должен быть указан в атрибуте тега скрипта под названием «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
});
person Jonathan Miles    schedule 15.01.2014
comment
Но зачем мне подчеркивать марионетку подчеркиванием и остальными, когда они уже выставлены в моей программе. - person coulix; 16.01.2014
comment
Как я уже сказал, я не уверен насчет Бранча и того, что он дает. Однако при использовании require.js прокладка обычно предоставляет две основные функции. 1. управление зависимостями, поэтому require понимает, в каком порядке загружать запрошенные ресурсы. 2, чтобы экспортировать ваш ресурс как именованную глобальную переменную. - person Jonathan Miles; 16.01.2014