What is a front-end modular ESM?

What is front-end ESM, specific code examples are required

In front-end development, ESM refers to ECMAScript Modules, which is a modular development method based on ECMAScript specifications. ESM brings many benefits, such as better code organization, isolation between modules, and reusability. This article will introduce the basic concepts and usage of ESM and provide some specific code examples.

1. Basic concepts of ESM
   In ESM, we can divide the code into multiple modules, and each module exposes some interfaces for use by other modules. Each module can introduce the dependencies it needs through the import statement without worrying about global variable conflicts. At the same time, modules can also expose their interfaces to other modules through the export statement.
2. Usage of ESM
   2.1 Basic syntax
   To use ESM, you need to use the script tag in the HTML file to load the module and specify the type as "module". For example:

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

In the module file, we can use the import statement to introduce the interfaces of other modules, and use the export statement to expose our own interfaces to other modules. For example, we have two module files:

// module1.js
export function sayHello() {
  console.log("Hello, module1!");
}

// module2.js
import { sayHello } from "./module1.js";

sayHello();

2.2 Export and Import Interface
In ESM, you can use the export statement to export a variable, function or class in the module to other modules. For example:

// module1.js
export const PI = 3.14;

export function square(x) {
  return x * x;
}

Other modules can use the import statement to import the interface in module1.js and use it. For example:

// module2.js
import { PI, square } from "./module1.js";

console.log(PI); // 输出3.14
console.log(square(2)); // 输出4

2.3 Default export and default import
In addition to exporting named interfaces, ESM also supports default export and default import. A module can only have one default export, and the default export does not need to be wrapped with {}. The default import can use any variable name to receive. For example:

// module1.js
export default function sayGoodbye() {
  console.log("Goodbye!");
}

// module2.js
import goodbye from "./module1.js";

goodbye(); // 输出Goodbye!

3. The difference between ESM and CommonJS (module.exports/require)
   ESM and CommonJS are two different modular development methods. ESM uses static import and export, and module dependencies are determined at compile time, while CommonJS uses dynamic import and export, and module dependencies can only be determined at runtime.

The benefit of ESM is that the dependencies of modules are clearer and there is no need to use global variables to control the loading and execution order of modules. The advantage of CommonJS is that it can dynamically calculate module dependencies at runtime, giving it greater flexibility.

The following is an example of mixing ESM and CommonJS:

// module1.js (ESM)
export const PI = 3.14;

// module2.js (CommonJS)
const { PI } = require("./module1.js");
console.log(PI); // 输出3.14

Summary:
ESM is a commonly used modular development method in front-end development. It manages modules through static import and export. reference relationship. In ESM, modules can reference each other and reuse code, and there is no need to worry about the pollution of global variables. In actual development, we can split complex codes according to modular ideas to improve the maintainability and readability of the code.

The above is an introduction to the basic concepts and usage of ESM. I hope that through the introduction of this article, readers can have a certain understanding of ESM and be able to apply ESM technology in actual development.

The above is the detailed content of What is a front-end modular ESM?. For more information, please follow other related articles on the PHP Chinese website!