ES6 exporting/importing in index file

Question

I am currently using ES6 in an React app via webpack/babel. I am using index files to gather all components of a module and export them. Unfortunately, that looks like this:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

So I can nicely import it from other places like this:

import { Comp1, Comp2, Comp3 } from './components';

Obviously that isn't a very nice solution, so I was wondering, if there was any other way. I don't seem to able to export the imported component directly.

Answer 1

You can easily re-export the default import:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

There also is a proposal for ES7 ES8 that will let you write export Comp1 from '…';.

Answer 2

Also, bear in mind that if you need to export multiple functions at once, like actions you can use

export * from './XThingActions';

Answer 3

default export

// Default export (recommended)
export {default} from './module' 

// Default export with alias
export {default as d1} from './module' 

all export

// In >ES7, it could be
export * from './module'

// In >ES7, with alias
export * as d1 from './module'

function name export

// export by function names
export { funcName1, funcName2, …} from './module'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './module'

destructured object export

// export destructured object
export const { myVar, myFunction } = myObjectWithEverything

// export destructured object, with renaming
export const { v1: myVar, f1: myFunction } = myBigObject

with array

// it works with array as well
export const [ funcName1, funcName2 ] = myBigArray

More infos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Answer 4

Too late but I want to share the way that I resolve it.

Having model file which has two named export:

export { Schema, Model };

and having controller file which has the default export:

export default Controller;

I exposed in the index file in this way:

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

and assuming that I want import all of them:

import { Schema, Model, Controller } from '../../path/';

Answer 5

Folder structure:

components|
          |_Comp.js
          |_AnotherComp.js
          |_YetAnotherComp.js
          |_index.js

in Comp.js file.. and do similar to other components:

export {Comp}

from index.js

export {Comp} from './Comp';
export {AnotherComp} from './AnotherComp';
export {YetAnotherComp} from './YetAnotherComp';

now you can import anywhere

import {Comp, AnotherComp, YetAnotherComp} from './components'

Answer 6

I've been searching for years how to export modules as both, named exports, and default exports in modular JavaScript. After tons of experimenting, the solution I found is quite simple and efficient.

// index.js
export { default as Client } from "./client/Client.js";
export { default as Events } from "./utils/Events.js";

// Or export named exports
export { Client } from "./client/Client.js";
export { Events } from "./utils/Events.js";

export * as default from "./index.js";

This would allow each exported module to be imported in two ways:

// script.js
import { Client } from "index.js";
new Client();

import module from "index.js";
new module.Client();

// You could also do this if you prefer to do so:
const { Client } = module;

You can mess around with this to have it suit your needs, but it works for me. Hope it helps!

Answer 7

What worked for me was adding the type keyword:

export type { Comp1, Comp2 } from './somewhere';

Answer 8

Install @babel/plugin-proposal-export-default-from via:

yarn add -D @babel/plugin-proposal-export-default-from

In your .babelrc.json or any of the Configuration File Types

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

Now you can export directly from a file-path:

export Foo from './components/Foo'
export Bar from './components/Bar'

Good Luck...