Using requirejs and trying to optimize javascript into a vendor file and an app file

Question

I'm working on a project using requirejs and I'm trying to optimize my javascript into two files: vendor libraries and app code. Unfortunately, I can't seem to get it to work.

Folder structure:

backbone_components/
app/
- less/
- js/
  - component1/
  - component2/
  - layouts/
    - dashboard/
    - about/
  - lib/
  - config.js
  - main.js
- index.html
dist/
Gruntfile.js

config.js:

require.config({
  baseUrl: '../js/',
  paths: {
    jquery:     '../../bower_components/jquery/dist/jquery',
    underscore: '../../bower_components/lodash/dist/lodash',
    backbone:   '../../bower_components/backbone/backbone',
    text:       '../../bower_components/requirejs-text/text'
  },
  enforeceDefine: true
});

define(['backbone', 'main'], function(Backbone, app) {
});

Gruntfile.js:

requirejs: {
  options: {
    dir: 'dist/js/',
    mainConfigFile: 'app/js/config.js',
    optimize: 'none', 
    normalizeDirDefines: 'all',
    skipDirOptimize: true
  },
  dist: {
    options: {
      modules: [
        {
          name: 'vendor',
          include: ['jquery', 'underscore', 'backbone', 'text'],
        },
        {
          name: 'app',
          exclude: ['vendor']
        }
      ]
    }
  }
});

When I run grunt, I get the following error: "Error: Error: ERROR: module path does not exist: /path/to/project/app/js/app/js/vendor.js for module named: vendor."

Why is it looking for "vendor" when it doesn't exist yet?

Louis · Accepted Answer · 2014-12-18 23:53:03Z

2

I take it that you have no module named vendor in the source you want to optimize. If this is correct, then the error you are getting is because r.js is looking for a module named vendor. You have to tell it to create it with the create option:

modules: [
    {
      name: 'vendor',
      create: true,            // <--- Add this option!
      include: ['jquery', 'underscore', 'backbone', 'text']
    },
    {
      name: 'app',
      exclude: ['vendor']
    }
]

Without the option r.js understands you to be effectively saying "take the vendor module and include with it jquery, etc." With the option, you are telling it to create vendor from scratch.

The create option is documented in this file.

answered Dec 18, 2014 at 23:53

Louis

152k28 gold badges288 silver badges332 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jbarreiros Over a year ago

Thanks Louis. I was just reading about "create" when your comment came in. And that made it work.

jbarreiros Over a year ago

Out of curiosity, all javascript files are being copied into "dist/js". I expected only vendor.js and main.js to be there. Did I miss something else?

Louis Over a year ago

removeCombined: true I would think. You can find it documented in the same file as create.

jbarreiros Over a year ago

Yup, that did it. Would of expected removeCombined's default to be true. Feeling better about this. Thanks again.

Collectives™ on Stack Overflow

Using requirejs and trying to optimize javascript into a vendor file and an app file

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related