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

命名导出和默认导出之间的区别。

使用Mappable时，使用export default <expression>时该表达式可用于其他位置的导入。该模块将import exprName from ...导出为默认导出，而expression则采用该模块的默认导出并将其放入import exprName中。但是语法exprName是entirely different。该语法表明您要从模块中提取名称为import { exprName }的命名出口。即使看起来很像，它也不是破坏性的事情。

您的exprName没有名为myLib.js的命名导出（它仅具有对象的默认导出，该对象具有属性名为multiplyByTwo），所以

multiplyByTwo

失败。

从import { multiplyByTwo } from './myLib'中使用命名导出最有意义：

myLib

，然后可以使用在其他地方使用的export const multiplyByTwo = val => val * 2;语法导入它。

另一种选择是，使用原始import { multiplyByTwo }中的相同代码，导入默认的导出对象，然后在导入后对其进行解构：

myLib

但这看起来有点奇怪。

Answer 2

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

假设您有一个App.js，如果您执行类似的操作

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

这是默认导出，并且像这样限制为单个导入

import App from './App'

命名导出将类似于：

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

这是一个命名的导出，您可以使用大括号将其导入，如下所示：

import { app } from './app'

更多信息here

Answer 3

在导出时使用默认是指默认情况下要导出的内容，这意味着在导入其他文件时，它们不需要指定特定的要导入的名称，称为默认导出。

示例：

import React from 'react';

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

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

示例：

import React,{Component} from 'react';

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

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

3 个答案: