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

我想知道为什么这在使用

create-react-app

创建的应用程序上无效：

/***** myLib.js *****/
const 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;

命名导出和默认导出之间存在差异

使用

export default

时，当使用

import exprName from…

时，该表达式可用于在其他位置导入。模块正在导出

表达式

作为默认导出，而

import exprName

获取该模块的默认导出并将其放入

exprName

。但是语法

import{exprName}

是一种东西；该语法表示要从模块中提取name

exprName

的命名导出。它不是在分解结构，尽管它看起来很像

您的

myLib.js

没有指定的导出

multiplyByTwo

（它只有一个对象的默认导出，该对象的属性名为

multiplyByTwo

），因此

失败了

最好使用命名的导出，而不是从

myLib

：

export const multiplyByTwo = val => val * 2;

然后可以使用您在其他地方使用的

import{multiplyByTwo}

语法导入它

使用原始

myLib

中的相同代码的另一个选项是导入默认导出对象，然后在导入后对其进行分解：

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

但这看起来有点奇怪。

区别在于命名导出和默认导出之间

使用

export default

时，当使用

import exprName from…

时，该表达式可用于在其他位置导入。模块正在导出

表达式

作为默认导出，而

import exprName

获取该模块的默认导出并将其放入

exprName

。但是语法

import{exprName}

是一种东西；该语法表示要从模块中提取name

exprName

的命名导出。它不是在分解结构，尽管它看起来很像

您的

myLib.js

没有指定的导出

multiplyByTwo

（它只有一个对象的默认导出，该对象的属性名为

multiplyByTwo

），因此

失败了

最好使用命名的导出，而不是从

myLib

：

export const multiplyByTwo = val => val * 2;

然后可以使用您在其他地方使用的

import{multiplyByTwo}

语法导入它

使用原始

myLib

中的相同代码的另一个选项是导入默认导出对象，然后在导入后对其进行分解：

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

---

但这看起来有点奇怪。

您所说的是默认导出和命名导出之间的区别：

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

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

这是一个默认的导出，“限制”为一个单独的导入，如下所示

import App from './App'

命名导出类似于：

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

这是一个命名的导出，然后用花括号将其导入，如下所示：

import { app } from './app'

---

更多信息

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

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

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

这是一个默认的导出，“限制”为一个单独的导入，如下所示

import App from './App'

命名导出类似于：

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

这是一个命名的导出，然后用花括号将其导入，如下所示：

import { app } from './app'

---

更多信息

在导出时使用默认值是指您希望在默认情况下导出某些内容，这意味着当其他文件导入时，他们不需要指定要导入的特定名称，这称为默认导出

示例：

import React from 'react';

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

来到命名导出，当您想要导出特定的内容时，需要使用确切的名称导入，然后我们使用名称导出

示例：

import React,{Component} from 'react';

---

在这个组件中是一个命名的导出，当我们使用功能性/无状态的组件时，我们不需要组件，因此我们可以避免导入它，但React是一个默认导出。

使用默认，而导出是在您想默认导出某个东西时，这意味着当其他文件导入此文件时，它们不需要指定要导入的特定名称，这称为默认导出

示例：

import React from 'react';

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

来到命名导出，当您想要导出特定的内容时，需要使用确切的名称导入，然后我们使用名称导出

示例：

import React,{Component} from 'react';

---

在这个组件中是一个命名的导出，当我们使用一个功能性/无状态的组件时，我们不需要该组件，因此我们可以避免导入它，但React是一个默认导出。

在

的情况下，让multiplyByTwo=val=>val*2；导出默认值{multiplyByTwo}

您应该像导入“/myLib”中的帮助程序一样导入它，并像使用帮助程序一样使用它。multiplyByTwo（3）如果是

让multiplyByTwo=val=>val*2；导出默认值{multiplyByTwo}

您应该像导入“/myLib”中的助手一样导入它，像导入助手一样使用它。multiplyByTwo（3）