Introduction to ES Module

ES modules are the ECMAScript standard for processing modules. Although Node.js has used the CommonJS standard for many years, the browser has never had a module system because every major decision (such as a module system) must be standardized by ECMAScript before being implemented

Introduction to ES Module

ES modules are the ECMAScript standard for processing modules.

in spite ofNode.jsThe CommonJS standard has been used for many years, so browsers have never had a module system, because every major decision (such as a module system) must first be standardized by ECMAScript and then implemented by the browser.

The standardization process is completeES6Browsers started to implement this standard, trying to make everything consistent and work the same way, and now Chrome, Safari, Edge and Firefox (starting from version 60) all support ES modules.

Modules are very cool because they allow you to encapsulate various functions and expose that function as a library to other JavaScript files.

ES Modules Support

ES module syntax

The syntax of the import module is:

import package from 'module-name'

And CommonJS uses

const package = require('module-name')

The module is a JavaScript file,Export goodsOne or more values (object, function or variable), useexportKey words. For example, this module exports a function that returns uppercase strings:

uppercase.js

export default str => str.toUpperCase()

In this example, the module defines aDefault export, So it can be an anonymous function. Otherwise, a name will be needed to distinguish it from other exits.

right now,Any other JavaScript modulesIt can be imported by importing the functions provided by uppercase.js.

HTML page can be used<script>With special labeltype="module"Attributes:

<script type="module" src="index.js"></script>

Note: The imported behavior of this module is similar todeferThe script loads. LookLoad JavaScript efficiently with delay and asynchrony

It’s important to note that any loadedtype="module"LoadedStrict mode.

In this example,uppercase.jsModule defines aDefault export, So when importing, we can assign a name that we prefer:

import toUpperCase from './uppercase.js'

We can use it:

toUpperCase('test') //'TEST'

You can also use an absolute path for module import to refer to a module defined on another domain:

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

This is also valid import syntax:

import { toUpperCase } from '/uppercase.js'
import { toUpperCase } from '../uppercase.js'

this is not:

import { toUpperCase } from 'uppercase.js'
import { toUpperCase } from 'utils/uppercase.js'

It is absolute, or has./or/Before the name.

Other import/export options

We saw this example above:

export default str => str.toUpperCase()

This will create a default export. However, in the file, multiple content can be exported using the following syntax:

const a = 1
const b = 2
const c = 3

export { a, b, c }

Another module can be used

import * from 'module'

you can use itDestructive distribution:

import { a } from 'module'
import { a, b } from 'module'

For convenience, you can useas:

import { a, b as two } from 'module'

You can import the default export, or you can import any non-default export by name, for example in this common React import:

import React, { Component } from 'react'

You can view an example of an ES module here:https://glitch.com/edit/#!/flavio-es-modules-example?path=index.html

CORS

Use the following command to get the moduleCORS. This means that if you refer to scripts in other domains, they must have valid CORS headers to allow cross-site loading (e.g.Access-Control-Allow-Origin: *)

What about browsers that do not support modules?

In conjunction withtype="module"withnomodule:

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

in conclusion

ES modules are one of the biggest features introduced in modern browsers. They are part of ES6, but there is a long way to achieve them.

We can use them now! But we must also remember that having multiple modules will have a performance impact on our pages, because this is another step that the browser must perform at runtime.

WebpackEven if the ES module is in the browser, it may still play an important role, but building such a function directly in the language is huge for the way the unified module works on the client side and on Node.js.

Download mine for freeJavaScript beginner's manual


More js tutorials: