javascript - 为什么不能导出默认对象内的函数

Question

我想知道为什么这对于使用 create-react-app 创建的应用程序无效:

/***** myLib.js *****/
const multiplyByTwo = val => val * 2;

export default { multiplyByTwo };

也不:

/***** myLib.js *****/
let multiplyByTwo = val => val * 2;

export default { multiplyByTwo };

两者都不是:

/***** myLib.js *****/
function multiplyByTwo(val) { return val * 2; };

export default { multiplyByTwo };

然后，在另一个文件中:

/***** main.js *****/
import { multiplyByTwo } from './myLib'

console.log(multiplyByTwo(10));

当我尝试编译它时，出现此错误:

Failed to compile.

./src/main.js
Attempted import error: 'multiplyByTwo' is not exported from './myLib'

但是，这是有效的:

/***** myLib.js *****/
export const multiplyByTwo = val => val * 2;

还有这个:

/***** myLib.js *****/
export let multiplyByTwo = val => val * 2;

Answer 1

区别在于命名导出和默认导出。

当您使用export default <expression>时，当您使用 import exprName from ... 时，该表达式可用于在其他地方导入。该模块正在导出expression作为默认导出，并且 import exprName获取该模块的默认导出并将其放入 exprName 。但语法 import { exprName }是什么东西entirely different ;该语法表明您想要提取名称 exprName 的命名导出从模块。它不是解构，尽管它看起来很像。

您的myLib.js没有 multiplyByTwo 的命名导出(它只有一个对象的默认导出，该对象具有名为 multiplyByTwo 的属性)，所以

import { multiplyByTwo } from './myLib'

失败。

使用命名导出来代替 myLib 是最有意义的。 :

export const multiplyByTwo = val => val * 2;

然后可以使用 import { multiplyByTwo } 导入它您在其他地方使用的语法。

另一个选项，使用原始 myLib 中的相同代码，将导入默认导出的对象，然后在导入后对其进行解构:

import myLib from './myLib';
const { multiplyByTwo } = myLib;

但这看起来有点奇怪。