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.
This question is related to
javascript
ecmascript-6
webpack
babeljs
@babel/plugin-proposal-export-default-from
via:yarn add -D @babel/plugin-proposal-export-default-from
.babelrc.json
or any of the Configuration File Typesmodule.exports = {
//...
plugins: [
'@babel/plugin-proposal-export-default-from'
]
//...
}
export
directly from a file-path
:export Foo from './components/Foo'
export Bar from './components/Bar'
Good Luck...
Also, bear in mind that if you need to export multiple functions at once, like actions you can use
export * from './XThingActions';
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'
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/';
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
Source: Stackoverflow.com