将D3 v4模块从require切换为ES6 import的方法

你说得对，直接重复写 import* as d3 from 'd3-timer' 不仅会覆盖之前的 d3 绑定——实际上在ES模块的严格模式下，这种重复声明标识符的写法会直接抛出SyntaxError，根本无法运行。

要实现和你原来的 require 写法完全等效的功能，我们可以通过以下几种方式来做：

方式一：导入命名空间后用Object.assign合并 #

这是最贴近你原来代码逻辑的写法：

// 分别导入两个模块的命名空间对象
import * as d3Selection from 'd3-selection';
import * as d3Timer from 'd3-timer';

// 把两个对象合并成一个新的d3对象
const d3 = Object.assign({}, d3Selection, d3Timer);

这样就和你之前用 require 合并的效果完全一致：所有 d3-selection 和 d3-timer 的导出成员都会被合并到新的 d3 对象中。

方式二：使用对象展开语法（更简洁） #

ES6的对象展开语法可以替代 Object.assign，写法更清爽：

import * as d3Selection from 'd3-selection';
import * as d3Timer from 'd3-timer';

const d3 = { ...d3Selection, ...d3Timer };

这个写法和上面的 Object.assign 效果相同，都是浅合并，而且对打包工具的树摇优化友好度一致。

方式三：按需导入单个成员（推荐用于优化体积） #

如果你只需要两个模块中的部分成员，还可以直接导入特定成员，再手动组装成 d3 对象：

// 只导入需要的成员
import { select, selectAll } from 'd3-selection';
import { timer, timeout } from 'd3-timer';

// 组装成自定义的d3对象
const d3 = { select, selectAll, timer, timeout };

这种写法的好处是，打包工具（比如Webpack）可以通过树摇(tree-shaking)剔除未使用的代码，最终生成的bundle体积会更小。

关键注意点 #

• 不要重复声明同一个导入标识符：ES模块的顶层作用域是严格模式，重复写 import* as d3 属于重复声明变量，会直接报错，而不是覆盖。
• 合并时的属性冲突：如果两个模块导出了同名的成员，后面的模块（比如d3-timer）的成员会覆盖前面的（d3-selection），不过D3的官方模块设计中，不同子模块的导出成员名字通常不会重复，所以一般不用担心这个问题。

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