使用全局依赖与grunt-browserify

Question

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

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

因此，d3在我的代码中被用作一个要求，也用作另一个库的依赖项。

问题是它不能用不同的require语句来完成，因为这些语句是在构建过程中完成的，而且测试不能进行，因为它依赖于用户浏览器。

因此，我需要一种方法来指定依赖项使用来自d3的window.d3，这样我就可以使用任何一个libs来设置window对象。这是我的咕噜-棕色配置..。

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

在加载Cannot find module 'd3'时，我会得到r2d3，即使这会导出一个window.d3。

Answer 1

关于Browserify，如果您使用Browserization3.0，则可以将利用褐化-垫片作为一个转换，并通过在您的package.json中添加对d3的引用将全局参考公开到D3中，如下所示：

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

在安装垫片之后，如果还没有，则需要为浏览器化-shim添加一个转换。

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

因为我发现了我问题的另一种解决办法 (我正在使用xCharts)，所以我无法确认这在我的构建中是正确的。(此外，我只是喝了一口。)

Answer 2

有几种方法可以用浏览器来处理这件事。

1.)您可以在浏览器化之外的D3库中有条件地使用load，并创建一个文件，该文件：

'use strict';
module.exports = window.D3

然后，当您在代码中使用D3图表时，需要该文件。

2.另一种方法可以是使用promethify，在那里您可以有条件地要求这样做。https://github.com/johnkpaul/promethify

3.)您可以通过导出一个以d3作为param的函数来手动调整它：

https://gist.github.com/michaelBenin/9557281
var d3 = window.d3;
require('../d3-plugin/d3.chart.js')(d3);

4.)您可以有2个浏览器化构建，一个用于遗产，一个用于现代。

我将使用选项3并将window.d3作为参数传递。

更新:也不使用window.D3 https://github.com/thlorenz/exposify，而是结帐