Where is jquery getting required from? - browserify - browserify-shim

I am building a project with broweserify, jquery and jquery-ui. All libs were pulled down with npm. Here is how I am using my browserify-shim to pull in jquery' and 'jquery-ui:

  "browserify": {
    "transform": [ "browserify-shim" ]
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "jquery-ui": "./node_modules/jquery-ui/jquery-ui.js"
  },
  "browserify-shim": {
    "jquery": "$"
  }

Everything works like it should, but I look at jquery-ui.js and the first line of code is

var jQuery = require('jquery');

How is this line of code being resolved? When I put a debuggerstatement after this, jquery is always resolved. I even changed the name of jquery in my shim and the it still resolved. How is that happening?

Solution

Short answer: your package.json dependencies

Long answer: I'm also using those npm modules. That jquery-ui package seems to have been retooled to require its internal dependencies. As you note, the first line of the jquery-ui core.js is: var jQuery = require('jquery'); which looks for a module called jquery in the project's npm dependencies. That's handled by something like what I have in my package.json:

"dependencies": {
    "jquery": "^2.1.1",
    "jquery-ui": "^1.10.5",
}

in addition to the browserify parts:

"browserify": {
    "transform": [ "browserify-shim" ]
},
"browser": {
    "jquery": "./node_modules/jquery/dist/jquery.min.js",
    "jq-ui": "./node_modules/jquery-ui/jquery-ui.js"
},
"browserify-shim": {
    "jquery": "$",
    "jq-ui": {
        "exports": "jq-ui",
        "depends": [ "jquery:jQuery" ]
    },
}

What I haven't figured out is whether we can use the jQuery UI components in our other client-side scripts.