ES6 모듈 이해

ES6 모듈 : 최신 JavaScript 용 모듈 식 솔루션

이 기사는 ES6 모듈을 탐구하고 번역기의 도움으로 사용하는 방법을 보여줍니다. 거의 모든 언어에는 모듈 개념이 있습니다. 다른 파일에 선언 된 기능을 포함시키는 방법입니다. 일반적으로 개발자는 관련 작업을 처리하는 패키지 코드베이스를 만듭니다. 라이브러리는 응용 프로그램 또는 기타 모듈에서 참조 할 수 있습니다. 장점은 다음과 같습니다.

코드는 더 작고 자 급식 파일로 나눌 수 있습니다. 동일한 모듈을 여러 응용 프로그램간에 공유 할 수 있습니다.

이상적으로, 모듈은 효과적인 것으로 입증 된 다른 개발자가 모듈을 점검 할 필요가 없습니다.

모듈을 참조하는 코드는 종속성임을 알고 있습니다. 모듈 파일이 변경되거나 이동하면 문제가 즉시 나타납니다.

모듈 코드 (보통)는 이름 지정 충돌을 제거하는 데 도움이됩니다. 모듈 1의 함수 x ()는 모듈 2의 함수 x ()와 충돌하지 않습니다. 네임 스페이스와 같은 옵션을 사용하여 모듈 1.x () 및 module2.x ()로 호출을 변경할 수 있습니다.

1. JavaScript의 모듈은 어디에 있습니까?
몇 년 전에 웹 개발을 시작한 사람은 자바 스크립트에 모듈 개념이 없다는 것을 알게되어 놀랄 것입니다. JavaScript 파일을 다른 파일에 직접 참조하거나 포함시키는 것은 불가능합니다. 따라서 개발자는 다른 방법으로 전환합니다.
다양한 html
3. 그러나 이것은 이상적인 계획이 아닙니다 :
각 스크립트는 페이지 성능에 영향을 미치는 새로운 HTTP 요청을 시작합니다. HTTP/2는이 문제를 어느 정도 완화하지만 CDN과 같은 다른 도메인에서 스크립트를 참조하는 데 도움이되지 않습니다.
4. 각 스크립트는 실행 중에 추가 처리를 일시 중지합니다.
종속성 관리는 수동 프로세스입니다. 위 코드에서 lib1.js가 lib2.js의 코드를 참조하면 코드가 아직로드되지 않았기 때문에 코드가 실패합니다. 이것은 추가 JavaScript 처리를 훼손 할 수 있습니다.
5. 적절한 모듈 모드가 사용되지 않는 한 함수는 다른 기능을 무시할 수 있습니다. 초기 JavaScript 라이브러리는 글로벌 기능 이름을 사용하거나 기본 방법을 덮어 쓰는 것으로 유명했습니다.

스크립트 병합

다중 를 해결하십시오 <:> 또는 인라인 : 모듈은 페이지 나 다른 모듈에서 몇 번 참조하더라도 한 번만 구문 분석됩니다.

서비스주의

모듈은 Mime Type Application/JavaScript를 사용하여 제공되어야합니다. 대부분의 서버는이를 자동으로 수행하지만 동적으로 생성 된 스크립트 또는 .mjs 파일에주의하십시오 (아래 Node.js 섹션 참조). 일반 모듈 롤백

모듈을 지원하지 않는 브라우저는 type = "module"스크립트를 실행하지 않습니다. 지명 속성을 사용하여 모듈 호환 브라우저에서 무시하는 폴백 스크립트를 제공 할 수 있습니다. 예를 들면 :

<🎜>

<<> 브라우저에서 모듈을 사용해야합니까? <<> 브라우저 지원이 커지고 있지만 ES6 모듈로 전환하기에는 너무 이르다. 현재 모듈 패커를 사용하여 어디서나 작동하는 스크립트를 만드는 것이 가장 좋습니다. node.js에서 es6 모듈을 사용하는 <🎜 🎜> <<>> 이 모듈을 다른 스크립트 또는 모듈로 가져 오려면 요구 사항 (가져 오지 않고)을 사용하십시오.

요구 사항은 모든 프로젝트를 가져올 수 있습니다

<'s> 그래서 Node.js에서 ES6 모듈을 쉽게 구현할 수 있습니까?

옳지 않아 <🎜 🎜>. ES6 모듈은 Node.js 9.8.0의 플래그 다음에 위치하며 버전 10 이상까지 완전히 구현되지 않습니다. CommonJS 및 ES6 모듈은 비슷한 구문을 가지고 있지만 근본적으로 다른 방식으로 작동합니다.

ES6 모듈은 추가 가져 오기를 구문 분석하기 위해 코드를 실행하기 전에 미리 정렬됩니다. CommonJS 모듈은 코드를 실행할 때 수요에 따라 종속성을로드합니다.

위의 예에서는 차이가 없지만 다음 ES2015 모듈 코드를 고려하십시오.

ES2015의 출력 : <🎜 🎜>

<🎜>
<🎜>

CommonJS를 사용하여 작성된 유사한 코드 : <🎜 🎜>

commonjs의 출력 : <🎜 🎜>

일부 응용 프로그램에서 실행 순서가 중요 할 수 있습니다. 동일한 파일의 ES2015와 CommonJS 모듈을 혼합하면 어떻게됩니까? 이 문제를 해결하기 위해 Node.js는 Extension .mjs가있는 파일에서 ES6 모듈 만 사용할 수 있습니다. 확장자 .js가있는 파일은 commonjs에 기본값을받습니다. 이것은 대부분의 복잡성을 제거하고 코드 편집기 및 코드 검사관에 도움이되는 간단한 옵션입니다.

// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}

// 私有函数
function log(...msg) {
  console.log(...msg);
}

module.exports = { PI, sum, mult };

<<> node.js에서 es6 모듈을 사용해야합니까?

<<> es6 모듈은 Node.js v10 이상에서만 유용합니다 (2018 년 4 월에 출시). 기존 프로젝트를 변환하는 것은 어떤 혜택을 가져올 가능성이 없으며, 응용 프로그램이 이전 버전의 node.js와 호환되지 않도록합니다. 새로운 프로젝트의 경우 ES6 모듈은 CommonJS에 대한 대안을 제공합니다. 구문은 클라이언트 인코딩과 동일하며 브라우저 나 서버에서 실행될 수있는 동형 자바 스크립트에 더 쉬운 방법을 제공 할 수 있습니다.

const { sum, mult } = require('./lib.js');

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24

모듈 Melee

표준화 된 JavaScript 모듈 시스템은 등장하는 데 몇 년이 걸리고 구현하는 데 시간이 오래 걸렸지 만 문제는 수정되었습니다. 2018 년 중반부터 모든 주류 브라우저 및 Node.js는 ES6 모듈을 지원하지만 모든 사람이 업그레이드 할 때 스위칭 지연이 예상되어야합니다. 내일 JavaScript 개발의 혜택을 얻기 위해 오늘 ES6 모듈을 배우십시오. ES6 모듈에 대한 FAQS (FAQ)

(전체 텍스트가 완전히 의사 조직화되었으므로 원본 문서의 FAQ 부분이 여기에서 생략됩니다)

위 내용은 ES6 모듈 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!