Use imported js file in html in an ES6 application

Question

I am developing an application with ES6 and doing the build with Webpack. This application will be in a template that already imports jQuery via <script src...></script>.

How would I import, from this file, the jQuery to use it in my application? I have tried to use the $ of jQuery in the application but gives error:

$ is not defined

But I can’t take this import off the template because it’s shared by other applications.

In HTML I have the following code snippet:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

My Javascript:

class Products {
    constructor() {
        this.item = $('.prodcut-item')
    }
}

Answer 1

First, you should install jQuery via npm (or Yarn):

npm install jquery

There in the Javascript file, you do:

import $ from 'jquery';

So your final file would look like this:

import $ from 'jquery';

class Products {
  constructor() {
    this.item = $('.prodcut-item')
  }
}

---

Remembering that if you do what I said above, you can still keep the <script src></script> in your HTML.