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

Question

我有一个这样的文件：

组件/carousel.js

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

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

组件/layout.js

import React from 'react';

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

组件/index.js

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

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

import { Layout } from './components';

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

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

Answer 1

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

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

---

1) 从 MDN 导入/导出 - You can have multiple named exports per module but only one default export. 关联

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

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