如何使用RequireJS加載依賴d3的腳本？

Question

我試圖使用RequireJS加載d3-path。望着精縮d3-path源代碼，它看起來像它的兼容AMD-，因爲我看到的第一行：

!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports):"function"==typeof define&&define.amd?define(["exports"],s):s(t.d3=t.d3||{})} 

我index.html看起來像

<script> 
    require.config({ 
     paths: { 
      "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min", 
      "d3-path": "https://d3js.org/d3-path.v1.min", 
      "underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min", 
      "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" 
     } 
    }); 
</script> 

而且，我是我的JS文件試圖加載d3.path()看起來像

require([ 
    "d3", 
    "d3-path", 
    "underscore" 
], 
function(
    d3, 
    d3_path, 
    _ 
) { 
    // d3, d3_path, and _ are defined 
    // but d3.path() isn't defined 
}); 

我可以通過做d3_path.path()使用d3-path但我禾理想地喜歡做d3.path()。但是，如果我同時設置d3和d3-path到d3然後d3-path覆蓋d3而我失去了主要d3功能。

我也開放給RequireJS最佳實踐，因爲我不確定我是否使用最好的方法。謝謝！

Answer 1

初步說明：您正在嘗試使用V4模塊加載d3 V3，但不會很好地進行網格劃分。

在你的問題上：這是它在你使用微型模塊時的工作方式。您加載孤立的功能並將它們組合在一起。

你只有一個d3全球當您使用作爲文檔說vanilla environments：儘量

require.config({ 
    paths: { 
     "d3": "https://d3js.org/d3.v4.min" 
    } 
}); 

require(['d3'], function(myd3) { 
    console.log(window.d3); // undefined 
    console.log(myd3); // d3 object 
}); 

請注意，如果您加載整個D3 V4庫，你會得到d3.path：

require(['d3'], function(myd3) { 
    console.log(myd3.path); // function 
}); 

最後，如果您打算使用多個微型模塊，則可以使用映射配置：

require.config({ 
    paths: { 
     d3src: 'https://d3js.org' 
    }, 
    map: { 
     '*': { 
      'd3': 'd3src/d3.v4.min', 
      'd3-selection': 'd3src/d3-selection.v1.min', 
      'd3-path': 'd3src/d3-path.v1.min', 
     } 
    } 
}); 


// if you want to load the selection and the path modules 
require(['d3-selection', 'd3-path'], function(selection, path) { 
    // ... 
}); 

// if you want to load d3 
require(['d3'], function(d3) { 
    // ... 
}); 

Answer 2

除了nikoshr關於使用d3微庫的答案之外，您應該使用連字符風格命名d3模塊，例如， d3-selection，因爲一些d3庫依賴於其他的庫，並且在這個語法中它們是require。

此外，您可以在模塊中創建自己的d3對象，因此您不必更改代碼並可以使用d3.path()。

require(['d3-selection', 'd3-path'], function(d3Selection, d3Path) { 
    let d3 = Object.assign({}, d3Selection, d3Path); 

    d3.path(); 
});