In this tutorial we are going to learn about modules and exports and what does this mean in your application and how will this change the way we think about javascript applications.
This is the first time we have modules natively in javascript and it has been one of the most awaited features in the new release of EcmaScript 6. Although modules were not natively supported back then this did not stop people from using them as many standards have been implemented such as common js , amd and you can use Require js to have the same effect in your applications.
This topic is fairly simple all the new syntax we need to know are just three words import , export and default .That’s it and we will learn now how to use them to build something useful.
export default function (){
console.log("I am so fancy");
}
Here in the code above I created a simple export that exports a function but notice I have added the keyword default before it. The default keyword can be used only once as the name implies but you can do other named exports.
Inside this function we have a very simple console log statements that prints a text to the console.
Now to import this function we will use the import function.
import myModule from './module';
myModule();
In the first line I used the import function then I named my import as myModule you can use whatever name you like for this then typed from followed by the name of the file that contained my module with the default export statement we have typed before
Notice : you do not need to type the extension of the file “.js” at the end of your import statement. Then I am calling the function myModule() this should print the text in the console and it does.
If this does not work for you it is probably because you are using a browser that does not still support this feature by the time of writing this tutorial the final version of chrome supports javascript imports but to be sure you might want to use a transpiler like babel just to make sure every thing is running as planned without the need to worry about browser support.
We have discussed default exports but we still do not know how to export multiple modules from the same file , here named exports come to work.
To created a named export all you have to do is to remove the default keyword and add a name to the function you want to export .
export function work(){
console.log('work work work work work !!!')
}
This is what we call a named export . To import this named export type the following then I am going to explain it in details:
import {work} from './module' ;
Here you type the name of the named export between curly braces {} follow by the same syntax we used in default exports.
To import multiple named exports from the same file you can separate them with a comma like this:
import {work, vacation ,somethingElse} from './module' ;
You can also import everything using the wild card * and give your entire module a name that you can use to access other modules inside it like this :
import * as myLife from './module' ;
Here you use the as keyword to give the parent module a name and the rest is the same. Then you can access the functions inside it using the dot notation :
myLife.work()