Here's a cheat sheet to show you the different ways of exporting and the corresponding way to import it. It really distills to 3 types: name, def...
For further actions, you may consider blocking this person and/or reporting abuse
There is also good old
import * from 'x';)import *is a terrible practice and pollutes the namespace.I dont think so.
Many best practices from many programming languages disagree with you.
Good to know. Cheers.
Totally agree.
For me it's quite annoying to use imported func or var with unknown/unpredictable origin.
Yup! I realize I missed that one so I included it in my notes 👏 The tidbit will also be updated, I don’t want to ruin the surprise...but I maybe have a new series coming up 😁
Perhaps you could add the use case for export/import at the same time.
i.e export { named } from 'path/module'
You can also re-export a default import.
It's already implicit, given the list already points the
imported.defaultthing, but I think it's special enough to be included:Oh! Like including the actual path...yes! I had an earlier comment on this. Totally see how that’s way better...I’ve made a note to update this code note. Thank you for pointing it out! I like it, cause it helps me
Improve my code notes 😊👏
Hi, this only works in node or something like that? When I tried to reproduce the first example in Vanilla JS, always say the same error: SyntaxError: Cannot use import statement outside a module
To add to it ...the goal of import/export is to allow you to split your JS into separate files. To bring it back together, you need a module bundler (ie. Webpack or gulp) to join all the files together. The end result is one giant JS file. And that's the file you can use in your HTML.
In non dev terms, think of it as a kitchen. It's split into different workstations (why? because everyone can focus on what they're good it and is more efficient). And then there's the chef that puts everything together (think Gordon Ramsay lol). That chef is the module bundler. And she/he makes sure the dish is all combined so the customer can eat it. Hope this makes sense 😄
ES6 import module only works in transpiler like webpack. The support for node is currently in experimental stage.
You meant to say 'like babel', because webpack is a bundler.
In this instance because the files are all in modules, you will need a bundler like webpack or even gulp to join them all together 🙂
i explain it here a bit more > dev.to/samanthaming/comment/i48b
Thanks, but I just corrected what he said 😅.
Ah got it! I’ll also adjust my notes, thanks for the clarification 🙂
Yup you got it! Thanks for chiming and helping with the answer @brianwfl88 👍
Great question! (i think i should of talked about in the post! will make a note of it)...let me paste my answer to another response...hope this clears it up 😄
Thank you, it's always great to see articles that go a bit more in depth over what implications such seemingly trivial decisions might have for the project.
Thank you! That article I linked up really changed my perspective. You’re absolutely right, little things have big effects...I can see how an architecture job is so difficult...got to plan all those little details, cause they know what they create will have long term impact 😲
Great article. Thanks Samantha. Can I just check the '...' is the path/file that you are exporting from? And not some other "spread like" syntax I am not aware of?
Yes it is! Great point! Totally can see how that’s confusing...let me make a note to update the code notes to show path 👍 thank you for pointing that source of confusion! It’s comments like yours that help improve the notes 👏👏👏
totally helpful
Awesome! thank you for reading the article 👏
Great content. Thank you Samantha.
Your article touches of what I think is one of the hardest things in modern JS programming: Stuff related to exporting and module loading patterns.
Thank you! I was confused for a long time with this modules...hopefully I was able to clarify it a bit for folks trying to learn this topic 🙂🤞
Really helpful
Thank you! Glad you found it helpful 😄
Wow thanks. Very useful!
Good article. Congrats.
I remember years ago when a started ES5+ JS that import/export was a bit confusing.
Your article will surely help newcomers. 🙂