如何在RequireJS中使用Magento2？

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

我发现大部分示例都使用data-main =“main”来定义配置文件。

在Magento2的default_head_blocks.xml文件，我发现脚本标签是这样的：

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

在这里，他们没有指定任何数据主要。

这是我的问题：

Magento2/RequireJS如何知道哪个JS要加载的配置？（我在多处发现了requirejs-config.js）
默认Magento2加载了很多JS（超过20个），我怎么能限制它们？

我在这找不到足够的文档。

来源

2015-12-25 Ashutosh

获得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文件加载所有模块的配置。即

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元素。例如JS文件内的页面e.g

<script type="text/x-magento-init"> { "[data-role=tocart-form], .form.map.checkout": { "catalogAddToCart": {} } } </script>
上<div class="block upsell" data-mage-init="{"upsellProducts":{}}" data-limit="0" data-shuffle="0">
script标签如$('.yourSelector').yourPlugin();

Q.2。默认情况下，Magento2会加载大量的JS（超过20个），我怎样才能限制它们？

被加载为多个模块的结果的JS文件的绝对数量是缺点之一，然而，与全页面缓存的与像清漆反向代理的性能下降是可以忽略的正确用法，甚至在开发服务器中。

来源

2016-01-05 18:38:07 Steven

如何在RequireJS中使用Magento2？

回答

相关问题