ES2015`import * as`与普通`import`之间的区别

Question

我只是通过改成import * as CodeMirror普通而解决了一个错误import CodeMirror。

• 我复制了这段代码。（从TypeScript移植）
• import * as CodeMirror一直起作用，直到因其副作用而导入插件为止：预期的新fold属性未定义。

问题：（我试图了解发生了什么更好的事情）

• 到底是怎么回事？此更改如何解决该错误？
• 谁在将该default属性添加到CodeMirror？（或更可能的是：将模块包装在看起来非常相似的另一个对象内）最可能的怀疑者：
  • JavaScript模块（ES2015）
  • 巴别塔
  • Webpack
  • CoffeeScript
  • 代码镜像
• 有没有更好的方法可以实现我想要实现的目标？

---

更多细节：

此代码无法正常工作：

import * as CodeMirror from 'codemirror'
import 'codemirror/addon/fold/indent-fold.js'  # should add `fold` object to `CodeMirror`

console.log typeof CodeMirror          ## 'object'
console.log typeof CodeMirror.fold     ## 'undefined'
console.log typeof CodeMirror.default  ## 'function'  

## Work-around:
console.log typeof CodeMirror.default.fold  ## 'object'

此代码按预期工作：

import CodeMirror from 'codemirror'
import 'codemirror/addon/fold/indent-fold.js'  # should add `fold` object to `CodeMirror`

console.log typeof CodeMirror          ## 'function'
console.log typeof CodeMirror.fold     ## 'object'
console.log typeof CodeMirror.default  ## 'undefined'

---

我已经研究了这些资源，但是它们并没有帮助我完全理解发生了什么：

• JS导入参考
• JS导出参考
• CoffeeScript模块

Answer 1

假设您有一个名为“ test-module”的非常简单的模块，其中有：

var test = 'test';
export default test;
export function helloWorld () { ... };

当您这样做时：

import something from 'test-module';

您只导入默认导出的“ some-module”。在这种情况下，它是字符串测试。默认导出可以是任何内容，对象，函数等。

当您这样做时：

import {helloWorld} from 'test-module';

您专门导入的是名为“ helloWorld”的“测试模块”的成员，而不是默认的导出。在这种情况下，它是函数“ helloWorld”。

如果您已完成：

import {something} from 'test-module';

“东西”将是“未定义”的，因为没有导出该名字的东西。

import * as something from 'test-module';

正在请求具有“测试模块”的所有已命名出口的对象。

然后，您可以通过something.name访问“ test-module”中的任何导出。在这种情况下，它们将是something.default和something.helloWorld。