javascript - 导出默认值和导出{默认}之间的区别

Question

我一直在 React 中广泛使用命名导出和默认导出，并且遇到了这两种类似的语法。

从“./Button”导出默认值；

从“./Button”导出{default}；

有人可以告诉我他们有什么区别吗？看起来他们正在对以前的 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 (仍为第一阶段)

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

如果您想了解提案作者提出该提案的具体原因，请查看此处 https://github.com/tc39/proposal-export-default-from#common-concerns

为什么它们都有效

当今常用的 JavaScript 不再只是一种解释性语言。它更像是一种转译语言，我们编写的内容(尽管是 JavaScript 或类似的内容)仍然与我们为 JS 引擎发送的内容不同。

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

我应该继续使用该提案

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