Name: JavaScript ES6 モジュール (JavaScript ES6 Modules)
Uploaded: 2021-01-14T10:21:13.000Z
Duration: 7 min 39 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

he has six modules are the greatest thing that's come to Java script in a long time for keeping your clothes clean and maintainable.

And today you're gonna learn everything you need to know to get started using them.

Now the main idea behind modules is allowing you to import and export different sections a code from different files into other files, which allows you to break apart your code into more smaller grain files, which makes your coat easier to understand and reason with later on, when you have to change it.

So to start, I have a simple class called user that has a bunch of information about a user that has a user class and two functions for printing the user's name and printing the user's age.

Now what we want to do is export the different information about the user so that we can use it instead of our main dot Js function right here, which is being imported inside of our index dot html file, As you can see here.

So if we go into our users file, there's two different types of exports we can use.

There's a default export, and then there's a standard export.

So what we want to do is export this class of user as the export default.

And there's two different ways to export things.

The first way is to define it at the end of your file here, for example, so we could say export default, user, This is going to export the user object as our default thing for user dot Js file And then we can also use the normal export down here.

So we say export and then inside of curly brackets, we put other things we want to export.

So, for example, we can export print name and we export print age.

And now this file was exporting this user class as well as these two functions.

But this in Texas, a little bit clunky for how to export things.

So, for example, before we define our class, we could just put export default if I can spell it properly.

Export default and that'll actually deep Vogtli export the user class without us needed to do it at the end of the file, and we could do the same thing for our functions.

We just put normal export instead of export default and never go.

Everything in our file is being properly exported.

You just remember that you can on Lee default export one thing.

So usually it's going to be the class that your file was defining.

If you're defining a class in your file, Sonal is actually import these objects in our main Dodge A s.

All we need to use is the imports intact.

And then we say the name of the D folk thing that we want to import.

In our case, it is user, and then we just say we want to import it from so we can say from user dot Js.

But when you're importing things in javascript, you need to make sure that you put in front of it a dot slash if you're wanted to use relative paths or just a single slash if you want to use an absolute path.

And if you say that, you'll notice we get a problem.

And it says that we have uncaught, syntax, air, unexpected, identify, and it's saying that it doesn't know what import is, even though it should know what import is because import is part of the job script syntax in the newer versions.

But we need to tell her index html that we're using modules.

So in our script tag, we just need to put tight equal module here.

And now if you say that, we see our era goes away and this tells our browser that we're using modules inside of this Java script file and by defining the type of module it also defaults are file to use the D for attributes for loading it.

And if you don't know about D for and a sink attributes for loading, make sure to check out my JavaScript video on D for and a sink, which is going to be linked in the cards and the description below.

So now that we have that working, let's actually use that user object that we imported.

We can set it equal to a new user, and we just pass it a name in age.

We're the only two parameters that needs.

And then, just to make sure this is working.

And as you see, we get a user age of 11 and name of Bob.

And we didn't actually defined the user class inside this main file.

Who defined it in this user dot Js file, which is not even being imported anywhere in our aged female.

But it's being imported in our JavaScript, so we're able to actually use it.

And the great thing is, if we don't want to call this user, what say we just want to call it you?

For example, we could just change the name in our import statement to be you, and then where we use the user, just change it to you as well.

And if you say that it still works, we still get a user being printed out.

This import allows us to change the name of the default imported objects.

But let's say that we wanted to import our functions instead or in addition to this class that we have for the default.

So to import non default things we need to do is we need to put them inside of curly brackets, as we did when we exported them.

You want the print name function and we want the print age function.

So we just have to list the name of what we want to export or what we want to import and has to be the same name as what it's exported.

As in this case, if we wanted to change the name, we would need to follow it by as and then the name we want.

So we could change this to be printed user name, for example.

And now we can call the method using print user name instead of print name.

If you say that it will say User's name is 11 which, as we both nose and correct So I just need to change is to be user dot name instead of using about age.

So now that's working properly, says user's name is Bob, and it's using that print user named Function that we alias tit as up here using as and then we can also use print age.

Give it the user and you'll see user is 11 years old, and that's working exactly as we wanted to.

But if we don't want to import this default thing, for example, what we would do is we would just remove it completely and just put the other things we want to import inside of the brackets like this, and that'll work properly.

But we don't actually have a user object to print out, so we don't really have a good way to test it.

This is how you use this in text, to import things that don't have a default or if you don't actually want the default.

And that's all there is to using imports and exports.

Though not very well supported in modern browsers, though, only about 80% of browsers at the time of recording this, which is at the beginning of 2019 support important export features.

So what most people do is they use the tools such as Babel to convert their important export statements and other modern dr script features into older JavaScript so that it could be used in browsers that don't support these newer features.

Since this type module is not defined in older browsers, the older browsers will just completely ignore this script tag so it won't even render it if your browser doesn't support modules.

So there is another attribute you can use, which is called No Module.

And this no module Attributes tells the modern browsers that support modules to completely ignore this script.

But older browsers that don't know about modules will run this script, so it allows you to import different scripts based on if the browser supports modules or not.

So, for example, if we had another script that included all of this code from Maine Dodge S and all the code from user dot Js in tow one file we could import that in here using this no module attributes.

And that would run in older browsers such as Internet Explorer 11 that don't support modules by default.

My advice, though, would be to use something like babble if you want to use modules because babble makes using modules so much easier, and it's so straight for it because it will automatically do the conversions for you and you don't have to rewrite your code twice.

So I hope you guys enjoyed this video on E S six modules and learn how they could be used to break apart your code and make it easier to write and maintain in the future.

If you did enjoy this video, make sure to check on my other videos on E s six related topics linked over here and subscribe to my channel for more videos just like this.

 Thank you guys very much for watching and have a good day. 