ES6 Modules (ES2015) - Import and Export
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.
[00:03] 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.
[00:24] 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 and will just return that, A plus B. If we want to log that out, we'll just say this, "Two plus three." I want to take the result of this, two and three.
[00:52] Let's extract this Sum Two function now into an addition module. Unlike here in our Source Directory, we'll just create a new file, and we'll put this within a Math Directory, and we'll call this "Addition."
[01:06] See that we have this Sum Two 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 Sum Two function when we import the module. What that looks like, we can say, "Import." We'll just import Sum Two from...if we look at our directory structure, we had had the Math Addition. Expand that.
[01:49] 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 Sum Three.
[02:03] Now, we're going to import that the same way. We'll add it to this list here, Sum Three. Now, let's just define that. Now, let's export that. Add it to our Exports, Sum Three.
[02:17] 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.
[02:45] 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.
[02:56] We can import Sum Two as Add Two Numbers. If we run this, we'll see that Sum Two is not defined. If we update this to use our alias, Add Two Numbers.
[03:10] Now, let's import the module as a whole. We'll just copy this path here and we'll say, "Import Everything" 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 "Sum Two."
[03:30] 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.
[03:41] 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.
[03:57] I'm pasting this array of users that I have here. We'll make sure that we export that. We'll head over here and we will import users from our Data Users Module. Let's log that out and let's make sure that everything looks OK.
[04:19] 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 Star.
[04:39] 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. What we're going to be looking for is we want to grab at the age of 36. We should just get Barney back.
[04:58] 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.
[05:22] If you're looking for more information, head over to MDN documentation, or Babel has some pretty good summaries of the ES6 modules syntax.