JavaScript Modules with Import/Export Syntax (ES6) - JavaScript Tutorial
HTML-код
- Опубликовано: 12 сен 2024
- In this video I'll be showing you how to use native JavaScript Modules with the import and export syntax in JavaScript - this works on major browsers such as Chrome, Firefox, Safari and Edge.
Modules allow you to separate your code into individual chunks or components, allowing for easier maintainability and better file organization.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozi...
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
*HOW TO BUILD YOUR OWN JAVASCRIPT LIBRARY WITH MODULES:*
ruclips.net/video/sZQEa13r22I/видео.html
🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
God, this type of clarity and conciseness is so rare. Excellent explainer.
True, this type of videos we can't get on paid course also.
I've been using a form of this in Angular this whole time and didn't even know you could do this in vanilla js. Thanks for the run-through! 🐱👤
No dramas, mate
Wian Lloyd, I’m learning TypeScript from Open Source projects when my background is in PHP/JS. I’m here to see what I don’t know know, ya know?
This is how a tutorial is made. No introduction. Straight to the point and only the point. Everything about it is given.
Been trying to get these imports to work for a long time now. Thanks so much!
That's awesome. Glad I could help
NO ONE ON STACKEXCHANGE COULD EXPLAIN THIS. Thank you!
YOU DESERVE A MILLION + SUBSCRIBERS SIMPLE BUT GREAT EXPLANATION IN A SHORT VIDEO...AMAZING
Thanks so much. I was so confused over import and export for a long time but you really simplified it! Makes total sense
Thanks for this video. I used import/export last year, now I'm learning the same thing as a refresher, and it makes a lot sense watching this video.
Thx
Thx so much for making this video. Finally I'm able to understand it :D
i was struggling with js modules, as soon as i watched this video i figured out my mistake for not including the .js extention. Thanks to dcode, i now uderstood why its was giving mw errors
The explanation in this video is amazing, thank you
Nice. Video. Commenting her to tell the universe that I understood your video. Crystal Clear Concept. Thankyou for the upload.
Great explanation. i'm new to the coding business and learning on my own. your explanation is so simple to understand as compared to some for the resources i have bought online. Thanks
Great to hear!
Great tutorials man! Great explanations, great examples, great everything. Thank you!
No worries man!
Thank you so much; great video! Cheers from Sweden 🇸🇪😊
Perfectly clear, well explained. Thank you :)
I have been putting everything in the same JS file for years... never knew this was possible in JS. This changes everything.
Thanks a lot. you are the only person to explain this topic so well in youtube
Just I want to say Thank You for this informative video. Thank You again!
awesome bro , thank you soo much
Happy to help
very clean and crisp explaining
Excellent, short and concise { completelyUnderstand }.
Thanks for the great, detailed explanation.
Boom! native js modules just work:D thank you for your clear explanation.
hi my browser says " index.html:1 Access to script at 'file:///C:/Users/User/Desktop/Learning/js/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. " and I cannot use modules like you teach. any help?
I have the same problem, and I found the solution, you need to set a remote server.
I installed node and them i made cmd npm install --global http-server.
then i went into my directory root and typed " http-server . " with the "." and withouth " ".
@@jorgeortiz7926 the server must be running while you're importing and exporting modules I assume...
@@UnderGun81 Right, a local server must be running in order to work the modules importing
@@jorgeortiz7926 it's not really working for me, where did you modify the http-server dependency? In the package.json?
@@UnderGun81 i did not modify anything i just ran a command, here www.npmjs.com/package/http-server
You can check the doc
I really like your tutorials alot. You are the best teacher i have ever met
Thank you! 😃
Very usefull and cleary explained! Merci !!!
Nice video. Short and to the point.
Very clear! Thanks!
Awesome explanation. You made it so easy bro.
what a hero
You did excellent. I was only able to understand js modules after watching your video. 🙏🏽
Glad I could help you!
Impossible to explain better, bless you
Thank you for this short lesson without bla bla
very helpful video. finally i'm able to understand. good work.
Wow. Exzellent Explanation!
Thank you so much for taking the time.
Excellent explainer. Thank you very much.
woww...thanks for introducing it 😃 ... really loved this video 👍
Great to hear mate! You're welcome
Very helpful, thanks a lot
No worries mate!!
Geat speaker, very easy to understand
Great tutorial. Thank you!
All good mate, cheers 🍻
If there was an option to love this video i would, but for now... i will have to settle with a like.
Thank you for the knowledge and tutorial!
Thank you. This video has been very helpful
Thank you for this video. very helpful 👍
Great bro. Great explanation. Keep it up.
you sound a bit like Korg. Thumbs up on the video btw
Cheers!
such clear tutorial!
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
very easy explain bro!!
Explained well. Thank you.
Simple and clean,Thanks !!
Very helpful and well explained :D
when reloading the console says "Access to script at '(path to file)' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https."
Thank you so much. Now I can write my code in much more peace.
Simple and awesome excellent video
Cheers mate
Awesome. Nice and easy. Many thanks!
very clear ---- Thanks
Thanks a lot dcode.
Well explained.
silly question 😅.
What is that theme? and what font do you use?
very well explained...
Love from india💖💖thanks bro
No probs!
Good clean tut.
great explanation, thank you.
muy buen video, muy claro, me sirvio mucho :)
Great! thanks for this!!
i tried to use this feature i get a message "Access to script at [path to root js file] from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
Any answer on this?
I made this video which should help you guys out:
ruclips.net/video/0IMz8d9Cby4/видео.html
Good lesson. Now how do I import js files into React as modules? Wonder if I can import the whole file instead of just functions inside of them?
Thanks a ton. This is really helpful.
You're very welcome!
Great tutorial. Thank you for sharing .
No problem.
Awesome, got it! Thank you :)
Can someone explain WHY this import/export stuff is needed? I've created a complicated web page that has 13 js files. I mostly use the "class" syntax, since it makes js seem more like a "real" language (haha!). I have exactly ZERO import/export statements, and everything works just fine. But every example I find when searching talks about import/export. I don't get it. It seems really, really cumbersome to have to explicitly list each function you want to use at least TWICE (one for export, N for import). Is this just a crappy way of doing public/private?
Doesn't work at all. It tries to find every single variable on my exporting script and not just the ones I specified. Then returns null for them.
YES! Thank you!
Thank You Man!
Have my upvote sir! Very understandable for a starter. Thanks for all your effort. There's actually one thing I still don't really understand. Why would you ever use the [export default] option? The reason for me to start code-splitting is to make your code more readable... For me, it looks like a lot more work to understand what you did wrote. Anyway, thanks again!
Thank you that was great! I wonder if you could make a separate video detailing how to set up and use modules in three.js in the browser... but not using node.js or express servers. Many thanks!
Flawless!! 🙂💙
very tanks for this video
10/10. Superb!
I created a chrome extension. I want to add an encryption that is gonna work on a web page and I need to use CryptoJS library but whenever I do import CryptoJS, I get an error: Uncaught SyntaxError: Cannot use import statement outside a modul
when I use the same language when console log ,it indict error as ( i is not defined)
why showing i not defined when console.log?
Thank you for this tuto about module in JS. I code a web app in JS with different modules implemented and I get cors error when trying to launch the app localy. how can I fix this problem please ?
i have errol an error will occur everytime I use import export syntax error: can use statement outside module..
you explain everything very clearly but when i use same files i got CORS error.
Hi I did not quite get the use case of the aggregating feature. In what scenarios would people be using it? And why would people prefer all the modules be exported from a single module....(it actually increases the length of code in case one has got hundred modules....code exporting the modules cannot be skipped...so also code for importing the modules also cannot be avoided....the code for bridging is extra code that one may have to write...although this makes the code structure relatively more systematic...can u please let me know in which scenarios it is used.
great content
In 2021 i'm using require and module but for some reason console.logs wont show up in the console on other scripts even if i export the method and call it in the main script for some reason console.logging an event listener doesn't work nor doest just returning console.log('hello")
is there a way around having to put 'export' in front of every statement in a js file? i find this extremely tedious. Can I just export everything in a js file without mucking up the code with duplicate export calls all down the page?
When I write type = "module" into script tag, no result is obtained.Why is this so?
When I export variables between two javascript files, other functions in the first javascript file become defunct. Any help on how to solve this is appreciated !
Thanks my friend
Thanks a lot!
Thank you!
thank you for the tutorial
But I have a problem because I need to use http protocols to use the export module.
As all of us know we can create android game with the help of phones build,
my question is what will happen if I create my game with export and import method, there's no server or live server available.
Thank you in a advance if there's a way to solve it.
Also show how to use the ES6 functions in HTML button or any input field, onclick or onchange events.
Two questions here: 1) Why not reference to utils.js directly from tag? Why need to write redundant code to import and export, which may lead to forgetting to export and import new functions in the utils.js? 2) Must the utils.js be in the public accessible folder structure? Can the main.js import functions from other JS files in private folders (but in the same project folder) like node_modules? I'm asking this because some modules, e.g. Entity objects, are interoperable between server and client. Currently I need to duplicate such entity.js file between client and server, which is hard to ensure they're in sync. Not sure if the ES6 import/export could help. Thanks!
how to use fs with your architecture? I get an error when I do this
because I don't understand why I can't do this, when I also use import ES6 and added with npm the fs package