Drupal 8 jQuery conflict

Question

On the front end part of my Drupal 8 project, I have several javascript modules linked together using Browserify (and gulp).

In several modules I use Foundation, and the way Foundation is made is that it adds a foundation() function to the $ object.

This is an excerpt of my package.json where I declared the shims that my project needs :

"browser": {
    "jwplayer": "./libraries/utils/jwplayer/jwplayer.js",
    "Foundation": "./node_modules/foundation/js/foundation/foundation.js",
    "jquery": "./node_modules/jquery/dist/jquery.min.js",
    "Backbone": "./node_modules/backbone/backbone.js",
    "underscore": "./node_modules/underscore/underscore-min.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "underscore": "_",
    "jwplayer": "jwplayer",
    "Foundation": {
      "exports": null,
      "depends": [
        "jquery"
      ]
    },
    "Backbone": {
      "exports": "Backbone",
      "depends": [
        "jquery",
        "underscore"
      ]
    }
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }

Everything works great when I'm logged out of the Drupal admin.

Although when I'm logged as an admin, Drupal adds a small taskbar on the top, helping you to access the different access menus, and a couple other useful stuff.

When Drupal does that, it uses its own version of jQuery, and attach a certain amount of plugins to it.

Now when I export my own jQuery and declare it as $ in my package.json file, I obviously erase Drupal's jQuery and all the plugins that came with it, destroying the topbar.

How can I possibly tell Foundation and every module or plugin that needs jQuery to use the Drupal one, and not the one in my node_modules folder?

Answer 1

Looking around stackoverflow I found this How do I use Browserify with external dependencies? and I replaced

"browserify-shim": {
    "jquery": "$"
}

with

"browserify-shim": {
    "jquery": "global:jQuery"
}

It works perfectly now. It is kind of weird that I still have to do var $ = require('jquery'); inside my modules though. If anyone has more informations about that I'm all ears.