导入命令之间的差异

Question

之间的语义差异是什么

import {
FaceOutline as FaceIcon,
Key as KeyIcon
} from '@iconify/icons-mdi';

和

import FaceIcon from '@iconify/icons-mdi/face-outline';
import KeyIcon from '@iconify-icons/mdi/key';

后一种有效，而第一种无效。错误消息说，找不到@iconify/icons-mdi？！`

顺便说一句：其他包裹也可以。示例：

import {
Menu as MenuIcon,
ChevronRight as ChevronRightIcon
} from '@material-ui/icons';

Answer 1

这取决于模块的导出方式。

在@material-ui示例中，位于根目录的index.js文件包含其他文件的命名导出。这不是一个要求，所以不是所有的软件包都允许您这样做。

看看材料ui的源代码。您可以在这里看到，该文件使用命名导出导出所有图标。

但是，如果您转到特定的图标模块，您将看到它使用默认导出。

这就是为什么你可以用不止一种方法来做。

至于@iconify/icons-mdi，我不知道它们是否包含此索引文件，所以您可能无法双向导入。我没有像使用material ui那样使用这个库的经验，但我发现的文档在任何地方都没有引用命名导入。

您可以在此处阅读更多关于命名导入和默认导入之间差异的信息。

Answer 2

这一切都取决于库导出的内容和方式。

如果库使用named导出，则可以使用以下语法：

import { some } from 'some;'

如果模块仅导出default导出，则必须使用以下条目：

import some from 'some;'

为了更好地理解这个主题，我建议你阅读以下文章