Is there a syntax using ES6 or ES7 or babel which will allow me to easily bundle together many groups of sub files?
E.g., given:
./action_creators/index.js
./action_creators/foo_actions.js
./action_creators/bar_actions.js
Have index.js import foo and bar actions, then re-export them, so I can
import {FooAction, BarAction} from './action_creators/index.js'
I don't want to have to remember / change references if I were to change which file I've organized the objects themselves into.
With the help of ES6, we can create modules in JavaScript. In a module, there can be classes, functions, variables, and objects as well. To make all these available in another file, we can use export and import. The export and import are the keywords used for exporting and importing one or more members in a module.
Modules can also contain a default export, using the default keyword. A default export will not be imported with curly brackets, but will be directly imported into a named identifier. Now the default value and named values are both available to the script.
Export Default is used to export only one value from a file which can be a class, function, or object. The default export can be imported with any name.
Yes, ES6 supports directly exporting imported modules:
export { name1, name2, …, nameN } from …;
export {FooAction, BarAction} from './action_creators/index.js'
You can also re-export all exports of the imported module using the *
syntax:
export * from …;
export * from './action_creators/index.js';
More info on MDN.
Default export as Default:
export {default} from './something';
Default export as Named:
export {default as foo} from './something';
Named export as Default:
export {foo as default} from './something';
Named export as Named:
export {foo} from './something';
Named export as Renamed:
export {foo as bar} from './something';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With