ES6 exporting/importing in index file

javascript ecmascript-6 webpack babeljs

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.

Possible duplicate of import modules from files in directory

Bergi

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 '…';.

See also similar patterns here and here

In addition to the ES8 proposal, you can use code generation to maintain index files. Have a look at github.com/gajus/create-index and github.com/ryardley/indexr.

@Bergi So these 3 lines do both the import and export? Or is this just exporting but you no longer need to fiddle with the Comp1_ name etc.?

@musicformellons They directly export from the referenced module, yes.

@amann A circular reference of itself is not bad, but can lead to problems depending on what the module does. Regardless, I think you should only use this pattern in the index file of your library to export all components, and if you have inter-module dependencies you should import them directly instead of importing the part from the large one. With that, no circular references are introduced by this pattern.

G. M.

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

export * from './XThingActions';

Yes. Unforunately this only takes named exports, i.e. it does not include the default export.

get's me a (pretty misleading... took me a moment) SyntaxError: Unexpected reserved word, @Bergi's accepted answer does work.

You can also name your default export to get around that issue. And your actions shouldn't really have a default export so this solution works well.

best practice is to not use default exports in javascript, unnecessary extra syntax. @G.M. has the best answer on this thread for modern javascript.

Javier Aguila

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/';

Does this work when you import a function and then export it back? I tried but it did not.

Sorry it did actually work, I was missing / in my path.

pirs

Simply:

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

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

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

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

Or by functions names :

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

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

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

2 points for {default}! Had no idea something nice like this existed.

If you have an export myFile in a file, then a const myFile = require('/myfile') in other file, you could console.log('myFile') to see that import add an overlayer in the object and you will see argument default as well in your imported object.

ksav

Folder structure:

components|
          |_ Nave.js
          |_Another.js
          |_index.js

Nav.js comp inside components folder

export {Nav}

index.js in component folder

export {Nav} from './Nav';
export {Another} from './Another';

import anywhere

import {Nav, Another} from './components'

wilbo

What worked for me was adding the type keyword:

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

Sherman Hui

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...

How to do it for Create-React-App without ejecting?

Thank you for the answer. I think this is a little scoped for some specific project, but in other ones such as react-react-app or nextjs doesn't seem to work properly

ES6 exporting/importing in index file

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US