Javascript D3在需要时不创建重复图表，并包含在单独的网页包包中？

因此，我有两个webpack包，它们需要包含d3操作的相同模块。然而，尽管这两个文件在不同的包中执行了两次，但它并不像通常那样创建d3重复图表

//critical.js is being loaded first
const setupVis = require('./visualization/renderVis.js').setupVis

---

---

由于这两个文件包含在两个不同的包中，因此它们实际上运行了两次。我添加了一个console.log来确认这一点

//console output
----being executed----
0
----being executed----
0

创建重复的图表不是我想要的。我只是好奇为什么当我在本地工作时它没有发生。通常是这样。我创建了一个假捆绑包示例来展示如何创建重复的图表。JSFIDLE正在按照我的预期工作，但是在我的本地服务器上，没有创建重复的图表

谢谢你的帮助

---

p、 s如果我需要或导出模块的方式或任何其他小的编码习惯有任何其他错误，请告诉我

好吧，我在你的小提琴中看到了两个SVG。@GerardoFurtado在JSFIDLE中工作正常，但在我的本地服务器上没有。我不知道如何真正证明这一点。这没什么大不了的，但我只是好奇

//simplified renderVis.js
var margin,x,y,line,svg
margin = { top: 50, right: 50, bottom: 50, left: 50 },
            width = 970 - margin.left - margin.right,
            height = 700 - margin.top - margin.bottom;


x = d3.scaleLinear()
        .domain([0,52])
        .range([0, width]);

y = d3.scaleLinear()
        .domain([0,100])
        .range([height, 0]);

line = d3.line()
                .x(function(d,i) { 
                        return x(i+1); 
                })
                .y(function(d) { return y(d); });

svg = d3.select("#chart")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .style("width", width + margin.left + margin.right)
            .style("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

let counter = 0;
console.log('------being executed------')
console.log(counter)

function setupVis(){
    // blah blah
}

function test(){
    // blah blah
}

exports.setupVis = setupVis
exports.test = test

//console output
----being executed----
0
----being executed----
0