Question

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

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

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

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

所以我需要一种方法来指定依赖项使用来自d3的{{1}}，所以我可以用任何一个lib设置window对象。这是我的grunt-browserify配置..

window.d3

加载r2d3时我得到options: { external: ['d3'], shim: { 'd3-chart': { path: 'assets/bower_components/d3.chart/d3.chart.js', exports: null, depends: { d3: 'd3' } } } }，即使导出window.d3。

Answer 1

有几种方法可以使用browserify来处理这个问题。

1。）您可以在浏览器之外有条件地使用D3库中的加载并创建一个文件：

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

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

2.）另一种方法可能是使用promethify，你可以有条件地要求它。 https://github.com/johnkpaul/promethify

3.）您可以通过导出以d3作为参数的函数来手动填充它：

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

4。）你可以有2个browserify构建，一个用于遗留，一个用于现代。

我选择选项3并传入window.d3作为参数。

更新：同时结帐公开而不是使用window.D3 https://github.com/thlorenz/exposify

Answer 2

关于Browserify，如果您使用的是Browserify 3.0，则可以utilize the browserify-shim作为转换，并通过在package.json中添加对D3的引用来向{d3}公开global reference ：

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

如果您还没有installing the shim需要为browserify-shim添加转换

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

我无法确认这在我的构建中是否正常，因为我发现an alternate solution to my problem（我使用的是xCharts）。（此外，我刚刚换了一口气。）

使用全局依赖grunt-browserify

2 个答案: