从“导出默认为”导入运行所有代码答案

【问题标题】：Importing from "export default as" runs all code从“导出默认为”导入运行所有代码
【发布时间】：2020-04-06 23:39:45
【问题描述】：

我有这样的文件：

components/carousel.js

import hammerjs from 'hammerjs';
import React from 'react';

export default () => <div>...</div>;

components/layout.js

import React from 'react';

export default () => <div>...</div>;

components/index.js

export { default as Carousel } from './carousel';
export { default as Layout } from './layout';

现在在我的服务器端渲染应用程序中，我像这样导入布局：

import { Layout } from './components';

我收到关于未定义 window 的错误，因为它正在读取 components/index.js 并在轮播导出中看到了hammerjs 依赖项，这需要窗口并且在服务器上不可用。

当我只尝试导入 Layout 组件时，为什么它会读取 Carousel 组件中的代码？如何避免这种情况发生？

【问题讨论】：

因为它必须导入所有依赖项才能进行导入。
即使我没有导入 Carousel（其中包含hammerjs 依赖项）也是这种情况吗？
Javascript 不会选择性地解析文件中的特定行。整个文件被执行。其中包括导入 carousel 的行。
我最近在构建 PWA 时实际上在生产中遇到了同样的问题。我发现的问题是 index.js 文件被捆绑在 main.js 块中。因此，所有组件和依赖项将在主块下载后立即导入。从组件导入 index.js 文件也会导入所有组件。这显然不是很进步。结果，我不得不单独导入每个组件（这很痛苦），并且我不得不延迟加载路由和 3rd 方库。在经历过这个之后，我建议你解耦你的组件。

【解决方案1】：

简而言之——它为什么要读取 Carousel 组件？

您在components/index.js 中导出两个默认值，这是不受支持的操作。单独导出命名组件或一个包含两者的默认对象。

1) 来自 MDN 的导入/导出 - You can have multiple named exports per module but only one default export. link

在您的组件索引文件中，您将两者都导出为默认值 - 导出命名变量。然后导入命名变量。

2) HammerJS 依赖无关紧要。您的反应代码将通过某种转译器运行，该转译器将获取节点模块并将它们转换为浏览器可以理解的内容。

【讨论】：

我不认为这是正确的。我没有 2 个默认导出，我有 2 个命名导出（从相关文件重命名默认导出）。据我所知，这是有效的 JS：developer.mozilla.org/en-US/docs/web/javascript/reference/…
你是对的 - 抱歉，我试图对自己投反对票哈哈。我的 HammerJS 评论仍然存在 - 你是通过 webpack 还是其他方式运行代码？