변수를 기반으로 ES6에서 모듈을 동적으로 가져오려면 어떻게 해야 합니까?

변수 인식 ES6 가져오기

ES6에서 import 문은 모듈을 코드로 가져오는 편리한 방법을 제공합니다. 그런데 런타임에 변수 이름을 기반으로 모듈을 가져와야 한다면 어떻게 될까요? 이는 구성 설정에 따라 모듈을 동적으로 로드하는 시나리오에서 발생할 수 있습니다.

정적 가져오기

안타깝게도 ES6의 import 문은 정적으로 분석됩니다. 이는 가져오는 모듈이 컴파일 타임에 알려져야 함을 의미합니다. 따라서 변수 이름을 사용하여 가져올 모듈을 지정할 수 없습니다.

Loader API

모듈을 동적으로 로드하려면 Loader API를 사용해야 합니다. 이 API는 로드할 모듈을 지정하는 문자열을 받아들이는 System.import()라는 함수를 제공합니다. 다음 예에서는 이를 사용하여 변수 이름을 기반으로 모듈을 로드하는 방법을 보여줍니다.

<code class="javascript">System.import('./utils/' + variableName).then(function(module) {
  console.log(module);
});</code>

System.import() 함수는 로드된 모듈을 확인하는 프라미스를 반환합니다. 그런 다음 모듈 객체를 사용하여 모듈에서 내보낸 멤버에 액세스할 수 있습니다.

호환성 고려 사항

Loader API는 최신 브라우저와 Node.js에서 지원됩니다. 그러나 이전 브라우저와의 호환성을 위해서는 폴리필을 사용해야 할 수도 있습니다.

위 내용은 변수를 기반으로 ES6에서 모듈을 동적으로 가져오려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!