如何扩展动态导入的d3.js ESM模块？

核心原因 #

ESM规范中，模块命名空间对象（也就是import('d3')返回的对象）是不可扩展的，直接给它添加属性会抛出TypeError: Cannot add property xxx, object is not extensible错误——这和非ESM环境下的普通可扩展对象逻辑不同。

可行解决方案 #

1. 用Object.assign创建可扩展的包装对象

Object.assign会完整复制原模块对象的属性（包括getter、setter及其上下文），生成一个新的可扩展对象，避免修改原不可扩展的模块对象：

// 动态导入D3
const d3Original = await import('d3');
// 创建可扩展的新对象，合并原模块的所有属性
const d3 = Object.assign({}, d3Original);
// 执行扩展
d3.contextMenu = factory(d3);

注意：不要用展开运算符{...d3Original}，它会执行getter获取值，丢失原属性的get/set上下文。

2. 使用Proxy代理扩展功能

通过Proxy包装原模块对象，在访问扩展属性时返回对应的实现，完全不修改原对象：

const d3Original = await import('d3');
// 创建代理对象
const d3 = new Proxy(d3Original, {
  get(target, prop) {
    // 拦截contextMenu属性的访问
    if (prop === 'contextMenu') {
      return factory(d3);
    }
    // 其他属性直接返回原模块的内容
    return Reflect.get(target, prop);
  }
});
// 使用时直接调用d3.contextMenu即可

这种方式保留了原模块的所有特性，同时实现了扩展需求。

3. 直接扩展factory依赖的特定子模块（可选）

如果factory只依赖D3的部分子模块，可以单独导入这些模块，扩展后再组合，适合场景更明确的情况：

// 按需导入需要的子模块
const { select, event } = await import('d3');
// 给特定子模块扩展（如果允许）
select.contextMenu = factory({ select, event });

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