Load JQuery Plugin in Brunch 2.8

Question

I have a Brunch project set up, using Brunch 2.8.2. This version of Brunch works great with front-end dependencies via NPM. I am also using the Typescript Brunch plugin, and can do import $ = require("jquery") just fine in my code.

However...I can't figure out how to load a JQuery plugin such that I can use it in my code.

Simply adding it to package.json doesn't make it show up in my compiled vendor.js - that is as expected, since I don't require it anywhere.

I can't use

npm: {
  globals: {
    "$": "jquery-validation"
  }
}

The above works fine for making JQuery itself a global, but presumably since jquery-validation only attaches itself to JQuery, and doesn't return anything itself, it doesn't get loaded via this.

I can't require("jquery-validation") in my Typescript code, since the .d.ts for that plugin (correctly) describes it as being attached to JQuery itself and not exporting its own module.

Is there any way to do what I'm trying to do?

Answer 1

In addition to exposing JQuery as a global, I also needed to force the JQuery Validation plugin to be included in my vendor.js by adding the following to my brunch-config.js:

npm: {
  globals: {
    "jQuery": "jquery"
  },
  static: [
    "node_modules/jquery-validation/dist/jquery.validate.js"
  ]
}

I had to change the globals section slightly, since plugins expect to see a global jQuery variable rather than $.

See the Brunch docs on the NPM section for more information.