javascript - export default 和 export { default } 的区别

Question

我一直在我的 React 中广泛使用命名导出和默认导出，我遇到了这 2 个相似的语法。

从'./Button'导出默认值；

export { default } from './Button';

有人能告诉我他们有什么区别吗？看起来他们正在做同样的事情，而以前的 VSCode Go To Definition 功能不适用于前者。

Answer 1

有什么区别

两者之间有很大的区别，一个是标准的 ES6，另一个是提案。

// Standard ES6
export { default } from './Button';

这是标准的 ES6:它从当前模块导出 Button 的默认值(不改变当前模块的本地范围)

// A Proposal
export default from './Button';

这是一个提案，它解释了为什么它在 vscode 中不起作用这是提案 https://github.com/tc39/proposal-export-default-from (还是第一阶段)

基本上，根据提案，两者的工作方式应该完全相同，提案只是另一种更优雅的编写方式——因此它与我们在标准 ES6 中导出默认值的方式相匹配。

如果您想了解提案作者提出的确切原因，请看这里 https://github.com/tc39/proposal-export-default-from#common-concerns

为什么它们都有效

今天经常使用的 JavaScript 不再是单纯的解释型语言。它更像是一种转译后的语言，我们在其中编写的内容(尽管是用 JavaScript 或类似的东西)仍然与我们为 JS 引擎发送的内容不同。

现在它适用于您(在您的代码中)，因为您的构建系统的一部分正在采用使用此提案编写的代码并将其转换为标准 ES6。如果我们要谈论最流行的 JS 转译器 Babel，则可以使用以下插件启用此语法 https://babeljs.io/docs/en/next/babel-plugin-proposal-export-default-from.html .

我应该继续使用该提案吗

最好不要，这是状态 1 中的提案，即使 Babel - 或任何其他转译器 - 使其工作，它也有可能永远不会成为 Standarad JavaScript。如果发生这种情况，将来您将不得不重写该代码。