In-depth analysis of the syntax of es6-module

ES6 (ECMAScript 2015) introduces the concept of modularity, aiming to make JavaScript more modular, maintainable and reusable. The ES6 module allows us to organize and manage code in different files, making the dependencies between different modules clearer.

1. Export

1.1 Named Exports

Named Export allows you to export multiple variables, functions, or classes, and each exported name must be unique.

// 
export const name = 'John';
export function greet() {
  ('Hello!');
}
export class Person {
  constructor(name) {
     = name;
  }
}

When using named exports, you can access these exports with the same name when importing.

// 
import { name, greet, Person } from './file1';
(name); // John
greet();           // Hello!
const person = new Person('Jane');

1.2 Default Export

Each module can only have one default export. The default export syntax is more concise, and a value (such as objects, functions, classes, etc.) can be exported.

// 
const person = {
  name: 'John',
  age: 30
};
export default person;

The default export method is imported without curly braces.

// 
import person from './file1';
(); // John

1.3 Export Rename

You can use as to rename it when exporting.

// 
const firstName = 'John';
export { firstName as name };

1.4 Export All

You can re-export all exports of one module at a time, suitable for combinations between modules.

// 
export const name = 'John';
// 
export * from './file1'; // Export  中所有的Export

2. Import

2.1 Import Named Imports

// 
export const name = 'John';
export function greet() {
  ('Hello!');
}
// 
import { name, greet } from './file1';
(name);  // John
greet();            // Hello!

2.2 Import Default Import

// 
const person = { name: 'John' };
export default person;
// 
import person from './file1';
(); // John

2.3 Import Rename

Use as when importing to rename the imported module.

// 
export const firstName = 'John';
// 
import { firstName as name } from './file1';
(name); // John

2.4 Import All

You can import all named exports of a module at once and use them as an object.

// 
export const name = 'John';
export const age = 30;
// 
import * as person from './file1';
(); // John
();  // 30

2.5 Dynamic Import

The ES6 module supports dynamic import, returning a promise, which can load the module asynchronously as needed.

// Dynamic importimport('./file1').then(module => {
  ();
});

3. Features of modularity

3.1 The module is the default strict mode

ES6 modules use strict mode ('use strict';) by default within the module, so the code of all modules is strict mode code and does not require explicit declaration.

// 
x = 10; // Report an error，Undeclared variables are not allowed in strict mode

3.2 Module scope

Each module has its own scope and will not pollute the global scope. Communication between modules through import and export.

// 
let counter = 0;
export function increment() {
  counter++;
}
// 
import { increment } from './file1';
increment();
(counter); // Due to scope isolation，counter exist  Not accessible in

3.3 Circular Dependencies

The ES6 module system solves the problem of circular dependence between modules. For imported modules, it is temporarily in a "hang" state until the dependent module is loaded.

// 
import { b } from './';
export const a = 'a';
// 
import { a } from './';
export const b = 'b';
(a, b); // Output: a b

3.4 Read-only import

Imports in ES6 modules are read-only. You cannot modify the value imported from the module.

// 
export let name = 'John';
// 
import { name } from './file1';
name = 'Jane'; // mistake：The value imported from the module cannot be modified

4. Use modules

4.1 The use of modules in the browser

Modern browsers support module-type scripts. use

<script type="module">
  import { name } from './';
  (name);
</script>

4.2 Using ES6 modules in

In , you need to enable the ES6 module using the .mjs file extension or set "type": "module" in .

{
  "type": "module"
}

Then you can use the import and export syntax in .

// 
export const name = 'John';
// 
import { name } from './';
(name); // John

5. Summary

The ES6 module introduces a cleaner syntax, making the JavaScript code structure clearer and maintainable. With import and export, we can split the code into small modules, load on demand, and handle dependencies. The benefits of using ES6 modularity include:

Improve the maintainability and readability of the code. Better support for circular dependencies. The default strict mode avoids many common JavaScript problems.

This is the end of this article about in-depth analysis of the grammar of es6-module. For more related es6-module grammar content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!