Learn how to import and export JS code with ES Modules in 100 seconds. Get the cheatsheet https://www.samanthaming.com/tidbits/79-module-cheatsheet

#JavaScript #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:24:22.748Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
541625d1-b3ef-4889-b5d2-8c6b66765c4c
7cb09af4c5b94627f99000e3decae1ee897afdfbe62d9a669b0bb521f3402cc1
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Let's say you have some JavaScript code that lives in a single file.
You can turn this code into a module by exporting it.
This allows other files to use an import statement to import this file as a dependency.
So, a module is nothing more than a file that exports its own code.
This allows developers to organize code within their own projects, or share code with the world through package managers like npm.
In modern front end development, it's most common to use ES modules, which became an official language feature in 2015.
This syntax is also supported in Node 13, but traditionally the way to do this in Node is with Require JS.
It's a similar idea, but instead we use this require function to import a module.
Require is more common now, but the future is ES Modules.
A module can export its code in a variety of ways, and this will affect the way the consumer imports A module can export a single default value, multiple values, or both.
If a module provides a default export, it means the consumer can call import name from to have.
The importing file can choose whatever name it wants, but a module also has the option to expose multiple exports from a single file.
You can export them 1 by 1 or altogether as a single export list.
On the other side, the importer will use the exact name used in the module.
However, it is possible to rename and import using the as keyword.
A huge benefit of named exports is that they make the module tree shakable.
That means the consumer only imports the code they actually need, resulting in smaller bundle sizes and better performance.
You can also combine the best of both worlds to give you a hybrid syntax that looks like this.
It helps to have a cheat sheet.
My personal favorite is the one from Samantha Ming.
If you don't already follow her awesome post on Twitter, you definitely should to be.
This has been ES Modules in 100 seconds.
Thanks for watching and I will see you in the next one.

Speaker 0: Let's say you have some JavaScript code that lives in a single file. You can turn this code into a module by exporting it. This allows other files to use an import statement to import this file as a dependency. So, a module is nothing more than a file that exports its own code. This allows developers to organize code within their own projects, or share code with the world through package managers like npm.

In modern front end development, it's most common to use ES modules, which became an official language feature in 2015. This syntax is also supported in Node 13, but traditionally the way to do this in Node is with Require JS. It's a similar idea, but instead we use this require function to import a module. Require is more common now, but the future is ES Modules. A module can export its code in a variety of ways, and this will affect the way the consumer imports A module can export a single default value, multiple values, or both.

If a module provides a default export, it means the consumer can call import name from to have. The importing file can choose whatever name it wants, but a module also has the option to expose multiple exports from a single file. You can export them 1 by 1 or altogether as a single export list. On the other side, the importer will use the exact name used in the module. However, it is possible to rename and import using the as keyword.

A huge benefit of named exports is that they make the module tree shakable. That means the consumer only imports the code they actually need, resulting in smaller bundle sizes and better performance. You can also combine the best of both worlds to give you a hybrid syntax that looks like this. It helps to have a cheat sheet. My personal favorite is the one from Samantha Ming.

If you don't already follow her awesome post on Twitter, you definitely should to be. This has been ES Modules in 100 seconds. Thanks for watching and I will see you in the next one.
Let's say you have some JavaScript code that lives in a single file. You can turn this code into a module by exporting it. This allows other files to use an import statement to import this file as a dependency.
So, a module is nothing more than a file that exports its own code. This allows developers to organize code within their own projects, or share code with the world through package managers like npm. In modern front end development, it's most common to use ES modules, which became an official language feature in 2015.
software development
programming
software
languages
This syntax is also supported in Node 13, but traditionally the way to do this in Node is with Require JS. It's a similar idea, but instead we use this require function to import a module. Require is more common now, but the future is ES Modules. A module can export its code in a variety of ways, and this will affect the way the consumer imports A module can export a single default value, multiple values, or both.
If a module provides a default export, it means the consumer can call import name from to have. The importing file can choose whatever name it wants, but a module also has the option to expose multiple exports from a single file. You can export them 1 by 1 or altogether as a single export list. On the other side, the importer will use the exact name used in the module. However, it is possible to rename and import using the as keyword. A huge benefit of named exports is that they make the module tree shakable. That means the consumer only imports the code they actually need, resulting in smaller bundle sizes and better performance. You can also combine the best of both worlds to give you a hybrid syntax that looks like this. It helps to have a cheat sheet. My personal favorite is the one from Samantha Ming.
trade
shipping
programming
If you don't already follow her awesome post on Twitter, you definitely should to be. This has been ES Modules in 100 seconds. Thanks for watching and I will see you in the next one.
Let's say you have some JavaScript code that lives in a single file. You can turn this code into a module by exporting it. This allows other files to use an import statement to import this file as a dependency. So, a module is nothing more than a file that exports its own code. This allows developers to organize code within their own projects, or share code with the world through package managers like npm. In modern front end development, it's most common to use ES modules, which became an official language feature in 2015. This syntax is also supported in Node 13, but traditionally the way to do this in Node is with Require JS. It's a similar idea, but instead we use this require function to import a module. Require is more common now, but the future is ES Modules. A module can export its code in a variety of ways, and this will affect the way the consumer imports A module can export a single default value, multiple values, or both. If a module provides a default export, it means the consumer can call import name from to have. The importing file can choose whatever name it wants, but a module also has the option to expose multiple exports from a single file. You can export them 1 by 1 or altogether as a single export list. On the other side, the importer will use the exact name used in the module. However, it is possible to rename and import using the as keyword. A huge benefit of named exports is that they make the module tree shakable. That means the consumer only imports the code they actually need, resulting in smaller bundle sizes and better performance. You can also combine the best of both worlds to give you a hybrid syntax that looks like this. It helps to have a cheat sheet. My personal favorite is the one from Samantha Ming. If you don't already follow her awesome post on Twitter, you definitely should to be. This has been ES Modules in 100 seconds. Thanks for watching and I will see you in the next one.
Let's
let's
say
say
you
you
have
have
some
some
JavaScript
javascript
code
code
that
that
lives
lives
in
in
a
a
single
single
file.
file
You
you
can
can
turn
turn
this
this
code
code
into
into
a
a
module
module
by
by
exporting
exporting
it.
it
This
this
allows
allows
other
other
files
files
to
to
use
use
an
an
import
import
statement
statement
to
to
import
import
this
this
file
file
as
as
a
a
dependency.
dependency
So,
so
a
a
module
module
is
is
nothing
nothing
more
more
than
than
a
a
file
file
that
that
exports
exports
its
its
own
own
code.
code
This
this
allows
allows
developers
developers
to
to
organize
organize
code
code
within
within
their
their
own
own
projects,
projects
or
or
share
share
code
code
with
with
the
the
world
world
through
through
package
package
managers
managers
like
like
npm.
npm
In
in
modern
modern
front
front
end
end
development,
development
it's
it's
most
most
common
common
to
to
use
use
ES
es
modules,
modules
which
which
became
became
an
an
official
official
language
language
feature
feature
in
in
2015.
2015
This
this
syntax
syntax
is
is
also
also
supported
supported
in
in
Node
node
13,
13
but
but
traditionally
traditionally
the
the
way
way
to
to
do
do
this
this
in
in
Node
node
is
is
with
with
Require
require
JS.
js
It's
it's
a
a
similar
similar
idea,
idea
but
but
instead
instead
we
we
use
use
this
this
require
require
function
function
to
to
import
import
a
a
module.
module
Require
require
is
is
more
more
common
common
now,
now
but
but
the
the
future
future
is
is
ES
es
Modules.
modules
A
a
module
module
can
can
export
export
its
its
code
code
in
in
a
a
variety
variety
of
of
ways,
ways
and
and
this
this
will
will
affect
affect
the
the
way
way
the
the
consumer
consumer
imports
imports
A
a
module
module
can
can
export
export
a
a
single
single
default
default
value,
value
multiple
multiple
values,
values
or
or
both.
both
If
if
a
a
module
module
provides
provides
a
a
default
default
export,
export
it
it
means
means
the
the
consumer
consumer
can
can
call
call
import
import
name
name
from
from
to
to
have.
have
The
the
importing
importing
file
file
can
can
choose
choose
whatever
whatever
name
name
it
it
wants,
wants
but
but
a
a
module
module
also
also
has
has
the
the
option
option
to
to
expose
expose
multiple
multiple
exports
exports
from
from
a
a
single
single
file.
file
You
you
can
can
export
export
them
them
1
1
by
by
1
1
or
or
altogether
altogether
as
as
a
a
single
single
export
export
list.
list
On
on
the
the
other
other
side,
side
the
the
importer
importer
will
will
use
use
the
the
exact
exact
name
name
used
used
in
in
the
the
module.
module
However,
however
it
it
is
is
possible
possible
to
to
rename
rename
and
and
import
import
using
using
the
the
as
as
keyword.
keyword
A
a
huge
huge
benefit
benefit
of
of
named
named
exports
exports
is
is
that
that
they
they
make
make
the
the
module
module
tree
tree
shakable.
shakable
That
that
means
means
the
the
consumer
consumer
only
only
imports
imports
the
the
code
code
they
they
actually
actually
need,
need
resulting
resulting
in
in
smaller
smaller
bundle
bundle
sizes
sizes
and
and
better
better
performance.
performance
You
you
can
can
also
also
combine
combine
the
the
best
best
of
of
both
both
worlds
worlds
to
to
give
give
you
you
a
a
hybrid
hybrid
syntax
syntax
that
that
looks
looks
like
like
this.
this
It
it
helps
helps
to
to
have
have
a
a
cheat
cheat
sheet.
sheet
My
my
personal
personal
favorite
favorite
is
is
the
the
one
one
from
from
Samantha
samantha
Ming.
ming
If
if
you
you
don't
don't
already
already
follow
follow
her
her
awesome
awesome
post
post
on
on
Twitter,
twitter
you
you
definitely
definitely
should
should
to
to
be.
be
This
this
has
has
been
been
ES
es
Modules
modules
in
in
100
100
seconds.
seconds
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains that a single file can be turned into a module by exporting it, which allows for different types of code to be transported. It is common to use modules in front end development, but there is a shift towards ES modules in the future. Impressive named exports make the module tree shakable, and combining variables with the "any keyword" option allows for a hybrid syntax that looks like this, which is a cheat sheet for developers.
JavaScript Modules in 100 Seconds
Let's say you have some JavaScript code that lives in a single file. You can turn this code into a module by exporting it. This allows other files to use an import statement to import this file as a dependency. So, a module is nothing more than a file that exports its own code. This allows developers to organize code within their own projects, or share code with the world through package managers like npm. In modern front end development, it's most common to use ES modules, which became an official language feature in 2015. This syntax is also supported in Node 13, but traditionally the way to do this in Node is with Require JS. It's a similar idea, but instead we use this require function to import a module. Require is more common now, but the future is ES Modules. A module can export its code in a variety of ways, and this will affect the way the consumer imports A module can export a single default value, multiple values, or both. If a module provides a default export, it means the consumer can call import name from to have. The importing file can choose whatever name it wants, but a module also has the option to expose multiple exports from a single file. You can export them 1 by 1 or altogether as a single export list. On the other side, the importer will use the exact name used in the module. However, it is possible to rename and import using the as keyword. A huge benefit of named exports is that they make the module tree shakable. That means the consumer only imports the code they actually need, resulting in smaller bundle sizes and better performance. You can also combine the best of both worlds to give you a hybrid syntax that looks like this. It helps to have a cheat sheet. My personal favorite is the one from Samantha Ming. If you don't already follow her awesome post on Twitter, you definitely should to be. This has been ES Modules in 100 seconds. Thanks for watching and I will see you in the next one.
The speaker explains that a single file can be turned into a module by exporting it, which allows for different types of code to be transported. It is common to use modules in front end development, but there is a shift towards ES modules in the future. Impressive named exports make the module tree shakable, and combining variables with the "any keyword" option allows for a hybrid syntax that looks like this, which is a cheat sheet for developers.