javascript - 如何选择性地导入 ES2015 模块功能，但使用命名空间？

Question

我开始使用 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 无法将未使用的函数从捆绑包中摇出。

我的梦想是这样的：

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

但是规范中似乎不存在这种功能/语法。如何有选择地定位模块的各个部分，并在导入期间保留命名空间？

score 4 · Accepted Answer

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

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

import * as d3 from './d3';

score 0 · Accepted Answer

规范中似乎不存在那种功能/语法

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

但是，Rollup 无法将未使用的函数从捆绑包中摇出。

这可能是 Rollup 的错，但实际上它能够静态分析代码以了解名称空间对象的使用情况，并找出使用了哪些属性。如果对象用于不是点成员访问的任何内容，则此优化可能需要退出，但通常这是很有可能的。如果它没有按预期工作，您可能需要提交错误报告（另请参阅故障排除）。

2 回答 2