Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
JavaScript Modules with Import/Export Syntax (ES6) – JavaScript Tutorial | D4mations.com
  • Friday , 30 October 2020

JavaScript Modules with Import/Export Syntax (ES6) – JavaScript Tutorial

Code Canyon



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:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!

For your reference, check this out:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

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!

Original source

3d Ocean

Related Posts

30 Comments

  1. Jason
    May 13, 2020 at 08:46

    Great tutorials man! Great explanations, great examples, great everything. Thank you!

  2. Best choice
    May 13, 2020 at 08:46

    Great bro. Great explanation. Keep it up.

  3. Chill Chill Not Chill
    May 13, 2020 at 08:46

    All I wanted to do is import a simple model into a three.js context from blender. I think Ill just blow my fucking brains out instead..

  4. Md Risul Amin
    May 13, 2020 at 08:46

    Just I want to say Thank You for this informative video. Thank You again!

  5. Lukman Sanni
    May 13, 2020 at 08:46

    You did excellent. I was only able to understand js modules after watching your video. 🙏🏽

  6. TroenderTass
    May 13, 2020 at 08:46

    Does this use a modular system identical to that of webpack?

  7. Jow Sad
    May 13, 2020 at 08:46

    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?

  8. matt81093
    May 13, 2020 at 08:46

    I'm curious if a 'pass-through', as it were, can utilize the pseudo imported objects. I assume they can, but thought I'd pose the question.

  9. Ayntak
    May 13, 2020 at 08:46

    Awesome, got it! Thank you 🙂

  10. Jcorb
    May 13, 2020 at 08:46

    How do you bring up "Modules" on the left? I can't see it when I have my .js and .html files open in Visual Studio Code. I just see "Open Editors".

  11. تقنيتي Taknity
    May 13, 2020 at 08:46

    u r amazing

  12. Russell Driver
    May 13, 2020 at 08:46

    How would we import an npm package if using an npm init setup? Import doesnt work in that scenario, I have tried afew and used for example: import axios from '../node_modules/axios/dist/axios.js'; and get a console error saying it does not provide an export named 'default'.

  13. Davidp_
    May 13, 2020 at 08:46

    silly question 😅.

    What is that theme? and what font do you use?

  14. Nikhil Mathew
    May 13, 2020 at 08:46

    Simple and awesome excellent video

  15. iamreg1965
    May 13, 2020 at 08:46

    Nice video. Short and to the point.

  16. iamreg1965
    May 13, 2020 at 08:46

    Go Vanilla, you won't regret it.

  17. derek chan
    May 13, 2020 at 08:46

    Hi there, I've tried it but I am getting an error – "SyntaxError: Cannot use import statement outside a module". Can anyone help?

  18. Wael Chorfan
    May 13, 2020 at 08:46

    Thanks for type ='module' ;that tick FUCKS !

  19. salv236
    May 13, 2020 at 08:46

    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."

  20. Sparsh Gupta
    May 13, 2020 at 08:46

    YOU DESERVE A MILLION + SUBSCRIBERS SIMPLE BUT GREAT EXPLANATION IN A SHORT VIDEO…AMAZING

  21. PgTvEspañol
    May 13, 2020 at 08:46

    Thx so much for making this video. Finally I'm able to understand it 😀

  22. Sifat Imtiaz
    May 13, 2020 at 08:46

    10/10. Superb!

  23. Palundrium
    May 13, 2020 at 08:46

    At 1:03 you're missing your root HTML element.

  24. Matthew Leroe
    May 13, 2020 at 08:46

    What does, "Syntax Error: Cannot use import statement outside a module," mean? I found this: https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import, but just want to do this in vanilla.js

  25. Lightning Champion
    May 13, 2020 at 08:46

    Finally helped me understand JavaScript modules. Thanks 😊

  26. Nonchalant 84
    May 13, 2020 at 08:46

    Great tutorial. Thank you!

  27. Divyansh agarwal
    May 13, 2020 at 08:46

    Im having one question what if we want to use the water fn from helper .js in utils.js…So for that we have to import fn water in util.js right? or by simple exporting the fn water in util.js will solve the problem..
    please clarify the doubt im bit confused now

  28. Anis Dzed
    May 13, 2020 at 08:46

    Very helpful, thanks a lot

  29. Joe Rivera
    May 13, 2020 at 08:46

    i appreciate this video man. i learned quite a bit. but what if i want to use the javascript from the 'main.js' on my actual HTML page. Im using the import/export method to export a Player Class into a 'main.js' file and then instatiating a player object into the main.js file. i can console.log player stats and stuff but i cant document.write player stats in the main.html page. it says player is undefined.

  30. Kirill Baryba
    May 13, 2020 at 08:46

    Hey! Is it safe if you use modules if babel transpiler is not connected ?

Leave A Comment

You must be logged in to post a comment.