Requirejs垫片选项不起作用


11

我正在为Magento2开发一个模块,并且正在使用requirejs加载依赖于jquery的自定义javascript。我在requirejs-config.js中使用shim选项在自定义脚本和jquery之间设置此依赖关系。问题是未(始终)设置此依赖项。有时jQuery确实会在脚本之前加载,并且一切都很好,但有时会在脚本之后加载,从而导致脚本错误:

Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.easing.1.3.js:39
Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.flexslider-min.js:5
Uncaught TypeError: $(...).flexslider is not a function

参见下面我的requirejs-config.js的示例:

var config = {
    map: {
        '*': {
            'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
            'picturefill': 'Vendor_Modulejs/picturefill.min',
            'easing': 'Vendor_Modulejs/jquery.easing.1.3',
            'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
            'fitvids': 'Vendor_Modulejs/jquery.fitvids',
            'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        }
    },
    shim: {
        'flexslider': ['jquery'],
        'picturefill': ['jquery'],
        'easing': ['jquery'],
        'hoverintent': ['jquery'],
        'fitvids': ['jquery'],
        'vimeo': ['jquery']
    }
};

这是我的phtml文件中的javascript:

require(['jquery', 'domReady!', 'picturefill', 'flexslider', 'easing', 'hoverintent', 'fitvids', 'vimeo'], function($) {
    "use strict";

    // javascript here

});

我在这里做错什么,为什么不尊重shim选项,并且jQuery并非总是在其他脚本之前加载。

Answers:


20

您必须像下面那样设置requirejs-config.js

更多详细信息,请参阅链接,Magento 2中如何解决RequireJs错误

 var config = {
        paths: {
                'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
                'picturefill': 'Vendor_Modulejs/picturefill.min',
                'easing': 'Vendor_Modulejs/jquery.easing.1.3',
                'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
                'fitvids': 'Vendor_Modulejs/jquery.fitvids',
                'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        },
        shim: {
                'flexslider': {
                    deps: ['jquery']
                },
                'picturefill': {
                    deps: ['jquery']
                },
                'easing': {
                    deps: ['jquery']
                },
                'hoverintent': {
                    deps: ['jquery']
                },
                'fitvids': {
                    deps: ['jquery']
                },
                'vimeo': {
                    deps: ['jquery']
                }
        }
    };

使用上面的代码并删除var文件夹,然后尝试。谢谢。


这似乎确实可以解决问题,我已将其标记为答案。我想了解为什么这行得通。是路径而不是maps配置,或者是shim配置中的特定依赖项设置。requirejs的文档提到您可以在shim配置中使用一系列依赖项,而不必分别指定每个依赖项。所以我的猜测是路径与地图的差异,但是为什么呢?
Solide

2
您可以从这篇文章中查看引用,stackoverflow.com
questions/19216580/requirejs

1
切勿删除/ VAR,因为它包含有用的信息
马克斯

嗨,Rakesh,您能解释一下上面的代码是如何工作的

@Jaisa,我在上面给出的链接中的博客中详细介绍了
Rakesh Jesadiya 18/12/7
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.