Webpack include jQuery in other components

Question

I use Webpack and my scripts is structured on this way.

scripts
  components
    heroSlider.js
  app.js

I install jQuery via npa npm and import in app.js like this

import $ from 'jquery';

And it's work fine. But i wan't to use jQuery in my component file. How?

In app.js i also import component.

import heroSlider from './components/heroSlider';

heroSlider.js look like this

export default function heroSlider() {

  // Here I wan't to use jQuery

}

But I don't want import jQuery again in component when i want to use it. There is a way to do that ?

"But I don't want import jQuery again in component when i want to use it." why? It is generally advised to have explicit dependencies rather then rely on global state. — Yury Tarabanko, Nov 29 '18 at 12:24
You should import it in every file you want to use it in, webpack is clever enough to only import it once if that is what you are woried about — Pete, Nov 29 '18 at 12:24
Possible duplicate of [Expose jQuery to real Window object with Webpack](https://stackoverflow.com/questions/29080148/expose-jquery-to-real-window-object-with-webpack) — dschu, Nov 29 '18 at 12:33

score 0 · Answer 1 · answered Nov 29 '18 at 12:25

0

If you're using jquery plugins that require a global jquery instance, you can expose jquery using expose-loader

Once you set it up you'll be able to require it using:

require("expose?$!jquery");

answered Nov 29 '18 at 12:25

rubentd

1 Answers1