ES 模块：导入命名导出为模块？

Question

funcs.js

export function hello() {
  echo 'foo'
}

export function foo() {
  echo 'bar'
}

index.js

import * as Funcs from './funcs.js' // import module, does tree-shaking work?
import { hello } from './funcs.js' // optimise imports, potentially clashes with other imports
import { hello } as Funcs from './funcs.js' // what should make sense, but isn't supported syntax

// this should be straight forward... 
Funcs.hello()

// vs having some random function on top level scope
hello()

// and this shouldn't work if I didn't import it
Funcs.foo()

这是我的问题。如果我使用表格 1 和表格 2，它对 tree-shaking 有什么不同吗？表格 2 更适合表现力，但表格 1 是我可以将所有内容都放入 module/namespace 中的唯一方法。表格 3 将是我的建议，但也许我不知道有人已经反对为什么不支持它的一些东西。

我不知道该去哪里提出这个建议，甚至不知道要构建一个 babel 插件来做到这一点。

编辑：对于上下文，我正在使用一些不公开默认导出的较新库 (rxjs)，并依赖开发人员加载他们需要的所有功能。所以我无法控制这些出口。

编辑：建议的解决方法是简单地创建一个全局导入文件，导入所有全局所需的导入，并将其全部导出为一个模块，这就是我现在正在做的。

编辑：找到 es-discuss。将去那里而不是希望转发讨论。

https://esdiscuss.org/topic/syntax-to-pick-named-exports-from-a-module

https://esdiscuss.org/topic/proposal-importing-selected-chucks-of-a-module-into-an-object

编辑：在这里找到最有启发性的讨论。

https://esdiscuss.org/topic/import-foo-bar-as-obj-from-module

Answer 1

Form 2 将受益于 tree shaking。 import * 表示您不想进行 tree shaking 并希望导入所有内容。所以 webpack 会这样做。

Answer 2

对于表格 3，你不能只做 import { hello as Funcs } from './funcs.js' 吗？

Answer 3

原来有这种想法的不止我一个。该线程更详细地介绍了与此语法相关的一些潜在问题...我不一定同意，但事实就是如此。

https://esdiscuss.org/topic/import-foo-bar-as-obj-from-module