ES6 Javascript exports, imports and the difference between 'default export' & 'export'

in es6 •  7 years ago  (edited)

ES6 provides us with a new way to export and import in our files.

ES5 in Node we have module.exports and require()

We export our object our method using module.exports
Screen Shot 2018-03-02 at 9.42.40 PM.png

And we import it by using require('/path/to/export');
Screen Shot 2018-03-02 at 9.42.01 PM.png

In ES6
We import our code with 'import'
Screen Shot 2018-03-02 at 9.49.56 PM.png

We export our code with "export default". According to the documentation, we we use default, 'there is only a single default export per module. A default export can be a function, a class, an object or anything else'.
Screen Shot 2018-03-02 at 9.49.56 PM.png

We want to export more than one module in a file, we used named exports.
Screen Shot 2018-03-02 at 10.01.55 PM.png

And we can import them by name
Screen Shot 2018-03-02 at 10.28.52 PM.png

On the server it hasn't mattered that much if we imported a big module but on the frontend, we want to be as lightweight as possible. This is especially true since most people are using their phones to surf the web. In these cases we want to use named exports and imports only import what is essential to the frontend application.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!