ES6 Modules (ES2015) - Import and Export

Erik Aybar
InstructorErik Aybar

Share this video with your friends

Send Tweet

ES6 (ES2015) introduces a standardized module format to Javascript. We'll take a look at the various forms of defining and importing modules. Using Webpack to bundle up our modules and Babel to transpile our ES6 into ES5, we'll put this new module syntax to work within our project. Then we'll examine how to import 3rd party packages from npm, importing lodash with the _ underscore alias using the ES6 module syntax.

Eapen
Eapen
~ 5 years ago

The IDE you are using for the presentation looks awesome ,can i ask what you are using ?

Erik Aybar
Erik Aybarinstructor
~ 5 years ago

In this video, I am using Sublime Text with the Material Theme (https://equinusocio.github.io/material-theme/). Another one that I've been using lately is the One Dark theme for Sublime (the same as used by default by the Atom editor)

kisanbhat
kisanbhat
~ 5 years ago

I am on Windows 7 running IIS. package.json has "start": "npm run build-watch & npm run server" under scripts. When I enter $ npm start npm run build-watch works but the second npm run server does not run. How can I run both in parallel?

Paul
Paul
~ 5 years ago

Hi kisanbhat, I use IIS too. This lesson uses browser-sync though. There's no harm in installing and running browser sync alongside IIS. to install browser sync - assuming you have node and npm installed, just run npm install -g browser-sync Hope this helps. Paul

kisanbhat
kisanbhat
~ 5 years ago

Thanks Paul. It is all fine now.

Maciej
Maciej
~ 5 years ago

Can you, please, describe lodash import? It is not in directory lodash. Paths are relative to main.js? These are not file paths?

Erik Aybar
Erik Aybarinstructor
~ 5 years ago

Hi Maciej, this is due to how paths are resolved (without custom configurations). import _ from 'lodash' will attempt to locate node_modules/lodash, and then import/store the default export from node_modules/lodash/index.js into the variable _.

To import a module installed via npm (using lodash as an example)

// ES6 Modules
import _ from 'lodash'

// CommonJS
const _ = require('lodash')
// Depending on the library require('lodash').default may be required

compared to importing from relative paths

// import default exports
import myDefaultExport from './myOtherFunction'
import myOtherDefaultExport from '../../some/relative/path'

// import named exports
import { someNamedExport } from './myOtherFunction'
import { someOtherNamedExport } from '../../some/relative/path'

One note of clarification is that while both import * as _ from 'lodash' and import _ from 'lodash' may yield the same result, they are not equivalent. The first is importing all of the named exports while the second is importing the default export. Let me illustrate by example:

// Importing default export
import theDefaultExport from 'someModule'

// Importing all named exports
import * as allTheNamedExports from 'someModule'

If you are looking for more information the MDN ES6 Module docs has some good information and Wes Bos has an in-depth write up on modules as well as an entire ES6 course (no affiliation) available here: http://wesbos.com/javascript-modules/

Daniel Main
Daniel Main
~ 4 years ago

Sublime Unregistered :)

Jesse
Jesse
~ 4 years ago

I got errors running the github code, and had to update several dependencies. There were also errors like: "Using removed Babel 5 option: base.optional - Put the specific transforms you want in the plugins option" The fix for this turned out to be a change to the newer syntax in webpack.config.js from: query: { optional: ['runtime'], stage: 1 } to: query: { plugins: ['transform-runtime'] } with "presets": ["es2015", "env", "stage-1"] in a newly created .babelrc file (also necessarry with current version of babel).

sharkkr
sharkkr
~ 4 years ago

keep in mind: Import * as _ from lodash, is bad idea. u will load the whole library, and if u have some tree shaking mechanism it will not eliminate the unused function of lodash.

Amit
Amit
~ 3 years ago

Man it seems you are totally disinterested in teaching us, you have such low voice in video i cannot even hear it

sebs13
sebs13
~ 2 years ago

Man it seems you are totally disinterested in teaching us, you have such low voice in video i cannot even hear it ... It's painful.