RequireJS

• About
• Common dependencies
• Third-party dependencies
• AMD dependencies

About

Breeze doesn’t use RequireJS library, but we have custom define and require functions with similar API. The main differences between requirejs and our implementation are:

• Our implementation is not amd compatible. See AMD dependencies.
• We load js file only if it’s registered in breeze_default.xml layout update, or if Better Compatibility mode is enabled.

When running require or define Breeze will try to retrieve the dependencies from the $.breezemap object. If not found, Breeze will try loading these dependencies.

Common dependencies

We’ve implemented most of Magento’s built-in components, so code that uses them will work fine out of the box. The example below is fully compatible with Breeze:

require([
    'jquery',
    'underscore',
    'mage/translate',
    'Magento_Ui/js/modal/modal',
    'Magento_Catalog/js/price-utils',
    'Magento_Checkout/js/model/quote',
    'Magento_Customer/js/customer-data'
], function ($, _, $t, modal, priceUtils, quote, customerData) {
    'use strict';

    // All dependencies successfully resolved in Luma and Breeze
    console.log([...arguments]);
});

Please note, that jquery will be resolved as Cash library — minimal jQuery alternative.

Third-party dependencies

Let’s take a look at another example that works in Luma out of the box but not in Breeze:

require([
    'Vendor_Module/js/extended-modal'
], function (modal) {
    'use strict';

    console.log(modal); // undefined
});

To make this code work with Breeze frontend you need to register Vendor_Module/js/extended-modal in breeze_default.xml layout update or enable Better Compatibility mode.

AMD dependencies

Let’s take a look at the following example:

require([
    'https://unpkg.com/marquee3000@1.1.1/marquee3k.min.js'
], function (Marquee) {
    'use strict';

    console.log(Marquee); // undefined
    console.log(Marquee3k); // function!
});

In the example above, Marquee is undefined, but Marquee3k is resolved. This happens because marquee3k.min.js exposes itself into window.Marquee3k when define.amd is not supported.

In order to make Marquee variable resolved correctly, you need to setup a shim using breeze_default.xml layout update:

<referenceBlock name="breeze.js">
  <arguments>
    <argument name="bundles" xsi:type="array">
      <item name="dynamic" xsi:type="array">
        <item name="items" xsi:type="array">
          <item name="https://unpkg.com/marquee3000@1.1.1/marquee3k.min.js" xsi:type="array">
            <item name="path" xsi:type="string">https://unpkg.com/marquee3000@1.1.1/marquee3k.min.js</item>
            <item name="global" xsi:type="string">Marquee3k</item>
          </item>
        </item>
      </item>
    </argument>
  </arguments>
</referenceBlock>

Now, both variables will be resolved as Marquee3k function.