2

我只是从 Magento 1.x 迁移到 Magento 2.x。我发现 Magento2 使用 RequireJS 来处理 JavaScript 文件。所以我了解了 RequireJS 是什么，以及如何使用它。

我发现大多数示例使用data-main="main"来定义配置文件。

在 Magento2 的 default_head_blocks.xml 文件中，我找到了这样的脚本标签：

<script src="requirejs/require.js"/>

在这里，他们没有指定任何data-main。

这些是我的问题：

  1. Magento2/RequireJS 如何知道应该加载哪个 JS 进行配置？（我在多个地方找到了 requirejs-config.js ）

  2. 默认情况下 Magento2 会加载大量 JS（超过 20 个），我该如何限制它们？

我找不到足够的文档。

4

1 回答 1

3

获得 Magento 2 JS 开发所有答案的最佳位置是 Magento 2 文档，它确实是一个有用的资源。http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html详细解释了组件初始化。

要回答您上面的两个问题-

Q.1。Magento2/RequireJS 如何知道应该加载哪个 JS 进行配置？（我在多个地方找到了 requirejs-config.js ）

在每个 Magento 2 模块中都有一个requirejs-config.js文件来加载所有模块配置。IE

var config = {
    map: {
        '*': {
            compareItems:           'Magento_Catalog/js/compare',
            compareList:            'Magento_Catalog/js/list',
            relatedProducts:        'Magento_Catalog/js/related-products',
            upsellProducts:         'Magento_Catalog/js/upsell-products',
            productListToolbarForm: 'Magento_Catalog/js/product/list/toolbar',
            catalogGallery:         'Magento_Catalog/js/gallery',
            priceBox:               'Magento_Catalog/js/price-box',
            priceOptionDate:        'Magento_Catalog/js/price-option-date',
            priceOptionFile:        'Magento_Catalog/js/price-option-file',
            priceOptions:           'Magento_Catalog/js/price-options',
            priceUtils:             'Magento_Catalog/js/price-utils',
            catalogAddToCart:       'Magento_Catalog/js/catalog-add-to-cart'
        }
    }
};

这告诉 requirejs 所有必需的 JavaScript 文件所在的位置。

有多种方法可以告诉 Magento 何时使用您的 JS 文件 -

  • data-mage-init在 HTML 元素上。例如<div class="block upsell" data-mage-init="{"upsellProducts":{}}" data-limit="0" data-shuffle="0">

  • 页面上的脚本标签，例如

    <script type="text/x-magento-init"> { "[data-role=tocart-form], .form.map.checkout": { "catalogAddToCart": {} } } </script>

  • 在 JS 文件中，例如$('.yourSelector').yourPlugin();

问题 2。默认情况下 Magento2 会加载很多 JS（超过 20 个），我该如何限制它们？

由于多个模块而加载的 JS 文件的绝对数量是缺点之一，但是，正确使用带有反向代理（如 Varnish）的整页缓存，即使在开发服务器中，性能下降也可以忽略不计。

于 2016-01-05T18:38:07.013 回答