如何有选择地导入 ES2015 模块函数,但带有命名空间?

How to import ES2015 modules functions selectively, but with namespacing?

我开始使用 Rollup 和 D3 版本 4,它是用 ES2015 模块编写的。我已经使用传统的 D3 命名空间 "d3" 编写了一些代码。现在我想使用 Rollup 创建一个自定义包。我想使用 tree-shaking,因为我可能只使用了 d3 中大约一半的功能,而且我想尽可能地保持轻便。

我很清楚我可以选择性地导入函数,例如:

import {scaleLinear} from "d3-scale";
import {
      event,
      select,
      selectAll
} from "d3-selection";

这很快就会变得非常冗长,因为 d3 的一半是很多函数。我可以忍受这一点。更大的问题是它还需要在没有名称空间的情况下完全重写我所有的函数标识符。我不太关心这个,因为我更喜欢命名空间库代码。

我知道我可以导入所有模块:

import * as d3 from "d3";

它保留了 d3 对象命名空间,这对我的代码组织很有用。但是 Rollup 无法将未使用的函数从 bundle 中移除。

我梦想的是这样的:

import {
      event,
      select,
      selectAll
} as d3 from "d3-selection";

但是规范中似乎不存在那种 feature/syntax。我怎样才能有选择地定位模块的各个部分,并在导入过程中保留命名空间?

为此您需要一个重新导出模块:

export {
      event,
      select,
      selectAll
} from "d3-selection";

import * as d3 from './d3';

that sort of feature/syntax doesn't seem to exist in the spec

不,这确实不可能。根据规范,一旦包含一个模块,就会评估并包含整个模块,因此不需要部分包含。命名空间对象始终允许访问模块的所有属性。

But then Rollup can't tree-shake the unused functions out of the bundle.

那是 Rollup 的错,但实际上它能够静态分析代码以了解命名空间对象的用法,并找出使用了哪些属性。如果该对象用于非点式成员访问的任何内容,则此优化可能需要退出,但通常这是很有可能的。如果它没有按预期工作,您可能需要提交错误报告(另请参阅 troubleshooting)。