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;

标签： javascriptreactjsecmascript-6exportcreate-react-app

Answer 1

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

当您使用export default <expression>时，该表达式在您使用时可用于在其他地方导入import exprName from ...。该模块expression作为默认导出导出，并import exprName采用该模块的默认导出并将其放入exprName. 但是语法import { exprName }完全不同；该语法表明您要从模块中提取名称的命名导出。exprName它不是解构，即使它看起来很像。

你myLib.js没有命名导出multiplyByTwo（它只有一个对象的默认导出，它有一个名为的属性multiplyByTwo），所以

import { multiplyByTwo } from './myLib'

失败。

使用命名导出而不是 from 最有意义myLib：

export const multiplyByTwo = val => val * 2;

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

另一种选择，在您的原始文件中使用相同的代码myLib，将导入默认导出的对象，然后在导入后对其进行解构：

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

但这看起来有点奇怪。