2017-09-25 3 views
1

일부 JavaScript 코드를 리팩토링해야하고 기본 가져 오기/내보내기 명령을 사용하여 ES6 모듈을 구현하려고합니다. 나는이 작업을하기 위해 잠시 고생했다. 그래서 나는 나중에 참조 할 때 필요한 것을 문서화 할 것이다. 테스트를 위해네이티브 ES6 모듈을 구현하는 "예기치 않은 토큰 가져 오기"

Uncaught SyntaxError: Unexpected token import 

내 기본 코드는 다음과 같습니다 :

HTML :

<!DOCTYPE html> 
<html> 
<body> 
<h1>Import test</h1> 
</body> 
<script type="application/javascript" src="./import.js"></script> 
</html> 

import.js :

증상 내가 크롬 콘솔에서 다음과 같은 메시지가 나타날 것입니다

import { apath } from './alert_path'; 

alert_path.js :

export function apath() { 
    alert('Bang!!!'); 
} 

답변

2

이 문제를 해결하려면 두 가지 조치를 취해야합니다.

먼저 Chrome은 61+ 이상이어야하며 chrome : // 플래그는 Experimental Web Platform 기능을 사용하도록 설정해야합니다.

<!DOCTYPE html> 
<html> 
<body> 
<h1>Import test</h1> 
</body> 
<script type="module" src="./import.js"></script> 
</html> 

내가 기본은 무엇에서 두 번째 대답 here을 발견

둘째, 스크립트 태그는 입력 모듈을 사용해야합니까?

모듈은 결국 인라인 또는 외부 스크립트 태그로 나타날 수있는 type = "module", 인 HTML에 포함되어야합니다. 그것은 서버를 통해 실행하지 않는 한이 해결하지만 또 다른 질문 후

OBTW는 샘플 인해 CORS에 위반되지 않습니다.

+0

예, ES6 모듈의 지원은 매우 낮습니다. system.js, -> https://github.com/systemjs/systemjs와 같은 것을 사용하여 polyfill 할 수 있습니다. – Keith