Should I use import jQuery in a script if jQuery is being added manually?

Question

I am maintaining an existing project, and I saw this:

The site is already including jQuery the traditional way (it's WordPress, and WordPress includes jQuery by default unless you change stuff).

<script src="cdn-or-local/jquery.js"></script>

And then the site is including another javascript file, which has been compiled with Webpack and Babel.

<script src="wordpress-theme/dist/whatever.js"></script>

On the original whatever.js file (not the compiled one, but the human-created one), it states:

import $ from 'jquery';

$(document).ready(() => {
...
}

And this confused me a lot.

As far as I know, if jQuery is already being loaded before the whatever.js file is loaded, then $ will already be defined.

Question: can I just safely omit import $ from 'jquery';?

Answer 1

Yes, it's a good practice to import jQuery if your module needs jQuery - explicit declarations are good for readability, and will allow tooling to know what $ refers to! However, you can (should) configure webpack to not bundle jQuery as a dependency, but assume it is already loaded and available from a global variable.