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

Question

我刚刚通过更改 import * as CodeMirror 修复了一个错误简单明了import CodeMirror .

我复制了this code . (从 TypeScript 移植)

import * as CodeMirror一直工作到一个插件因其副作用而被导入:预期的新 fold属性未定义。

问题: (我试图更好地理解发生了什么)

到底是怎么回事？此更改如何修复错误？

谁在添加 default CodeMirror 的属性？ (或者更有可能:将模块包装在另一个看起来非常相似的对象中)最有可能的嫌疑人:

JavaScript 模块 (ES2015)

通天塔

网页包

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 import reference

JS export reference

CoffeeScript modules

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”的“test-module”成员，而不是默认导出。在这种情况下，它是函数“helloWorld”。

如果你做了:

import {something} from 'test-module';

“某事”将是“未定义”，因为没有该名称的导出。

import * as something from 'test-module';

正在请求一个包含“test-module”的所有命名导出的对象。

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