前端ESM是什么，需要具體代碼示例
在前端開發中，ESM是指ECMAScript Modules，即基于ECMAScript規范的模塊化開發方式。ESM帶來了許多好處，比如更好的代碼組織、模塊間的隔離和可重用性等。本文將介紹ESM的基本概念和用法，并提供一些具體的代碼示例。
-
ESM的基本概念
在ESM中，我們可以把代碼分為多個模塊，每個模塊對外暴露一些接口供其他模塊使用。每個模塊都可以將自己需要的依賴通過import語句引入，而不用擔心全局變量的沖突問題。同時，模塊也可以通過export語句將自己的接口暴露給其他模塊使用。
ESM的用法
2.1 基本語法
使用ESM需要在HTML文件中使用script標簽加載模塊，并指定type為”module”。例如：
<script type="module" src="main.js"></script>
登錄后復制
在模塊文件中，我們可以使用import語句引入其他模塊的接口，并使用export語句將自己的接口暴露給其他模塊。例如，我們有兩個模塊文件：
// module1.js
export function sayHello() {
console.log("Hello, module1!");
}
// module2.js
import { sayHello } from "./module1.js";
sayHello();
登錄后復制
2.2 導出和導入接口
ESM中可以使用export語句將模塊中的某個變量、函數或類導出給其他模塊使用。例如：
// module1.js
export const PI = 3.14;
export function square(x) {
return x * x;
}
登錄后復制
其他模塊可以使用import語句導入module1.js中的接口，并進行使用。例如：
// module2.js
import { PI, square } from "./module1.js";
console.log(PI); // 輸出3.14
console.log(square(2)); // 輸出4
登錄后復制
2.3 默認導出和默認導入
除了導出具名接口外，ESM還支持默認導出和默認導入的方式。一個模塊只能有一個默認導出，而且默認導出不需要使用{}進行包裹。默認導入則可以使用任意變量名進行接收。例如：
// module1.js
export default function sayGoodbye() {
console.log("Goodbye!");
}
// module2.js
import goodbye from "./module1.js";
goodbye(); // 輸出Goodbye!
登錄后復制
- ESM與CommonJS(module.exports/require)的區別
ESM與CommonJS是兩種不同的模塊化開發方式。ESM采用靜態導入和導出的方式，在編譯時就確定了模塊的依賴關系，而CommonJS采用動態導入和導出的方式，模塊的依賴關系在運行時才能確定。
ESM的好處在于模塊的依賴關系更清晰，不需要通過全局變量來控制模塊的加載和執行順序。而CommonJS的好處在于可以在運行時動態計算模塊的依賴關系，靈活性更高。
以下是一個ESM和CommonJS混用的例子：
// module1.js (ESM)
export const PI = 3.14;
// module2.js (CommonJS)
const { PI } = require("./module1.js");
console.log(PI); // 輸出3.14
登錄后復制
總結：
ESM是前端開發中常用的模塊化開發方式，通過靜態導入和導出來管理模塊之間的引用關系。在ESM中，模塊之間可以互相引用、重用代碼，并且不用擔心全局變量的污染問題。在實際開發中，我們可以將復雜的代碼按模塊化的思路進行拆分，提高代碼的可維護性和可讀性。
以上是ESM的基本概念和用法的介紹，希望通過本文的介紹能夠讓讀者對ESM有一定的了解，并能夠在實際開發中運用到ESM的技術。
