为什么不能在默认对象中导出函数

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 的 named export。它不是解构，尽管它看起来很像。

您的 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;

但这看起来有点奇怪。

Answer 2

您在谈论默认导出和命名导出之间的区别：

假设你有一个App.js，如果你做了类似

的事情

export default () => {
  // do something
}

这是一个默认的导出，'limited' 像这样的单个导入

import App from './App'

命名导出类似于：

export const add = (a, b) => a + b;

这是一个命名导出，您可以像这样用大括号导入它：

import { app } from './app'

更多信息here

Answer 3

在导出时使用 default 是当您想默认 export 某些内容时，这意味着当其他文件正在导入时，他们不需要指定要导入的特定名称，这称为 Default Export.

示例：

import React from 'react';

在这种情况下，我们在导入时不指定特定的预期名称，这里React也可以是reactDefaultExport这个名称是用户定义的名称。

来到命名导出，当你想要导出特定的东西时，需要用确切的名称导入，然后我们使用名称导出。

示例：

import React,{Component} from 'react';

在这个 Component 中是一个命名导出，当我们使用 functional/ stateless 组件时我们不需要 Component，所以我们可以避免导入它，但 React 是默认导出。

为什么不能在默认对象中导出函数

Why cannot export function inside default object

javascript

export

ecmascript-6

reactjs

create-react-app