从"export default as"导入将运行所有代码

Question

我有一个这样的文件：

组件/轮播.js

import hammerjs from 'hammerjs';
import React from 'react';
export default () => <div>...</div>;

组件/布局.js

import React from 'react';
export default () => <div>...</div>;

组件/索引.js

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

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

import { Layout } from './components';

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

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

Answer 1

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

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

---

1( 从 MDN 导入/导出 -You can have multiple named exports per module but only one default export.链接

在组件索引文件中，默认情况下导出两者 - 导出命名变量。然后导入命名变量。

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