filmov
tv
JavaScript Modules In 90 Seconds #JavaScriptJanuary
Показать описание
Watch the entire #JavaScriptJanuary series from the beginning!
Modules allow you to break up your code into separate files. This helps to organize and keep your code clean.
A module can export code in several ways, and this will affect the way the consumer imports it.
One way to export something is by setting a default. So we can add “export default” to the beginning of the item we are exporting.
We also have a consumer which is the main JavaScript file that is defined in the HTML file. Here we can import the function like this. Note that this requires either a relative or absolute URL, so use either ./ or / before the file name, whichever is applicable.
Now we can use the function in our consumer.
When importing a default export, you can name the import whatever you want.
Note that you can only have one default export per module and a default export is not required.
We can export more that one thing from a module. We just need to add export before it.
Now in our consumer we can import those as well. Note that the default export does not require curly braces but the others do.
We can also rename these in our consumer by using an alias.
So what is the benefit of using modules? Modules are tree shakable (import what you need, shake off the rest) The consumer can import only what they need, which results in smaller bundles and better performance.
ES Modules was introduced in 2015, however as with any newer technology, it is important to check compatibility. As of the date of this video, browser compatibility for JavaScript modules is at 88%.
So if you need to support older browsers you will want to use something like babel to compile your code.
I'll be releasing a new video every day in January! Stay tuned..
_____________________________________
📚 Learn to CODE in just a FEW months here:
_____________________________________
🛠️ Tools I use:
_____________________________________
💖 Show support!
_____________________________________
Watch Next:
_____________________________________
Connect With Me:
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#JavaScriptJanuary #31Days31Videos #codeSTACKr
Modules allow you to break up your code into separate files. This helps to organize and keep your code clean.
A module can export code in several ways, and this will affect the way the consumer imports it.
One way to export something is by setting a default. So we can add “export default” to the beginning of the item we are exporting.
We also have a consumer which is the main JavaScript file that is defined in the HTML file. Here we can import the function like this. Note that this requires either a relative or absolute URL, so use either ./ or / before the file name, whichever is applicable.
Now we can use the function in our consumer.
When importing a default export, you can name the import whatever you want.
Note that you can only have one default export per module and a default export is not required.
We can export more that one thing from a module. We just need to add export before it.
Now in our consumer we can import those as well. Note that the default export does not require curly braces but the others do.
We can also rename these in our consumer by using an alias.
So what is the benefit of using modules? Modules are tree shakable (import what you need, shake off the rest) The consumer can import only what they need, which results in smaller bundles and better performance.
ES Modules was introduced in 2015, however as with any newer technology, it is important to check compatibility. As of the date of this video, browser compatibility for JavaScript modules is at 88%.
So if you need to support older browsers you will want to use something like babel to compile your code.
I'll be releasing a new video every day in January! Stay tuned..
_____________________________________
📚 Learn to CODE in just a FEW months here:
_____________________________________
🛠️ Tools I use:
_____________________________________
💖 Show support!
_____________________________________
Watch Next:
_____________________________________
Connect With Me:
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#JavaScriptJanuary #31Days31Videos #codeSTACKr
0:01:55
JavaScript Modules In 90 Seconds #JavaScriptJanuary
0:01:57
JavaScript Classes In 90 Seconds #JavaScriptJanuary
0:01:20
JavaScript Object Methods In 90 Seconds #JavaScriptJanuary
0:13:05
The 7 Levels of JavaScript Modules
0:02:26
JavaScript Spread Operator In 90 Seconds #JavaScriptJanuary
0:01:41
JavaScript call() apply() bind() Methods In 90 Seconds #JavaScriptJanuary
0:01:40
JavaScript IIFE ? In 90 Seconds #JavaScriptJanuary
0:44:50
JavaScript Modules Past & Present
2:31:15
MAD 2 Revision Session - Part 1
0:01:45
JavaScript Async/Await In 90 Seconds #JavaScriptJanuary
0:01:47
JavaScript Functions In 90 Seconds #JavaScriptJanuary
0:02:10
JavaScript Fetch API In 90 Seconds #JavaScriptJanuary
0:02:50
JavaScript for the Haters
0:01:30
JavaScript Random Number Generator In 90 Seconds #JavaScriptJanuary
0:01:31
Predictive Prefetching with Guess.js in 90 Seconds
0:04:12
Modules - JavaScript Programming
0:01:54
OCaml in 90 Seconds
0:01:36
An Introduction To Deno In 90 Seconds
0:01:41
Array Reduce in 100 seconds
0:00:55
Programming Language Tier List
0:01:39
JavaScript Promise in 100 Seconds
0:01:49
Electron JS in 100 Seconds
0:45:17
Evolution of Javascript Modules at Silicon Valley Code Camp 2019
0:01:19
Modules & npm || Less than 90 seconds
Комментарии