Es6으로 작성된 파일 가져오기 솔루션(상세 해석)

이 글은 es6에서 작성한 파일을 가져오는 방법에 대한 관련 정보를 주로 소개하고 있으니 필요하신 분들은 참고하시면 됩니다

이 기간 동안 es6의 새로운 사양에 대해 조금 알게 되었는데, 우연히 ES6을 사용해 보세요. 작성한 코드가 브라우저에서 실행됩니다.

먼저 구현 단계에 대해 이야기하겠습니다

1. ES6 코드를 ES5로 번역하고,

2. html 파일을 번역된 ES5로 번역하고,

3. 그런 다음 브라우저 환경에서 실행합니다.

4. 실행 노드 환경;

아래는 내 디렉토리 구조 중 일부입니다. 대략적인 미리보기를 제공합니다.

src, es6 개발 디렉터리

dist, es5 프로덕션 디렉터리

test, 테스트 디렉터리

그런 다음 내 ES6에서 개발한 일부 js가 어떤 모습인지 살펴보세요.

file file2 app

test

그런 다음 dist에 있는 번역된 파일을 html로 도입하고(

) 브라우저에서 테스트합니다. 테스트에서는 모듈이 도입되지 않았기 때문에 app이 정상적으로 실행됩니다. 모듈이 도입되고 CommonJS 사양인데 브라우저가 이 사양을 지원하지 않아서 오류가 보고됩니다

테스트 목적으로 html에 requireJS 파일을 추가하면 브라우저에서 AMD/CMD 사양을 지원합니다. 정의를 비동기적으로 로드합니다.

그러나 하나는 AMD이고 다른 하나는 CommonJS이기 때문에 구문이 지원되지 않거나 두 가지가 충돌함을 나타내는 오류가 계속 보고되는 것을 발견했습니다.

노드를 통해 ES6를 ES5로 컴파일하기 때문에 노드 모듈은 CommonJS 사양을 기반으로 하므로 ES5의 구문도 CommonJS 사양에 속하며 현재 브라우저와 노드는 ES6 사양을 지원하지 않거나 대부분을 지원하지 않습니다. . 지원되지 않습니다.

Solution

정보를 참고한 결과 webpack 패키징 도구를 통해 종속성을 하나의 파일로 병합한 다음 HTML에 도입할 수 있음을 발견했습니다.

위 내용은 모두에게 도움이 되기를 바랍니다. 앞으로도 다들.

관련 기사:

JS해시 테이블 함수 만들기

JSURL 매개변수를 얻고 json 형식으로 보내는 단계에 대한 자세한 설명 POST

JS EventE 요약 마이터 활용 스킬

위 내용은 Es6으로 작성된 파일 가져오기 솔루션(상세 해석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!