Demystifying JS: RequireJS & JS Components
Create RequireJS Aliases with map and paths
Free Preview
app/code/Macademy/JsFun/view/frontend/requirejs-config.js
/*
The "*" after map makes this alias available to all JavaScript components.

The format for aliases is:
"alias": "Namespace_Module/js/filename"

"Namespace_Module/js/filename"
>> maps to >>
Namespace/Module/view/[area]/web/js/filename.js

Paths can be used for non-AMD JavaScript modules & external files.

Be sure to not include the ".js" extension in any of these usages.
*/
var config = {
    "map": {
        "*": {
            "fadeInElement": "Macademy_JsFun/js/fade-in-element"
        }
    },
    "paths": {
        "vue": "https://cdn.jsdelivr.net/npm/vue/dist/vue"
    }
}
app/code/Macademy/JsFun/view/frontend/templates/block-promo-effects.phtml
<script>
// After defining an alias, it can then be used when requiring dependencies.
require(['jquery', 'fadeInElement'], function($, fadeInElement) {
    'use strict'

    $(function() {
        fadeInElement('.block-promo')
    })
})
</script>
Want to learn more?

Visit M.academy to learn much more about Magento, Laravel, PHP, Javascript, & Docker.

M.academy logo