ES6导入/导出语法困难

Question

我目前的目录结构如下，其中+表示文件夹：

+ middleware
  - index.js
  + tracking
    - index.js
    + googleAnalytics
      - index.js
      - logPageView.js
      - trackPanos.js
    + mixpanelAnalytics
      - index.js
      - trackUser.js
- index.js

googleAnalytics和mixPanel目录中最低级别的index.js文件如下所示：

--/middleware/tracking/googleAnalytics/index.js
import {logPageView} from './logPageView';
import {trackSignup} from './trackSignup';
export const googleAnalyticsMiddleware = [logPageView, trackSignup];

--/middleware/tracking/googleAnalytics/index.js
import {trackPanos} from './trackPanos';
export const mixpanelAnalyticsMiddleware = [trackPanos];

出于某种原因，我能够通过直接查找相关的文件路径来成功导入内容 。 这是ROOT index.js：

--/index.js

import {mixpanelAnalyticsMiddleware} from './middleware/tracking/mixpanelAnalytics';
import {googleAnalyticsMiddleware} from './middleware/tracking/googleAnalytics';

// This works! But notice how deep I have to dig.

理想情况下，我想要这样的东西：

// This does not work!

--/index.js
import * from './middleware';

--/middleware/index.js
export * from './tracking';

--/middleware/tracking/index.js
export * from './mixpanelAnalyticsMiddleware';
export * from './googleAnalyticsMiddleware';

Answer 1

您应该使用import * as xxx语法。

所以，当你有

export const googleAnalyticsMiddleware = [logPageView, trackSignup];
export const mixpanelAnalyticsMiddleware = [trackPanos];

在您要导入的js文件中，

import * as Middleware from './middleware/file/path';
// ...
Middleware.googleAnalyticsMiddleware.doSomething();
Middleware.mixpanelAnalyticsMiddleware.doSomething();