CODEWITHSUNDEEP
javascriptrequirejs
onlineracoon
onlineracoon

Reputation: 2970

require js on build file combine

I use require js in my single page app and I am wondering if it is possible to combine all modules, vendor libraries (jQuery, Underscore, Backbone) in one single file, since this would speed up my app.

app
  css
  html
    homepage
       main.html
       login.html
       signup.html
  js
    build.js
    libs
        jquery.js
        backbone.js
        underscore.js
        require.js
    modules
       collections
       models
       views
       main
          main.js
          app.js
          router.js
app-build

My build configuration file currently is:

({
    appDir: '../',
    baseUrl: 'js/modules',
    mainConfigFile: 'modules/main/main.js',
    dir: '../../app-build',
    optimize: 'uglify',
    uglify: {
        toplevel: true,
        ascii_only: true,
        beautify: true,
        max_line_length: 1000
    },
    preserveLicenseComments: true,
    logLevel: 0
})

Upvotes: 0

Views: 2927

Answers (1)

stusmith
stusmith

Reputation: 14103

I'm certainly not an expert in this area, but I did manage to get this working for one of my projects, admittedly mainly by trial and error.

I found that I needed to make either/both of appdir and baseUrl be a directory which contained both my code and the library code - in your case, this would either be ./app/js or ./app (depending on whether you also wanted your templates combined).

I also supplied paths to the various library functions.

Having got it working I really ought to go back and see what was actually necessary, and what was cargo-cult coding. For now I have more pressing code to be writing...

For your interest I include my options: note I am optimizing from node.js via rjs.optimize(...).

var options = {
  baseUrl: "./site/app",
  appdir: "./site/app",
  name: "js/main",
  out: "main-built.js",
  paths: {
    jQuery: 'js/libs/jquery/jquery',
    Underscore: 'js/libs/underscore/underscore',
    Backbone: 'js/libs/backbone/backbone',
    Handlebars: 'js/libs/handlebars/handlebars',
    templates: 'templates'
  }
};

I'm not expecting this to be the correct answer, but hopefully it will lead you somewhere useful.

Upvotes: 4

Related Questions