javascript - 为什么其中一些导出语句会失败？

Question

各位，

我很好奇，为什么会这样:

export default translate(['header'], { wait: true })(Component)

或者这个有效:

let NewComponent  = translate(['header'], { wait: true })(Component)
export {NewComponent}

但这不是:

export translate(['header'], { wait: true })(Component)

这也不行:

export {translate(['header'], { wait: true })(Component)} /* ERRORS */

Answer 1

供引用:Guide on exports from MDN

有两种类型的导出:命名的和默认的。

在您的无效示例中，以下导出:

export translate(['header'], { wait: true })(Component)

...不起作用，因为无法将表达式的结果标识为命名导出(您未给它命名)，并且未将其标记为 default。如果您想知道在将它与设置默认值的第一个示例进行比较时有何不同，请考虑如何在导入中引用它:

// Valid example

// exporting in exports.js
export default translate(['header'], { wait: true })(Component);

// importing it another file
import translateResult from './exports.js';



// Invalid example

// exporting in exports.js
export translate(['header'], { wait: true })(Component);

// importing in another file
// since it's not named, and there is no default, it has no reference.
import ?? from './exports.js';
import { ?? } from './exports.js';

以下导出:

export {translate(['header'], { wait: true })(Component)} /* ERRORS */

...不起作用，因为它在语法上不正确。但是，如果您事先命名了该表达式的结果，它就不会抛出错误(至少不会因为导出而抛出错误):

const translateResult = translate(['header'], { wait: true })(Component);
export { translateResult }; // works