6

我面临着将与和集成的问题，我找到了一个使用 require shim的简单解决方案。使用 shim 我可以导出一个变量，我还可以定义依赖项：

d3: { exports: 'd3' },
nvd3: {
  exports: 'nv',
  deps: ['d3']
},

这样，我简单地用 bower 安装 d3 和其他包，并用 require 包含它们，它非常快速和干净。

尽管如此，我还是遇到了以下问题：全局 d3 变量和本地变量（注入到所需模块中的变量）之间可能存在一些冲突。这是一个与转换和选择相关的 d3 / require / nvd3 集成问题。我不完全理解这个问题，但我已经可以考虑一些问题了。

  • jquery 与 require 有同样的问题，他们提供了 noconflict 方法来修复它
  • 许多库都有这种行为，它们导出一个全局符号，但据我所知，requirejs 没有针对一般问题的现成修复
  • 如果我将所有全局引用重命名d3为 d3 源，则问题已解决。我仍然d3在注入的模块中，但它不再冲突

据我所见，所有 d3 功能都以这种方式工作，但其中一个 nvd3 图表的转换中断可能是因为选择或调度程序被覆盖。它需要对 d3 内部结构的深入了解才能准确地发现错误，但是对全局符号的简单而正确的处理可能会清除所有类似问题。

可能由于 requirejs 处理 shim 依赖项的方式，全局 d3 符号会暴露给 nvd3。无论如何，相同的符号不适用于需要模块，并且如果注入（包含在模块依赖项中）会以某种方式被覆盖。

我还尝试将 d3 包装在一个模块中并正确返回一个本地 d3 变量，但看起来问题仍然存在。

我还在这个 d3 小组讨论中寻求帮助，该小组讨论了一些关于 d3 和模块的先前帖子。

我在这里添加了一个测试用例：https ://github.com/danse/requirenvd3

4

3 回答 3

1

问题似乎不在于您的 RequireJS 配置，而在于您使用的是 d3.v3 而不是 d3.v2。我在您的测试用例中降级了 d3，并且转换效果很好。（弹出窗口仍然偏向一边，我认为它们不应该如此，但这似乎不是您目前关心的问题。）据我了解，nvd3 与 d3.v3 存在一些问题，这可能是一个。另外，请注意 ddotsenko 的 jsFiddle 中的 d3 版本。这可以解释为什么当您使用自己的 d3.v3 库实现它时他的解决方案不起作用。

于 2013-03-18T10:47:41.367 回答
0

首先，您可以绕过shim您不需要它来为纯 JS 返回任何内容。只需使用全局变量。

未注入通过 RequireJS 从 CDN 加载 Angular

其次，虽然shim对于声明脚本的依赖关系是半有用的，但您也可以显式地执行它们：

require(['path/to/d3.min'], function(){
    // nesting to insure d3 loads before nvd3
    require(
        [
            'path/to/mylogic' // <- AMD module
            ,'path/to/nvd3.min' // <- actually a plain JS file
        ]
        , function(mylogic /*, we ignore what nvd3 returns */){
            window.nv // is available for you
        }
    )
})
于 2013-03-08T10:40:50.980 回答
0

看看我在这个 main.js 文件中做了什么（使用“depend”requirejs 插件），然后在其他需要导出到全局变量的文件中，我做了：

    定义（['d3']，函数（d3）{
        // 这里的代码...
    });

依赖插件非常好，它允许您通过depend!plugin[dependancy1,dependancy2]设置分层加载（“plugin”在“dependancy1”和“dependancy2”加载后加载。

于 2013-03-09T03:21:25.273 回答