this should be pinned on top of the result list for any "beginner javascript tutorial" search. I have been working with JS without knowing this simple thing and had faced so many problems but never had that wise idea to actually search the difference between commonJS and ESM. Now I am humbled and unstuck. Thank you.
Wow, everyone keeps saying es6 modules are better but rarely anyone tells why. Very precisely explained. I started exploring this topic after getting optimisation bailouts warnings in Angular for certain commonjs modules, I think now I know why commonjs modules are not tree shakable
Ty for good explanation. Its been 7 months of my journey and tutorials only say "do this" instead of why they do that in that way. You make clear some of the logic that Ive been misunderstood.
This was such an amazing explanation man. You've literally covered every aspect of modules and that too in complete depth. Thank you soo much. Keep making more JavaScript videos.
your video is so helpful! I love that you dive into the reason to invent modules before getting into how to use it, because for beginners, that is the hardest part to understand - why do we need to complicate things this way? Your explanation made perfect sense and I can see when we need to use it and when not!
I very rarely comment or participate on the Internet, as I'm usually just a passive listener and content reader. However, I felt compelled to break from my habits to thank you. Your explanation is splendid and incredibly well-done
I am Java developer learning JS. I was having a hard time understanding JS import.. Watched many videos but this is where it all make sence!! Kudos, thank you so much! Suubscribed.
your explanation is too good man i was writting Es6 module in Vuejs and Commonjs Modules in nodejs but didn't know there was difference in them until now those Udemy course don't teach this things even beeing most views and rated
You are the best. I was confronting with the issue related to these require() import a lot of time. Hopefully, your video helped me to understand how to solve my issue. Thanks!
I was struggling with a code base that had "require" and exports. Whereas another codebase had import, it was super confusing. But thank you for clearing it up. Great video, good explanation. Also, you speak English very calmly, it helps me to understand better as I am a non-native English speaker.
@@MonsterlessonsAcademy I'm trying to store api key in self-made module and provides key using export/import; that works! However, it still reveals api key using browser devtool; is there any method to hide sensitive information in front-end code?
Amazing explanation of the topic. I understood everything. Also I would like to mention that if you are using the Live Server extension you don't need to install serve from the npm. Thank you for the tutorial :)
Very clear explanation which covers a bit more than just the basics. Thank you. Did I understand correctly that ES6 modules can be used in NodeJS? Also wondering: what's the best way to use node modules in web extensions?
In the latest versions of node both commonjs and es6 is supported but you must provide correct configuration to tell what module system you want nodejs.org/api/esm.html#modules-ecmascript-modules Regarding web extensions I have no idea
This explanation was great. Can you make a video about the code editor you were using and some common shortcut you use it seemed pretty efficient while viewing this video.
Hi, I already have a video about code editor ruclips.net/video/YrLiugDhCuk/видео.html 90% of my shortcuts are standard vim shortcuts. They are not customised. dd - delete the line caw - replace the word ci( - replace in brackets dit - delete in tags etc, etc
so we just went a whole circle from *import from* to *const require* back to *import from* because we realized the original method is still the best one ?! now that's mindblowing
@@MonsterlessonsAcademy Возьмите меня в школу. Я бы за 3 месяца весь фул стек бы освоила, если бы у меня был бы такой учитель. Столько бестолковых учителей, которые сами знают лишь поверхностно. А хочется знать детали и что куда и откуда. Спасибо за отличные уроки.
Just one IMPORTANT thing: 20:12 Import statements are not hoisted, so you have to declare it at the top. (I went through several blogs and articles, may be I understood it wrong...in that case please correct me.)
Import declarations are hoisted. In this case, that means that the identifiers the imports introduce are available in the entire module scope, and their side effects are produced before the rest of the module's code runs. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
@@MonsterlessonsAcademy Actually you are wrong about it, just try and run what you said it will not work as you explained in the video. . ES6 imports are hoisted to the top of the file, but they're in temporal zone until the actual import statement is evaluated...meaning You CAN NOT use the imported function or variable before the import statement itself. So basically the imports are hoisted but not like variable declarations.
@@MonsterlessonsAcademy Thanks for your quick response! I already use classes to organize my code in different files (sometimes static or singleton), so why should I use modules on top? I feel like I'm missing something... Maybe modules are a way to restrict the usage of a class to a specific file?
This is awesome. Can you make a video on how modern web frameworks loads up works in the production version on browser, with all required packages and files, and how those files interact with other, that's a big challenge for me to understand.
Holy cow, this was a superb explanation! Just one question, though. If I were to build a full stack application, would I need to use common.js for the backend and use es modules for the front end, or would you choose one type of module system for both ends? Thank you!
Normally you want to use imports with webpack/babel on client and require on backend. However you might use imports on backend if you want with webpack/babel also but I don't like to do that.
Hello, thank you, the video is just too good, learned lot of things and the confusion was cleared i've few questions, at 19:28 "All imports must live on root level" what does it mean? what happens if I write the import statement at later point, let's say i've using a export function which is written on line 100, what if I write import statement of the exported function on line 99, will it work? will javascript refactor the code and put the import on the top of the file? thank you :)
Thank you for this quick lesson it was very helpful. I am fairly new to coding and the other day I looked at a piece of code and it seemed the page was filled with functions, am I correct to assume that most of a program is created using functions? I am only 2 months in learning JavaScript, so I am fairly new at this stuff.
I skimmed through the video searching for one specific difference that i didn't see you mentioning. I think that CommonJs modules give you copy of exported value while ES modules give reference to a value in scope of module. This makes closures with modules and cross module events possible.
WATCH NEXT: Javascript Interview Questions and Answers - Dominate Your Next Interview - ruclips.net/video/wnYKH2dO620/видео.htmlsi=5DfbGEfhXWiiv0a_
Ah man, one of the best videos explaining this. My understanding of distinguishing between frontend and backend JS cleared up after watching this.
Glad you liked it!
Almost every beginner JavaScript developer gets confused by this topic, But you made it very clear and easy, thank u Bro ❤❤
Glad to hear that
This is actually one of the best JS module explanation videos on RUclips - thank you!
Glad you think so!
I agree
this should be pinned on top of the result list for any "beginner javascript tutorial" search. I have been working with JS without knowing this simple thing and had faced so many problems but never had that wise idea to actually search the difference between commonJS and ESM. Now I am humbled and unstuck. Thank you.
Glad it helped!
Wow, everyone keeps saying es6 modules are better but rarely anyone tells why. Very precisely explained. I started exploring this topic after getting optimisation bailouts warnings in Angular for certain commonjs modules, I think now I know why commonjs modules are not tree shakable
Glad you like it!
Ty for good explanation. Its been 7 months of my journey and tutorials only say "do this" instead of why they do that in that way. You make clear some of the logic that Ive been misunderstood.
You are welcome!
One of the highly underrated channels on RUclips! Brilliant explanation!
Glad you think so!
The best explanation abt this topic. Thanks.
Glad it was helpful!
This was such an amazing explanation man. You've literally covered every aspect of modules and that too in complete depth. Thank you soo much. Keep making more JavaScript videos.
Glad it was helpful!
Your explanation is really good. Thanks for this video.
Glad it was helpful!
Man you are the real MVP my guy, helping out plebs from the past. Thank you so much.
Great to hear that!
You have just explained this topic in a very elegant way. Thanks for sharing this and spread your knowledge on the internet.
Glad it was helpful!
your video is so helpful! I love that you dive into the reason to invent modules before getting into how to use it, because for beginners, that is the hardest part to understand - why do we need to complicate things this way? Your explanation made perfect sense and I can see when we need to use it and when not!
Glad it was helpful!
Explaining the 'why' made it extremely easy to understand! 👏 Thank you very much.
You're very welcome!
Amazing explanation.
Glad it was helpful!
I very rarely comment or participate on the Internet, as I'm usually just a passive listener and content reader. However, I felt compelled to break from my habits to thank you. Your explanation is splendid and incredibly well-done
Wonderful!
Super helpful! I spent so much time watching different tutorials, but you explained this the best!
Glad it was helpful!
Thanks for explaining the history behind this topic!!!!
Glad you like it!
I am Java developer learning JS. I was having a hard time understanding JS import.. Watched many videos but this is where it all make sence!! Kudos, thank you so much! Suubscribed.
Glad it helped!
I love the way you teach and code at the same time. Amazing video, I look forward to watching more of your videos.
Happy to hear that!
This is the best simplified explaination i ever head .. so neat and clear......Thankx dude....Bless you...
Glad it helped!
THE best video on the topic... so much confusion with the evolution and this brings everything together !!!! awesome !! kudos
Glad you liked it!
Clear and easy to follow, thanks. One step closer to understanding it all ✨
Glad it was helpful!
Wow, best commonjs modules and ES6 modules course on YT, that cleared a lot of things in my mind. Thanks a lot. You just got a new sub!
Glad it was helpful!
your explanation is too good man i was writting Es6 module in Vuejs and Commonjs Modules in nodejs but didn't know there was difference in them until now those Udemy course don't teach this things even beeing most views and rated
Awesome!
You are the best. I was confronting with the issue related to these require() import a lot of time. Hopefully, your video helped me to understand how to solve my issue. Thanks!
You're welcome!
Качественный материал. Теперь все понятно. Спасибо
I was struggling with a code base that had "require" and exports.
Whereas another codebase had import, it was super confusing.
But thank you for clearing it up.
Great video, good explanation.
Also, you speak English very calmly, it helps me to understand better as I am a non-native English speaker.
Glad to hear that!
nice video, very well explained, best video on this topic on the internet.
Wow, thanks!
Well explained and I understood it clearly. Kudos !
Thanks!
I'm looking for this explanation a long time. Excellent presentation, congrats!
Glad it was helpful!
Too few likes for an amazing video like this. Very systematic, very clear and concise. Thank you very much
Glad it was helpful!
A very clear tutorial on CommonJS and JS Modules. Thank you.
{2022-03-08}, {2023-12-14}
PS Subscribed!
Awesome, thank you!
Nice article. I learned a ton and watched it like ten times over two days! I have the timeline of modules, now.
Glad it was helpful!
One of the best videos I have seen so far... Thanks a lot for this.
Glad you liked it!
Could you maybe do a video about your setup that allows you to so easily traverse through your files? Great content btw!
Thank you! It is already there: ruclips.net/video/YrLiugDhCuk/видео.html
Thank you for such a clear and concise explanation.
You're very welcome!
Great content! all I wanted to know about node modules and es6 modules
Thank you!
You are one of the best teachers I know. Thank you very much for a lesson 😎👍
Thank you! 😃
Perfectly explained, thanks for the great content!!
Glad it was helpful!
Thanks so much for the in-depth explanation. Got here looking for how to refactor my common js code to typescript es6.
You are welcome!
Damn, thanks man. I had a whole in my brain related to this topic. Now it is filled with a very good explanation.
Glad it helped!
Espectacular! increible lo claro que sos! Me diste un mejor punto de vista!
Thank you!
Really clear explanation! Thanks so much!
Glad it was helpful!
@@MonsterlessonsAcademy I'm trying to store api key in self-made module and provides key using export/import; that works! However, it still reveals api key using browser devtool; is there any method to hide sensitive information in front-end code?
A first class presentation- well done!
Glad you liked it!
Amazing explanation of the topic. I understood everything. Also I would like to mention that if you are using the Live Server extension you don't need to install serve from the npm. Thank you for the tutorial :)
You are welcome!
The text editor is either vim or one of its derivative clones such as neovim. Not everyone uses Microsoft Visual Studio Code.
very smooth and helpful. Thanks!
Glad it was helpful!
Thanks a lot. I've been putting off learning this because it's not a very interesting topic but you summed it up really well.
Glad you enjoyed it!
Clear explanation. Thank you very much. You saved me a lot of time.
Glad it helped!
I love the way he speaks.
Thanks!
super helpful video, thank you so much!
Glad it was helpful!
So clear and concise! Thanks a Lot!
I'm happy that you like it!
Thank you so much! Very good explanation of the topic! 💛
Glad it was helpful!
just discovered your chanel and i am amazed how you explain thing, it is awesome, and i wonder what is the font you are using ? it is really dope
Thank you! It's monaco font.
Very clear explanation which covers a bit more than just the basics. Thank you. Did I understand correctly that ES6 modules can be used in NodeJS? Also wondering: what's the best way to use node modules in web extensions?
In the latest versions of node both commonjs and es6 is supported but you must provide correct configuration to tell what module system you want
nodejs.org/api/esm.html#modules-ecmascript-modules
Regarding web extensions I have no idea
OMG, this is so easy to understand. Thank you very much.
Glad it was helpful!
Great. Thanks for this monstrous explanation
My pleasure!
This explanation was great. Can you make a video about the code editor you were using and some common shortcut you use it seemed pretty efficient while viewing this video.
Hi, I already have a video about code editor
ruclips.net/video/YrLiugDhCuk/видео.html
90% of my shortcuts are standard vim shortcuts. They are not customised.
dd - delete the line
caw - replace the word
ci( - replace in brackets
dit - delete in tags
etc, etc
It was a very thorough explanation, and it was really easy to understand ❤.
Glad it was helpful!
Perfect explanation, thanks a lot
Glad to hear that!
perfect name for channel
Thank
Best video on that topic!
I'm happy that you like it!
so we just went a whole circle from *import from* to *const require* back to *import from* because we realized the original method is still the best one ?! now that's mindblowing
No we don't. require was introduced in NodeJS from the start. imports were introduced much later in Ecmascript 6.
Great vid, really all you need in modules! thx
You're welcome!
OMG! you cleared the confusion I had.
I'm happy to hear that!
Very helpful! Thank you for explaining this!
Glad it was helpful!
the best explanation ever!
Thank you!
Exactly what I was loking for; thanks. Subscribed gladly...
Thanks for the sub!
Best video on modules !!!
Glad you think so!
Amazing!
Thank you! Cheers!
@@MonsterlessonsAcademy Возьмите меня в школу. Я бы за 3 месяца весь фул стек бы освоила, если бы у меня был бы такой учитель. Столько бестолковых учителей, которые сами знают лишь поверхностно. А хочется знать детали и что куда и откуда. Спасибо за отличные уроки.
Cors errors drove me insane trying to learn react while learning new things outside of the framework
Thank you for explanation!
Glad it was helpful!
Good discriptions well done 👍
Thanks 👍
Amazing content! You can really explain your stuff
Glad you think so!
Thanks you made my day and save lots of mine time
Glad to hear that!
Just one IMPORTANT thing: 20:12
Import statements are not hoisted, so you have to declare it at the top.
(I went through several blogs and articles, may be I understood it wrong...in that case please correct me.)
Import declarations are hoisted. In this case, that means that the identifiers the imports introduce are available in the entire module scope, and their side effects are produced before the rest of the module's code runs.
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
@@MonsterlessonsAcademy Thanks for the reference...
@@MonsterlessonsAcademy Actually you are wrong about it, just try and run what you said it will not work as you explained in the video.
.
ES6 imports are hoisted to the top of the file, but they're in temporal zone until the actual import statement is evaluated...meaning You CAN NOT use the imported function or variable before the import statement itself.
So basically the imports are hoisted but not like variable declarations.
Very good explanation, thanks!
However, I'm used to OOP and I don't really get why I should switch to modules instead of keeping using classes.
modules don't stop you to use classes.
export default FooClass
import FooClass from 'foo.class'
you are done
@@MonsterlessonsAcademy Thanks for your quick response!
I already use classes to organize my code in different files (sometimes static or singleton), so why should I use modules on top?
I feel like I'm missing something...
Maybe modules are a way to restrict the usage of a class to a specific file?
@@glurp1er All your classes are global. Without modules you have name collisions, possibility to override class, etc.
@@MonsterlessonsAcademy Thanks again!
Indeed I see now how modules could prevend classes names from colliding.
this is a true monster lesson, i learned several things, thanks for the content
Glad to hear it! Mmmmonster content :)
Very helpful, thanks for the great breakdown!
Very welcome!
Thanks for this great explanation!
Glad it was helpful!
This is awesome.
Can you make a video on how modern web frameworks loads up works in the production version on browser, with all required packages and files, and how those files interact with other, that's a big challenge for me to understand.
Thanks, will add it to the ideas list of future videos
@@MonsterlessonsAcademy🎊❤️🎉
Thank you so much for explaining in detail.
Glad it was helpful!
Thank you very much, everything is clear and very well explained!
You are welcome!
Thanks for your great effort🙂
You are welcome!
Amazing video, thank you so much!
Glad it helped!
great explanation
Glad you think so!
Holy cow, this was a superb explanation! Just one question, though. If I were to build a full stack application, would I need to use common.js for the backend and use es modules for the front end, or would you choose one type of module system for both ends? Thank you!
Normally you want to use imports with webpack/babel on client and require on backend. However you might use imports on backend if you want with webpack/babel also but I don't like to do that.
@@MonsterlessonsAcademy okay, I see. Thank you for replying and thanks again for this video. It was really helpful.
Hello,
thank you, the video is just too good, learned lot of things and the confusion was cleared
i've few questions, at 19:28 "All imports must live on root level" what does it mean?
what happens if I write the import statement at later point, let's say i've using a export function which is written on line 100, what if I write import statement of the exported function on line 99, will it work?
will javascript refactor the code and put the import on the top of the file?
thank you :)
All imports will be moved to the top while reading. Imports in conditions won't work in comparison to require.
Just simply awesome.. 👏
Thank you so much 😀
So so clear. Thanks
Glad you think so!
Brilliant! Thank you
You're very welcome!
Nice video!! Thaanks!
You are welcome!
Thank you for this quick lesson it was very helpful. I am fairly new to coding and the other day I looked at a piece of code and it seemed the page was filled with functions, am I correct to assume that most of a program is created using functions? I am only 2 months in learning JavaScript, so I am fairly new at this stuff.
Hi, it's either functions which we exporting or classes which we exporting. We don't have anything else.
I skimmed through the video searching for one specific difference that i didn't see you mentioning.
I think that CommonJs modules give you copy of exported value while ES modules give reference to a value in scope of module. This makes closures with modules and cross module events possible.
Really,I have learned alot ❤️
You are welcome!
Awesome content, keep going
Thanks, will do!
thx for the clear explanation ;)
You are welcome!
i am beginner in node.js which one i used import or require
In nodejs you should use require and module.exports
Thanks man!! this is awesome
Glad you like it!