How to set up Browserify with Elixir and Browserify Shim on Laravel 5?

Question

I am trying to set up Browserify with Elixir and Browserify Shim on Laravel 5.2 to use Gulp with my JavaScript files, but I didn't have much luck so far. This should be pretty straightforward to do, but it isn't.

Here is my package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "bootstrap-sass": "^3.0.0",
    "browserify-shim": "^3.8.12",
    "jquery": "^2.2.0",
    "jquery-ui": "^1.10.5",
    "laravel-elixir": "^4.0.0"
  },
  "browser": {
    "app": "./resources/assets/js/app.js",
    "utils": "./resources/assets/js/utils.js",
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "app": {
      "depends": [
        "jquery:$",
        "utils:Utils"
      ]
    },
    "utils": {
      "depends": [
        "jquery:$"
      ]
    },
  }
}

gulpfile.js

var elixir = require('laravel-elixir');

elixir(function (mix) {
    mix.browserify('main.js', './public/js/bundle.js');
});

Entry script main.js looks like this:

var $ = require('jquery');
var Utils = require('utils');
var App = require('app');

app.js

var App = {
     init: function(){
         console.log(Utils);
         Utils.doSomething();
     }
    //other methods
};

In short: Utils depends on $, and App depends on both $ and Utils.

When I hit gulp from terminal, bundle.js is correctly created. All scripts are wrapped up in Browserify code (as expected). Each script has all included dependencies, like I configured in package.json so this part looks good as well.

The problem is that all my included dependencies are empty objects. For example, Utils in app.js is empty, and I get an error when I try to call its method "doSomething". Console log prints out an empty object "{}" instead of real object. The only correctly included script is jQuery and it's not an empty object.

What could be wrong here? Do I need to make some changes in my JS files or in configuration to make this work? It looks like I'm pretty close to the solution, but it still does not work and I can't use it at all.

Answer 1

It is the easiest solution to directly use 'exports' from browserify-shim property:

"browserify-shim": {
    "app": {
      "exports": "App",
      "depends": [
        "jquery:$",
        "utils:Utils"
      ]
    },
    "utils": {
      "exports": "Utils",
      "depends": [
        "jquery:$"
      ]
    },
  }

Answer 2

Take a look at this repo which I believe shows the fixed version of your app. The issue is that your app.js and utils.js modules aren't exporting anything to their respective require calls. One option is to add a line like:

module.exports = App;

to the bottom of your app.js file, and the equivalent to the bottom of your utils.js file. You'll see if you test the repo that badapp doesn't have this line and produces the exact behavior you're describing.

See this answer for an explanation of the issue.