Magento 2 - How does require know where jquery is defined?

Question

You can use jquery in phtml like this:

require([
 'jquery'
],function($) {
 $(document).ready(function() {
 /* Your logic */
 }); 
 });

But how does the require know where to find jquery. I searched the whole codebase, but the path to the jquery file is nowhere defined in no requirejs-config.js file, so how does it know where the file is located?

Answer 1

There is no need for defined jquery paths or mappings in require-js configs. Because jquery is located directly in lib/web/jquery.js.
As such it will be present in the pub/static files directly within the locale directory. pub/static/Magento/luma/en_US/jquery.js.

As such the path jquery within the require of js components or phtml is just resolved on the same way like every other path e.g. to Magento_Catalog/js/gallery or something else.

Answer 2

Combination of composer and framework

Not been modified in a while but here for example is where the path was changed

https://github.com/magento/magento2/commit/98214d73ce4ab6d873786759c804b9994be82f29

• Black: I looked at the github site, but I still can't figure out, where jquery is defined so that it can be used anywhere in requirejs

Answer 3

Magento framework already defined jquery at some place inside Magento Installation.
Please go though this tutorial to know more -
https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_init.html
Please let me know if you still have doubts.
For example - Here Jquery is defined and path is given.

define ([
 'jquery',
 'mage/gallery/gallery'
], function (,ドル Gallery) {
 $(function () { // to ensure that code evaluates on page load
 $('[data-role=example]') // we expect that page contains markup <tag data-role="example">..</tag>
 .each(function (index, element) {
 Gallery({
 options: {},
 data: [{
 img: 'https://c2.staticflickr.com/8/7077/27935031965_facd03b4cb_b_d.jpg'
 }],
 fullscreen: {}
 }, element); // 'element' is single DOM node.
 });
 });
});

• Black: "Magento framework already defined jquery at some place inside Magento Installation" Thats my question. How does require know where jquery is located?

Answer 4

I figured it out. If you don't specify a script in requirejs and still try to load it, then magento searches for a script by that name in

pub/static/versionXXXXXXXXXX/frontend/**themeNamespace**/**ThemeName**/**language_code**/

So if you try to use this script:

require([
 'foobar'
],function($) {
 $(document).ready(function() {
 /* Your logic */
 }); 
 });

but you never defined foobar in requirejs-config.js, then magento tries to load it from here (example)

pub/static/version1617131196/frontend/company/fresh/de_DE/foobar.js

If you look at the files in this folder, then you notice that the jquery.js file is located here.

• Dominic Pixie: Apologies. I also thought you were also asking how does it get there from lib