프런트엔드 모듈형 ESM이란 무엇입니까?

프런트엔드 ESM이란 무엇인가요? 구체적인 코드 예제가 필요합니다

프런트엔드 개발에서 ESM은 ECMAScript 사양을 기반으로 한 모듈식 개발 방법인 ECMAScript 모듈을 말합니다. ESM은 더 나은 코드 구성, 모듈 간 격리, 재사용성과 같은 많은 이점을 제공합니다. 이 기사에서는 ESM의 기본 개념과 사용법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.

1. ESM의 기본 개념
   ESM에서는 코드를 여러 모듈로 나눌 수 있으며 각 모듈은 다른 모듈에서 사용할 수 있는 일부 인터페이스를 노출합니다. 각 모듈은 전역 변수 충돌에 대한 걱정 없이 import 문을 통해 필요한 종속성을 도입할 수 있습니다. 동시에 모듈은 내보내기 문을 통해 인터페이스를 다른 모듈에 노출할 수도 있습니다.
2. ESM 사용법
   2.1 기본 구문
   ESM을 사용하려면 HTML 파일의 script 태그를 사용하여 모듈을 로드하고 유형을 "module"로 지정해야 합니다. 예:

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

모듈 파일에서 import 문을 사용하여 다른 모듈의 인터페이스를 소개하고, 내보내기 문을 사용하여 자체 인터페이스를 다른 모듈에 노출할 수 있습니다. 예를 들어, 두 개의 모듈 파일이 있습니다.

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

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

sayHello();

2.2 내보내기 및 가져오기 인터페이스
ESM에서는 내보내기 문을 사용하여 모듈의 변수, 함수 또는 클래스를 다른 모듈로 내보낼 수 있습니다. 예:

// 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!

3. 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 기술을 실제 개발에 적용할 수 있기를 바랍니다.

위 내용은 프런트엔드 모듈형 ESM이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!