Backbone.Marionette - Grunt Browserify - "require not defined"

Question

I am using grunt-browserify and is facing two problems in particular. This task has been successfully started and works with the following configuration parameters. The jsFilesToConcat variable represents all the javascript files for the Backbone.js + Marionette.js application, the main application fix, front-end front-end utilities (e.g. Bootstrap plugins), and all the JS associated with the project. Is this the wrong approach? The idea was to download the entire application for 250 thousand JS (and all its dependencies) at a time.

I want to offer a disclaimer that this is a new territory for me, so I think that my alleged use case is available with options already available with the plugin, but two errors confuse me:

1) Backbone not defined - this means that the script is actually loading, however, when I check the call stack in Chrome Dev Tools, it shows only the anonymous self-starting function. Therefore, I don’t understand how to pass the Backbone object to Marionette so that it expands at boot time.

2) require is not defined - an error in the line where I declare var SampleApp = require('SampleApp') . Do I need to do something special in my grunt or node.js server.js config configuration to open the require function?

3) Is javascript executing asynchronously within itself, is this part of the browser the intended behavior that I am processing incorrectly? I think that since I am wrapping many JS utilities in the global shell to protect the namespace, the reason is that some functions are not available, but I do not understand why this would affect require .

  // uses grunt-browserify task browserify: { developmentJs: { options: { debug: true, alias: ["./js/app.dev.js:SampleApp"], }, src: [ '<%= pkg.jsFilesToConcat %>' ], dest: 'public-dev/js/app.dev.js' } } 

and then in the index.html my single page Marionette app I have.

  (function ($) { $(document).ready( function() { var sampleApp = require('SampleApp'); console.log( SampleApp ); }); })(jQuery); 

Answer 1

Good for starters, the src attribute in your grunt file should not refer to all the files in your application. He needs only an entry point. Therefore, as a rule, I have something similar to your function of anonymous self-emitting in the index.js file, and set the parameter ["./index.js"] for my src configuration. When the browser views this file, it checks for the required calls and captures all the necessary dependencies.

However, the browser will generate a file with an internal definition of require. The require function is not globally available on the page, nor is it dependent on the dependencies you include. You can use them in your application, but this does not make them available on the page. Therefore, if you get the “Trunk” error, it is not defined, the first thing I would like to check is that you installed the trunk through npm ( npm install backbone --save ).

After everything is set up, you just need to include your compiled script on the page, and let your anonymous independent execution function (which should now be in the file that processes crack) process the work from your application.