Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



ES6 Modules (ES2015) - Import and Export

5:33 JavaScript lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Greg

Code link is broken

In reply to egghead.io
Avatar
Erik

Thanks for pointing that out, Greg! The link has been updated: https://github.com/erikthedeveloper/egghead-es6-modules

In reply to Greg
Avatar
Eapen

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

Avatar
Erik

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)

In reply to Eapen
Avatar
kisanbhat

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?

Avatar
Paul

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

In reply to kisanbhat
Avatar
kisanbhat

Thanks Paul. It is all fine now.

In reply to Paul
Avatar
Maciej

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

Avatar
Erik

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/

In reply to Maciej
Avatar
Daniel

Sublime Unregistered :)

In reply to Erik
Avatar
Jesse

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).

ES6 or ES2015 introduces a standardized module format. I have an index.html file here and I've loaded it here just for the browser sync server so that we can get some live reloading. I go ahead and type this, we'll say, With Webpack and Babel. See that reloads. We may have an entry point already set up.

If I just log to the console, let's create a function here, that's going to sum two numbers and take A and B, sumTwo(a, b) and will just return that, A + B. If we want to log that out, we'll just say this, 2 + 3. I want to take the result of this, two and three.

function sumTwo(a,b){
  return a + b;
}
console.log(
  "2 + 3",
  sumTwo(2,3) // 5
);

Let's extract this sumTwo function now into an addition module. Unlike here in our src Directory, we'll just create a new file, and we'll put this within a math Directory, and we'll call this addition.js.

See that we have this sumTwo and we need a way of exposing this. That's going to look like this. We can export. We'll just give it the name of the function. That's going to expose the sumTwo function when we import the module.

math/addition.js

function sumTwo(a,b){
  return a + b;
}

export { sumTwo }

What that looks like, we can say, import. We'll just import { sumTwo } from...if we look at our directory structure, we had had the math/addition Expand that.

main.js

import { sumTwo } from `math/addition`;

Now, let's add another function to the addition Module. We will add three numbers together, two plus three plus four. We'll just create this. We'll call this sumThree().

main.js

console.log(
  "2 + 3 + 4",
  sumThree(2, 3, 4)
);

Now, we're going to import that the same way. We'll add it to this list here, sumThree. Now, let's just define that. Now, let's export that. Add it to our Exports, sumThree.

math/addition.js

function sumThree(a, b, c){
  return a + b + c;
}

export { sumTwo, sumThree }

We can see over here that we are importing that successfully. Now, there's a few variations of how we can accomplish both importing and our exporting. Let's take a look at maybe how we can export this little differently. You can actually export directly on a Function Definition like this. We can just say, Export, Export. I'm going to drop this and we're still reloading just the same.

math/addition.js

export function sumTwo(a, b) { ... }

export function sumThree(a, b, c) { ... }

There's a few different ways that we can import these. Let's take a look at a few. We give this a little more breathing room. We can give each of our import statements an alias.

We can import sumTwo as addTwoNumbers. If we run this, we'll see that sumTwo is not defined. If we update this to use our alias, addTwoNumbers.

main.js

import {
  sumTwo as addTwoNumbers,
  sumThree
} from 'math/addition';

Now, let's import the module as a whole. We'll just copy this path here and we'll say, Import * as addition from our path. We'll drop this import statement and we just need to make a few updates here, this is going to be called sumTwo.

Since we're importing the module as a whole as addition, these are going to be on the addition object. Let's update these numbers just so we can see a little more change on that side.

main.js

import * as addition from 'math/addition';

console.log(
  "1 + 3",
  addition.sumTwo(1, 3) // 4
);

console.log(
  "1 + 3 + 4",
  addition.sumTwo(1, 3, 4) // 8
);

We've seen how we can define and import our own custom modules. Let's import a third party package. Let's create a module for some dummy user data. I'm going to just call this data/users.js

I'm pasting this array of users that I have here. We'll make sure that we export that.

data/users.js

var users = [
  { 'user': 'barney', 'age': 36, 'active': false, 'pets': ['hoppy']},
  { 'user': 'fred', 'age': 40, 'active': true, 'pets': ['baby puss', 'dino'] }
];

We'll head over here and we will import users from 'data/users' Module. Let's log that out and let's make sure that everything looks OK.

We have our object over here of our users. We drop each of those down. Let's pull lodash in and make use of the Where function that it provides us. npm install --save lodash. While that's installing, we'll go ahead and we'll just import * as _ from 'lodash';.

main.js

import * as _ from 'lodash';

import {users} from 'data/users';

Now, we go to the alias, the underscore from lodash. We're going to be using the _.where method. Let's go ahead and use that _.where(users, {age: 36}). What we're going to be looking for is we want to grab at the age of 36. We should just get Barney back.

main.js

console.log(_.where(users, {age: 36}));

For the age is 36. If you look at our results here, we got one user back with the name of Barney. I've covered a few usages of importing and a few different styles of importing and using aliases, exporting. We thought we can export our functions directly.

If you're looking for more information, head over to MDN documentation, or Babel has some pretty good summaries of the ES6 modules syntax.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?