Search code examples
javascriptecmascript-6babeljses6-modules

Re-export default in ES 6 modules

In ES6, is it possible to shorten the following code. I have an App.js file and an index.js.

index.js

import App from './App';

export default App;

Something like this

index.js

export default App from './App.js'
Solution

  • If you use proposal-export-default-from Babel plugin (which is a part of stage-1 preset), you'll be able to re-export default using the following code:

    export default from "./App.js"

    For more information see the ECMAScript proposal.

    Another way (without this plugin) is:

    export { default as App } from "./App.js"

    The above is a very common practice when separate files, each with its own export, have all something in common, for example, utils, so if, for example, one would want to import 3 utility functions, instead of having to write multiple imports:

    import util_a from 'utils/util_a' 
import util_b from 'utils/util_b' 
import util_c from 'utils/util_c'

    One could import any of the utilities in a single-line:

    import { util_a, util_b , util_c } from 'utils'

    By creating an index.js file in the /utils folder and import all the defaults of all the utilities there and re-export, so the index file will serve as the "gateway" for all imports related to that folder.