What is the best way to set up Require.js?

I

Ivan Martianov2015-04-30 19:19:52

RequireJS

Ivan Martianov, 2015-04-30 19:19:52

Good day,
dear ones.
What is the best way to set up Require.js?
Read the documentation for requirejs .
Various articles/answers on this library ( example 1 , example 2 , etc.).
Everything works fine when I use 1-2 libraries (jQuery, Backbone, ...)
However, when I load about 10 - 20 libraries and scripts (jQuery plugins and other goodies), it starts to work incorrectly.
Often shows that it cannot load the file (the config does not work and the files are trying to pull without taking into account the path)
Firefox refuses to work with the configuration at all.
index.html

<!DOCTYPE html>
<html>
  <head>
    <script data-main="js/main" src="/js/require.js"></script>
  </head>
  <body>
 		<!-- so much code -->
 	</body>
 </html>

/js/main.js

requirejs.config({
  baseUrl: 'js',
  paths: {
    'jquery': '/assets/plugins/jquery/dist/jquery.min',
    'inspinia': '/assets/js/inspinia',
    'jquery-ui': '/assets/plugins/jquery-ui/jquery-ui.min',
    'bootstrap': '/assets/plugins/bootstrap/dist/js/bootstrap.min',
    'underscore': '/assets/plugins/underscore/underscore-min',
    'backbone': '/assets/plugins/backbone/backbone',
    'lodash': '/assets/plugins/lodash/lodash.min',
    'text': '/assets/plugins/requirejs-plugins/lib/text',
    'pace': '/assets/plugins/pace/pace.min',
    'socketio': '/assets/plugins/socket.io-client/socket.io',
    'switchery': '/assets/plugins/switchery/dist/switchery.min',
    'metis-menu': '/assets/plugins/metisMenu/dist/metisMenu.min',
    'slimscroll': '/assets/plugins/slimscroll/jquery.slimscroll.min',
    'gritter': '/assets/plugins/gritter/js/jquery.gritter.min',
    'sparkline': '/assets/js/plugins/sparkline/jquery.sparkline.min',
    'toastr': '/assets/plugins/toastr/toastr.min'
  },
  shim: {
    'jquery':{
      exports: 'jQuery'
    },
    'socketio': {
      exports: 'io'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'underscore': {
      exports: '_'
    },
    'bootstrap': ['jquery'],
    'metis-menu': ['jquery'],
    'slimscroll': ['jquery'],
    'gritter': ['jquery'],
    'inspinia': [],
    'app': []
  }
});

requirejs(['test']);

requirejs(['app'], function(App){
  App.initialize();
});

/js/test.js

'use strict';

define([
  'jquery',
  'lodash',
  'backbone',
  'socketio',
  'jquery-ui',
  'metis-menu',
  'slimscroll',
  'toastr'
], function($, _, Backbone, SocketIo){

  var io = SocketIo('http://'+window.location.host+'/');

  $(document).ready(function () {

  // ... so much code

  });

});

What am I doing wrong? How to achieve stability?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

K

Konstantin Kitmanov, 2015-04-30
@ivansky

Try to chop off half of the libraries. If stability is restored, it will be possible to connect back one at a time.

'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'underscore': {
      exports: '_'
    },

This piece is no longer needed for a year, probably like two :)