Use imported js file in html in an ES6 application

Question

Use imported js file in html in an ES6 application

Navigation

#1 by (0 votes)

0

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

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

$ is not defined

But I can not get this import from the template because it is 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')
    }
}

javascript ecmascript-6

asked by anonymous 19.02.2018 / 12:31

1 answer

How to use BidingContext to link Views to a Dictionary? How to separate input and output in different columns with Angular?

score 0 · Accepted Answer

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 looks like this:

import $ from 'jquery';

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

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