ES6 모듈 이해

Question

누군가 ES 모듈에 대한 이해를 확인할 수 있습니까? javascripts/bar.js에서

:

var foo = 2; 

export function Bar() {} 

는 HTTP를 통해 해당 모듈의 반환에 import { Bar } from 'javascripts/bar';, 블록을 평가 할 때 ES6 엔진이 bar.js를로드 후드에서

<script> 
    import { Bar } from 'javascripts/bar'; 
    var b = new Bar(); // Instantiates an instance of Bar. 
</script> 

index.html에서? 아니면 에있는 스크립트를 평가하기 전에 bar.js을 다운로드 했습니까?

import 키워드를 사용하여 bar.js을로드 했으므로 bar.js에있는 전역은 해당 모듈로 범위가 지정되며 전역으로 볼 수 없습니까?

이제 모듈을 연결하려면 IIFE에서 모듈을 래핑해야합니다. 그래야 해당 범위가 별개입니다 (또는 최소한 후드에서이 작업을 수행하는 빌드 단계를 사용하십시오).

Answer 1

ES6 엔진은 'javascripts/bar'에서 {Bar} 가져 오기를 평가할 때 bar.js를로드하고 HTTP를 통해 해당 모듈을 반환하면 차단하겠습니까? 또는 bar.h가 index.html에있는 스크립트를 평가하기 전에 다운로드 되었습니까?

모듈로드 방법에 대한 지정이 없기 때문에 이에 대한 정답은 아직 없습니다. ES2015는 모듈 구문만을 지정하지만, 아직 표준화되지 않은 런타임 해석 방법을 지정합니다. 예를 들어, 결국 구현되는 로더 사양은 사용자가 수행하는대로 .js을 생략 할 가능성이 거의 없습니다. 또한 <script> 태그가 import을 사용할 수있는 가능성은 거의 없습니다.

그러나 구문상의 실수를 제외하면 브라우저 로더에 대해 이 표준화 될 가능성이 높습니다. 스크립트가 실행되기 전에 가져 오기가 미리 결정되고 다운로드됩니다. 그러나 Node.js 로더의 경우 차단 될 수 있습니다.

bar.js가 import 키워드를 사용하여로드되었으므로 bar.js의 전역은 해당 모듈의 범위로 표시되고 표시되지 않습니다 전 세계적으로?

이는 전역에서 무엇을 의미하는지에 따라 다릅니다. 예를 들어 글로벌을 선언하면 window.x = 5, 여전히 전역 개체를 변경합니다. 모듈은 엉망이되는 분리 된 전역 객체를 얻지 못합니다. 당신은 최고 수준의 var 또는 function 선언으로 선언 된 것과 같은 "사고"전역을 의미하는 경우

그러나, 대답은 모듈의 최상위 var 및 function 선언은 전역 속성이 정의되는 원인이 없다는 것입니다.

(모듈과 스크립트 모두에서 최상위 수준 let 및 const 선언은 전역 개체에 대한 속성을 만들지 않습니다.내가 모듈을 연결하려는 경우)

지금, 나는 그들의 범위는 별개의 (또는 적어도 후드 아래에이 작업을 수행 빌드 단계)를 사용하여 남아 있도록, IIFEs 내 모듈을 포장 할 필요가 계속?

모듈을 연결하려는 경우 설명하는 것보다 훨씬 큰 문제가 발생할 것입니다. 예를 들어 import 및 export은 최상위 수준에서만 사용할 수 있으며 IIFE에서는 사용할 수 없습니다. 모듈은 현대적인 브라우저와 서버가 제공되는 actively harmful to performance이므로 연결될 수 없습니다.