Question

我在requireJS依赖管理方面遇到了很多麻烦。我已经多次阅读了文档和所有在线资源，但我似乎无法使其正常工作。

结束方案：我有一个可嵌入的小部件，最终会将响应式iFrame附加到页面。假设外部页面有一些jQuery版本，但为了安全起见，我包含了自己的jQuery。

我正在使用一个名为responsiveIframe的库，它依赖于jQuery。

基本上，当我从$('#responsive-frame').responsiveIframe({xdomain: '*'});函数内部调用require时，我得到一个未定义的函数错误。当我将$更改为jQuery时，它可以使用，因为它可以使用页面上的现有库（而不是我想要的）。

这是代码（假设路径全部工作）：

require.config({
  baseUrl: 'http://localhost:4000/assets',
  paths: {
    'jquery': 'jquery-1.11.1.min',
    'responsiveIframe': 'jquery.responsiveiframe'
  },
  map: {
    '*': {'jquery': 'jquery-lc'},
    'jquery-lc': {'jquery': 'jquery'}
  }
});

require(['jquery', 'responsiveIframe'], function($) {
  $('#responsive-frame').responsiveIframe({
    xdomain: '*'
  });
});

我尝试使用各种垫片：

  shim: {
    responsiveIframe: {
      init: function() {
        return this.responsiveIframe
      }
    }
  }
  ,
  shim: {
    'responsiveIframe': ['jquery']
  }
  ,
  shim: {
    'responsiveIframe': {
      'deps': 'jquery',
      'exports': 'ResponsiveIframe'
      'init': function() {
        return this.responsiveIframe.noConflict()
    }
  }

我觉得我缺少一些关于requireJS的基本信息。如果您需要更多信息，请随时与我们联系。）

修改的

另外，在此包装我的responsiveiframe.js lib：

define(['responsiveIframe', 'jquery'], function(ri, jQuery) {

似乎工作......但这似乎是'hacky'。

编辑＃2

我能够通过这样包装responsiveIframe lib来实现这个目的：

define(['jquery'], function(jQuery) {

  //library code here

}

我能够移除所有垫片：

require.config({
  baseUrl: 'http://localhost:4000/assets',
  paths: {
    jquery: 'jquery-1.11.1.min',
    responsiveIframe: 'jquery.responsiveiframe'
  },
  map: {
    '*': {'jquery': 'jquery-lc'},
    'jquery-lc': {'jquery': 'jquery'}
  }
});

......并且这样打电话：

require(['jquery','responsiveIframe'], function($) {
  $('#responsive-frame').responsiveIframe({xdomain: '*'});
});

但是，我总是喜欢以“正确”的方式做事，而修改库会让我误以为是。

我觉得我应该能够使用shim来正确应用此包装代码......

Answer 1

您尝试的最后一个垫片是接近的，但deps的值应该是数组而不是字符串。尝试：

shim: {
    'responsiveIframe': {
        deps: ['jquery']
    }
}

这是确保在加载并运行responseIframe脚本之前加载的jquery。

Answer 2

你应该像这样设置垫片：

shim: {
    'responsiveIframe': {
        deps: ['jquery'],
        exports: '$'
    }
}

将模块定义更改为此

define(['responsiveIframe'], function($) {
    $('#responsive-frame').responsiveIframe({xdomain: '*'});
}

应该做的伎俩

<强> UPD。

如果exports返回不同的jquery，那么你应该修改shim：

shim: {
    'responsiveIframe': {
        deps: ['jquery'],
        init: function(jquery) {
            return jquery;
        }
    }
}

使用requireJS和依赖于jquery的库（responsiveIframe）

2 个答案: