如何在ES6环境中动态导入d3库？

你可以直接通过动态import()结合模块对象的方式实现，因为动态导入返回的Promise会resolve为包含所有命名导出的模块对象，这和静态import * as d3 from "d3"得到的对象完全一致。

基础Promise链式调用写法 #

if (condition) {
  import("d3")
    .then((d3) => {
      // 直接使用d3对象调用API
      d3.select("body").append("p").text("动态加载D3成功");
    })
    .catch((error) => {
      console.error("D3加载失败:", error);
    });
}

更简洁的async/await写法 #

async function loadD3WhenNeeded() {
  if (condition) {
    try {
      const d3 = await import("d3");
      // 示例：创建一个简单的SVG图形
      const svg = d3.select("body")
        .append("svg")
        .attr("width", 200)
        .attr("height", 200);
      
      svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 50)
        .style("fill", "blue");
    } catch (error) {
      console.error("加载D3时出错:", error);
    }
  }
}

// 触发加载
loadD3WhenNeeded();

原理说明：动态import("d3")返回的模块对象，等同于静态导入时import * as d3 from "d3"中的d3变量，所有D3的API都可以通过这个对象直接访问。

内容的提问来源于stack exchange，提问作者Aaron Meese