Firefox에서 ES2015 가져 오기가 작동하지 않음 (최상위 수준에서도)

Question 1

다음은 내 샘플 파일입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js :

import Test from 't2.js';

t2.js :

export const Test = console.log("Hello world");

Firefox 46에서 페이지를로드 할 때 "SyntaxError : import 선언은 모듈의 최상위 수준에서만 나타날 수 있습니다."를 반환하지만 import 문이 여기에 얼마나 더 많은 최상위 수준을 가져올 수 있는지 잘 모르겠습니다. 이 오류는 붉은 청어이며 아직 가져 오기 / 내보내기가 지원되지 않습니까?

Question 2

실제로 발생한 오류는 모듈을로드하고 있음을 명시 적으로 명시해야하기 때문입니다. 그런 다음에 만 모듈 사용이 허용됩니다.

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

이 문서에서 브라우저에서 ES6 가져 오기를 사용 하는 방법을 찾았습니다 . 추천 도서.

해당 브라우저 버전에서 완전히 지원됨 (및 이후 버전, caniuse.com의 전체 목록 ) :

Firefox 60
Chrome (데스크톱) 65
크롬 (안드로이드) 66
Safari 1.1

이전 브라우저에서는 브라우저에서 일부 플래그를 활성화해야 할 수 있습니다.

Chrome Canary 60 – chrome:flags.
파이어 폭스 54 - dom.moduleScripts.enabled에 설정 about:config.
Edge 15 – about:flags.

Question 3

이것은 더 이상 정확하지 않습니다. 현재 모든 브라우저는 이제 ES6 모듈을 지원합니다.

아래의 원래 답변

에서 importMDN에 :

이 기능은 현재 기본적으로 어떤 브라우저에서도 구현되지 않습니다. Traceur Compiler, Babel 또는 Rollup과 같은 많은 트랜스 파일러에서 구현됩니다.

브라우저는 import.

다음은 브라우저 지원 테이블입니다.

ES6 모듈을 가져 오려면 트랜스 파일러 (예 : babel ) 를 사용하는 것이 좋습니다 .

Question 4

파일을 가져 오는 동안 .js 파일 확장자를 사용하는 것만으로도 동일한 문제가 해결 type="module되었습니다 (스크립트 태그 에 설정하는 것을 잊지 마십시오 ).

간단히 작성하십시오.

import foo from 'foo.js';

대신에

import foo from 'foo';

Question 5

type=module모듈을 가져오고 내보내는 스크립트를 추가 하면이 문제를 해결할 수 있습니다.

Question 6

스크립트에 유형을 지정해야하고 내보내기는 기본 ..이어야합니다. 예를 들어 귀하의 경우에는

<script src='t1.js' type='module'>

t2.js의 경우 이와 같이 내보내기 후 기본값을 사용하고 기본값을 'here your expression goes'(여기서는 변수를 사용할 수 없습니다) . 다음과 같은 기능을 사용할 수 있습니다.

export default function print(){ return console.log('hello world');}

가져 오기의 경우 가져 오기 구문은 다음과 같아야합니다. './t2.js'에서 인쇄를 가져옵니다 (동일한 디렉토리에 대해 파일 확장자 및 ./ 사용) ..이 정보가 유용하기를 바랍니다!

Question 7

논쟁을 위해 ...

전역 창 개체에 사용자 지정 모듈 인터페이스를 추가 할 수 있습니다. 그러나 권장하지 않습니다. 반면에 DOM은 이미 손상되었으며 아무것도 지속되지 않습니다. 나는 항상 이것을 사용하여 동적 모듈을 교차로드하고 사용자 지정 리스너를 구독합니다. 이것은 아마도 대답은 아니지만 작동합니다. 스택 오버플로에는 이제 'Spork'라는 이벤트를 호출하는 module.export가 있습니다.

//  spam the global window with a custom method with a private get/set-interface and     error handler... 

window.modules = function(){
  window.exports = {
    get(modName) {
      return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
    },
    set(type, modDeclaration){
      window.exports[type] = window.exports[type] || []
      window.exports[type].push(modDeclaration)

    }
  }

}

//  Call the method
window.modules()

//  assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))


// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')

// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))

//  Show and tell...
window