Reputation: 1735
I currently have a directory structure as follows, where + denotes a folder:
+ middleware
- index.js
+ tracking
- index.js
+ googleAnalytics
- index.js
- logPageView.js
- trackPanos.js
+ mixpanelAnalytics
- index.js
- trackUser.js
- index.js
The lowest level index.js
files in the googleAnalytics
and mixPanel
directories look like this:
--/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];
For some reason I'm able to successfully import things by directly looking up the relevant file paths. Here is the 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.
Ideally I would want something like this:
// 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';
Upvotes: 1
Views: 158
Reputation: 4565
You should use the import * as xxx
syntax.
So, when you have
export const googleAnalyticsMiddleware = [logPageView, trackSignup];
export const mixpanelAnalyticsMiddleware = [trackPanos];
In the js file you are importing, then it would look like
import * as Middleware from './middleware/file/path';
// ...
Middleware.googleAnalyticsMiddleware.doSomething();
Middleware.mixpanelAnalyticsMiddleware.doSomething();
Upvotes: 1