☰
js文件下通用形式:
var config = {
map: {
'*': {
'Magento_Checkout/template/view/shipping.html' : 'Rbj_Checkout/template/view/shipping.html'
}
},
paths: {
"CheckoutPath" : 'Rbj_Checkout/js/view/',
"googlePayLibrary": "https://pay.google.com/gp/p/js/pay",
},
shim: {
'Magento_PageBuilder/js/resource/slick/slick': {
deps: ['jquery']
}
},
config: {
mixins: {
'Magento_Theme/js/view/breadcrumbs': {
'Magento_Theme/js/view/add-home-breadcrumb': true
}
}
},
deps: [
'Magento_Theme/js/theme'
]
};
map: map config 用于映射 js 文件。如果要声明任何包含define()方法的新 JS 文件,也可以覆盖核心 Magento JS 或模板文件。
map只适用当前模块
map: {
'*': {
'Magento_Checkout/template/view/shipping.html' : 'Rbj_Checkout/template/view/shipping.html',
'Magento_Checkout/js/view/shipping' : 'Rbj_Checkout/js/view/shipping'
}
}
path: paths 配置和maps一样,也是用来声明JS文件的路径。
您可以在路径配置中声明模块 JS 路径并使用模板文件的别名。
路径配置也用于声明第三方 js 文件。
路径别名将用于重命名路径段以及完整的 js 模块。
路径别名配置适用于全局。
paths: {
"checkoutPath" : 'Rbj_Checkout/js/view/',
"googlePayLibrary": "https://pay.google.com/gp/p/js/pay",
}
如果视图文件夹中的任何文件可用,我们假设title.js。您可以像在模板中一样使用此路径别名,
{
"*": {
"checkoutPath/title" : {
"storeId": "<?= $block->getStoreId();?>"
}
}
}
这里的“checkoutPath/title”指的是app/code/Rbj/Checkout/js/view/title.js
googlePayLibrary 别名,用于加载第三方 JS 文件,不带 .js 扩展名的 URL 。
shim:用于声明依赖关系的 shim 配置。
如果您想在任何其他 JS 文件之前加载特定文件,您可以使用 shim config 声明。
shim: {
'Magento_PageBuilder/js/resource/slick/slick': {
deps: ['jquery']
}
}
在加载 slick.js 文件之后,首先加载 jquery 文件。Shim 保证总是首先加载依赖文件。
如果找不到依赖文件,则不会加载您的 js 文件。在上面的语法中,如果没有加载 jquery 文件,slick.js 文件将永远不会在页面上被调用。
mixins: 用于创建 JS 混合的混合配置。您可以声明 JS 文件或任何小部件用作 mixins。
config: {
mixins: {
'Magento_Theme/js/view/breadcrumbs': {
'Magento_Theme/js/view/add-home-breadcrumb': true
}
}
}
在这里,我们必须声明 true 才能使 mixin 工作。
deps: 一个 deps 属性,用于在网站的每个页面上加载 Javascript 文件。
deps: [
'Magento_Theme/js/theme'
]
当您检查 Magento 站点上任何页面的网络选项卡时,您可以看到每个页面上加载的theme.js文件。