ES6 导入/导出语法困难

Difficulty with ES6 import / export syntax

本文关键字：语法 导入 ES6      更新时间：2023-09-26

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

+ 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];

出于某种原因，我能够通过直接查找相关文件路径来成功导入内容。以下是根索引.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';

您应该使用 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();
相关文章：