ES6中的` `export const`与` `export default`

Question

我正在尝试确定这两者之间是否有很大的区别，除了可以通过以下操作使用export default导入之外：

import myItem from 'myItem';

使用export const我可以做到：

import { myItem } from 'myItem';

除了这个之外，还有其他的区别和/或用例吗？

Answer 1

次要注意:请考虑从默认导出导入时，命名是完全独立的。这实际上对重构有影响。

假设您有一个如下所示的类Foo，并具有相应的导入：

export default class Foo { }

// The name 'Foo' could be anything, since it's just an
// Identifier for the default export
import Foo from './Foo'

现在，如果您将Foo类重构为Bar并重命名该文件，大多数IDE将不会涉及您的导入。所以你最终会得到这样的结果：

export default class Bar { }

// The name 'Foo' could be anything, since it's just an
// Identifier for the default export.
import Foo from './Bar'

尤其是在TypeScript中，我真的很欣赏命名导出和更可靠的重构。不同之处在于缺少default关键字和大括号。这个btw还可以防止你在导入时犯拼写错误，因为你现在已经有了类型检查。

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

Answer 2

当您放入default时，它被称为default导出。每个文件只能有一个默认导出，并且可以将其导入到具有所需名称的其他文件中。当你没有放入default的时候，它被称为导出，你必须将它导入到另一个文件中，使用相同的名称，里面有花括号。

Answer 3

我遇到了浏览器不使用ES6的问题。

我已经修复了它：

 <script type="module" src="index.js"></script>

类型模块告诉浏览器使用ES6。

export const bla = [1,2,3];

import {bla} from './example.js';

那么它应该是有效的。