d3.js - 使用 grunt-browserify 全局依赖

Question

我正在使用 yepnope 根据一些测试有条件地加载脚本，我还使用 browserify，通过 grunt-browserify 构建我的脚本。现在我想要一个脚本替换另一个，但仍然通过相同的要求调用:

// if svg support, then d3.js, otherwise r2d3.js
var d3 = require('d3');

所以 d3 在我的代码中被用作 require，也被用作另一个库的依赖。

问题是它不能用不同的 require 语句来完成，因为那些是在构建期间完成的，并且测试不会发生，因为它取决于用户的浏览器。

所以我需要一种方法来指定依赖项使用 window.d3 中的 d3，这样我就可以使用任一库设置窗口对象。这是我的 grunt-browserify 配置..

options: {
  external: ['d3'],
  shim: {
    'd3-chart': {
       path: 'assets/bower_components/d3.chart/d3.chart.js',
       exports: null,
       depends: {
         d3: 'd3'
       }
    }
  }
}

加载 r2d3 时，我得到 Cannot find module 'd3'，即使它导出了一个 window.d3 .

Answer 1

关于 Browserify，如果您使用的是 Browserify 3.0，您可以 utilize the browserify-shim作为转换，并公开一个 global reference通过在 package.json 中粘贴对 D3 的引用来添加到 d3，如下所示:

 "browserify-shim": {
   "d3": "global:d3"
 }

在 installing the shim 之后如果您还没有，则需要为 browserify-shim 添加一个转换

options: {
  transform: ['browserify-shim']
}

我无法确认这在我的构建中是否正常工作，因为我发现了 an alternate solution to my problem (我正在使用 xCharts)。 (此外，我只是切换到 gulp。)