(js) => blog

Importing With ES6 modules

Page section: posts
TAGS: ES6 modules import export
More on ES6 modules

There are two ways to import content from one JS file into another. The first way, Common JS, is typically used with Node modules. The second way is actually more common and uses ES6 modules. Here is how the latter, ES6 modules, works.

Importing with ES6 modules

To import code from one JS file into another JS file 3 things have to happen.

  1. An export keyword has to preface those code blocks to be exported.
  2. An import statement needs to be written at the top of the importing file.
  3. The importing JS file needs to be made a module.

You also need to run the website via a Live server to avoid CORS (Cross Origin Resource Sharing) errors.

1. Exporting

Simply add the export keyword in front of any JS you wish to export:

const someVariable = "Something I wish to export";

// becomes..
export const someVariable = "Something I wish to export";

2. Importing

An import statement is written at the top of the file that is importing:

import {
    someVariable,
    another
} from './shared.js'

3. Set file to module

The file that is importing code must be an ES6 module. This is easy to do. Simply add a type attribute to the script tag with the value of module:

<script type="module" defer></script>

A default export

You can also make an export into a default by adding the default keyword to an export.

export default someVariable = "Something I wish to export";

This means in your importing file you can refer to this as anything and don’t need curly braces:

import  anyNameAtAll from './shared.js';

// You can now use anyNameAtAll to call the someVariable

If you wish to import other variables or functions as well as the default one:

import anyNameAtAll { anotherFunction, andAnother } from './shared.js';

Global import

If you wish to import all code marked with the export keyword in one go you can use:

import * as Shared from './shared.js';

However to use those imported functions etc.. when you refer to them in your importing file you need to to start with the word you imported as. In the above example:

Shared.myFunction();

Above myFunction is the name of a the function in the imported shared.js file.

However bear in mind it’s generally best to only import what you need.

Aliases

You can also use the as keyword to set an alias for any imports. This is handy if an imported function has the same name as something already in the main JS file.

import {
    myFunction,
    anotherFunction as aF2
} from './shared.js';

Issues

When you add the type="module" attribute to a script tag in HTML, you are indicating that the script should be treated as an ECMAScript module. ECMAScript modules have a different set of rules compared to traditional scripts. Here are some key differences:

  1. Strict Mode by Default:

    • Modules are always in strict mode, meaning that you can’t use undeclared variables, duplicate parameter names, or other potentially error-prone behavior that is allowed in non-strict mode.

  2. Top-Level Scope:

    • Each module has its own top-level scope. Variables declared in a module are local to that module by default and don’t pollute the global scope.

  3. Async Loading:

    • Modules are loaded asynchronously, which means they won’t block the parsing of the HTML page. This allows for better performance.

  4. Import/Export Statements:

    • Modules use import and export statements to control the scope of variables and functions, allowing for better encapsulation.

Given these differences, there are a few common issues that might arise when switching to modules:

  • Global Variables: If your script relies on global variables that are not explicitly exported, they may not be accessible in other modules.

  • Order of Execution: Modules are loaded asynchronously, so the order of execution might be different compared to traditional scripts. Make sure your modules don’t have dependencies on the order of execution.

  • Strict Mode Issues: If your code relies on behaviors that are allowed in non-strict mode but not in strict mode, you might encounter errors.

To identify a specific issue check the browser’s console for error messages. This should give you more information about what is going wrong. Adjust your code accordingly, and make sure it adheres to the rules and principles of ECMAScript modules.

Video by dcode

This topic is well explained in the following video.

Table of Contents