Question

我刚刚修改了一个错误，将import * as CodeMirror更改为普通import CodeMirror。

我复制了this code。（从TypeScript移植）
import * as CodeMirror一直工作，直到为其副作用导入插件：预期的新fold属性未定义。

问题：（我正在努力了解更好的事情）

发生了什么事？这个变化是如何解决这个问题的？
谁将default属性添加到CodeMirror？（或者更可能的是：将模块包装在另一个看起来非常相似的对象中）最可能的嫌疑人：
- JavaScript模块（ES2015）
- Babel
- 的WebPack
- 的CoffeeScript
- CodeMirror
有没有更好的方法来实现我想要实现的目标？

更多详情：

此代码未按预期工作：

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'

我已经研究过这些资源，但是他们没有帮助我完全理解发生的事情：

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';

'something'将是'undefined'，因为没有导出该名称。

import * as something from 'test-module';

要求的对象具有'test-module'的所有命名导出。

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

Answer 2

import * as CodeMirror from 'codemirror'导入所有名为exports ，并将它们命名为名为CodeMirror的对象。

import CodeMirror from 'codemirror'导入默认导出。

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

2 个答案: