Magento2在页面中引入JS文件
我们在Magento2日常开发中经常会遇到加载第三方库或使用第三方插件的情况,由于Magento2使用了requirejs作为javascript文件加载管理的调度,所以在加载第三方JS的时候,就必须通过requirejs来加载
第一步:
我们默认js文件存放在自定义模块中,路径如下
<Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js
Vendor:包名
Module_Name:模块名称
area:作用域(通常我们会在前端加载,作用域就是frontend)
第二步:在<Vendor>/<Module_Name>/view/<area>/目录中创建一个名为requirejs-config.js的文件用来定义引入第三方库的路径映射,内容如下
var config = {
map: {
'*': {
bannerslider: 'VendorName_ModuleName/js/flexslider'
}
}
};
Note:bannerslider这个名称可以自定义,它仅作为使用时引入文件的名称映射关系。
第三步:前面已经对第三方库进行了定义和映射,接下来就是使用了
<script type="text/javascript">
require(['jquery','bannerslider'],function($){
$(window).load(function() {
$('.flexslider-1').flexslider({
animation: "fade",
controlNav: "thumbnails",
slideshowSpeed: 2000,
minItems: 2,
maxItems: 4
});
});
});
</script>
Note:这里的bannerslider和第二步定义的名称对应.