Skip to content

Commit

Permalink
Clarify what's needed for code examples to work
Browse files Browse the repository at this point in the history
People may try to code along.
  • Loading branch information
MaoShizhong committed Aug 19, 2024
1 parent f8c6a31 commit 706708f
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions javascript/organizing_your_javascript_code/es6_modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ When using ESM, each module has its own private scope, where we use import/expor

How do we actually import and export? In true JavaScript fashion, we don't have just one but two types of importing and exporting: `default` and `named`, and they essentially do the same kind of thing but very slightly differently. They can even be mixed and matched in the same file.

For now, we'll just show you the different import/export syntaxes. The code below won't work on its own until we've also changed how we link the script tag, which we will cover afterwards.

#### Named exports

Let's use our `one.js` and `two.js` examples from before. First, we'll need to export our greeting and farewell strings from `one.js`.
Expand Down Expand Up @@ -212,6 +214,8 @@ two.js <-------------- one.js <-------------- three.js

Note that we only needed the one script tag, as the browser will handle the additional file dependencies for us. We also did not need to add the `defer` attribute, as `type="module"` will automatically defer script execution for us.

If you had coded along with the IIFE example at the start of the lesson, try rewriting the JavaScript to use `import` and `export`, and link only the entry point as a module script.

### CommonJS

Along the way, you may have bumped into something called CommonJS (CJS), which uses syntax like `require` and `module.exports` instead of `import` and `export`. You may remember seeing this in our JavaScript exercises in the Foundations course (you've come a long way)! This is a module system that was designed for use with Node.js that works a little differently than ESM, and is not something that browsers will be able to understand.
Expand Down

0 comments on commit 706708f

Please sign in to comment.