ES 模块：将命名导出作为模块导入？答案

【问题标题】：ES Modules: import named exports as module?ES 模块：将命名导出作为模块导入？
【发布时间】：2019-09-24 15:23:33
【问题描述】：

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，它对摇树有什么影响吗？表格 2 更适合表达，但表格 1 是我可以将所有内容放入模块/命名空间的唯一方法。表格 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

【问题讨论】：

标签： javascript typescript ecmascript-6 es6-modules

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

不，这意味着我不能打电话给Funcs.hello()，只能打电话给Funcs()
我想我很困惑为什么你会打电话给Funcs.hello()，当有两个其他选项可以从摇树中受益时。似乎是多余的。即使它会与另一个导入的函数名称发生冲突，您也可以这样做 import { hello as funcsHello } from './funcs.js' 等。
你甚至可以通过这种方式做多个：import { hello as funcsHello, foo as funcsFoo } from './funcs.js'
我知道...但是请...阅读问题。我知道我能做到。但这太冗长了，在语法上应该是不必要的。我知道 FP 程序员喜欢他们的函数，但不必手动将所有函数重命名为命名空间以防止冲突。为什么不能两全其美？如果我必须加载两个函数名称冲突的库，我必须重命名其中一个，现在它们的命名约定不一致。
好吧，我发现有人提出了至少相同的建议esdiscuss.org/topic/syntax-to-pick-named-exports-from-a-module，所以我会看看我是否可以推动这一点。

【解决方案3】：

Form 2 将受益于摇树。 import * 表示您不想摇树并且想要导入所有内容。所以 webpack 会这样做。

【讨论】：

你有这种行为的来源吗？
那是关于 tree-shaking 的文档......不清楚命名空间导入的未使用成员不会仅仅因为它们是以这种方式导入的。
我已经阅读了关于此的相互矛盾的信息。但是，是的，我确实想坚持使用 Form 2，只是 Form 3 不可用，而且我真的不喜欢在顶级范围内放置杂散的函数名称。
我相信import * as Func 将生成包含属性.hello 和.foo 的变量Func。 webpack 不会删除未使用的对象属性。但是我找不到任何关于我刚才所说的代码或文档，这正是我所经历的。
根据我的经验，我可以做到var a = 'hello'; Func[a]();。不完全是这样，但看起来像那样。所以我可以说它不会那样摇树