Wie lade ich ein d3-abhängiges Skript mit RequireJS?

Question

Ich versuche d3-path mit RequireJS zu laden. Mit Blick auf die minimierte d3-path Quellcode, es sieht aus wie es AMD-konform ist, da ich dies in der ersten Zeile sehen:

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

Mein index.html sieht aus wie

<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> 

Und meine JS-Datei, die ich bin versuchen d3.path() zu laden sieht aus wie

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

ich d3-path indem d3_path.path() verwenden kann, aber ich WÖ Ahmt gerne gerne d3.path(). Wenn ich jedoch sowohl d3 als auch d3-path auf d3 setze, überschreibt d3-pathd3 und ich verliere die wichtigsten Funktionen d3.

Ich bin auch offen für RequireJS Best Practices, da ich nicht sicher bin, ob ich die beste Methode verwende. Vielen Dank!

Answer 1

Vorbemerkung: Sie versuchen, d3 V3 mit einem V4-Modul zu laden, das wird nicht sehr gut ineinander greifen.

Auf Ihre Frage: So soll es funktionieren, wenn Sie die Mikromodule verwenden. Sie laden isolierte Funktionalitäten und kombinieren sie.

Sie erhalten nur ein d3 global, wenn Sie die vanilla environments verwenden, wie in der Dokumentation gesagt: versuchen

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

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

Beachten Sie, wenn Sie die gesamte d3 v4 Bibliothek laden, erhalten Sie d3.path:

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

Wenn Sie schließlich mehrere Mikromodule verwenden möchten, können Sie eine zugeordnete Konfiguration verwenden:

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

Zusätzlich zu Nikoshrs Antwort auf die Verwendung von d3 Micro-Bibliotheken: Sie sollten die d3-Module im Bindestrich Stil, z. d3-selection, weil einige d3 Bibliotheken von anderen und require in dieser Syntax abhängen.

Darüber hinaus können Sie Ihr eigenes d3 Objekt in Ihren Modulen erstellen, so dass Sie Ihren Code nicht ändern müssen und d3.path() verwenden können.

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

    d3.path(); 
});