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

Question

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?

score 3 · Accepted Answer · edited May 23 '17 at 12:29

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.

See also: * Using Browserify with jquery and non-npm plugins * Using Browserify with jQuery plugins

score 0 · Answer 2 · answered Jul 18 '14 at 22:17

If you installed jquery and jquery-ui with npm, then I suspect they're somewhere in the rest of your dependencies. In that case, you're actually not using the "browser" "jquery" property, but instead letting browserify use it's non-shimmed "require" process.

Is "jquery" in your "dependencies" list? What happens if you delete that "browser" "jquery" line entirely?

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

2 Answers2