JavaScript의 모듈 시스템 소개

JavaScript의 모듈 시스템 소개

모듈의 개념은 모듈식 프로그래밍 패러다임에서 비롯됩니다. 이 패러다임은 소프트웨어가 개별적으로 작동하거나 응용 프로그램에서 결합될 수 있는 독립 실행형 파일로 프로그램 기능을 분해하여 '모듈'이라고 하는 별도의 상호 교환 가능한 구성 요소로 구성되어야 한다고 제안합니다.





MAKEUSEOF 오늘의 비디오

모듈은 특정 기능을 구현하고 재사용성과 구성을 촉진하기 위해 코드를 캡슐화하는 독립 실행형 파일입니다.



여기에서는 모듈 패턴, 대부분의 Node.js 애플리케이션에서 사용되는 CommonJS 모듈 시스템 및 ES6 모듈 시스템을 포함하여 JavaScript 애플리케이션에서 사용되는 모듈 시스템을 다룹니다.





윈도우 10용 윈도우 xp 테마

모듈 패턴

네이티브 자바스크립트 모듈이 도입되기 전에는 모듈 디자인 패턴을 모듈 시스템으로 사용하여 변수와 함수의 범위를 단일 파일로 지정했습니다.

이것은 일반적으로 IIFE로 알려진 즉시 호출된 함수 표현식을 사용하여 구현되었습니다. IIFE는 생성되자마자 실행되는 재사용 불가능한 함수입니다.



IIFE의 기본 구조는 다음과 같습니다.

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

위의 코드 블록은 세 가지 다른 컨텍스트에서 사용되는 IIFE를 설명합니다.



IIFE는 함수 내에서 선언된 변수의 범위가 함수로 지정되어 함수 내에서만 액세스할 수 있도록 하고 함수를 통해 데이터를 반환할 수 있기 때문에(공개적으로 액세스할 수 있음) 사용되었습니다.

예를 들어:



const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar");

위의 코드 블록은 네이티브 JavaScript 모듈이 도입되기 전에 모듈이 어떻게 생성되었는지 보여주는 예입니다.

위의 코드 블록에는 IIFE가 포함되어 있습니다. IIFE에는 반환하여 액세스할 수 있도록 하는 함수가 포함되어 있습니다. IIFE에 선언된 모든 변수는 전역 범위에서 보호됩니다. 따라서 방법( 이름 ) 공용 기능을 통해서만 액세스할 수 있습니다. callSayName .

IIFE는 변수에 저장됩니다. 푸 . 메모리에서 변수의 위치를 ​​가리키는 변수가 없으면 스크립트가 실행된 후 변수에 액세스할 수 없기 때문입니다. 이 패턴은 다음으로 인해 가능합니다. 자바스크립트 클로저 .

CommonJS 모듈 시스템

CommonJS 모듈 시스템은 해당 네임스페이스에서 각 모듈을 실행하여 JavaScript 범위 문제를 해결하기 위해 CommonJS 그룹에서 정의한 모듈 형식입니다.

CommonJS 모듈 시스템은 모듈이 다른 모듈에 노출하려는 변수를 명시적으로 내보내도록 강제함으로써 작동합니다.

이 모듈 시스템은 서버 측 JavaScript(Node.js) 따라서 브라우저에서는 기본적으로 지원되지 않습니다.

프로젝트에서 CommonJS 모듈을 구현하려면 먼저 다음을 실행하여 애플리케이션에서 NPM을 초기화해야 합니다.

npm init -y

CommonJS 모듈 시스템에 따라 내보낸 변수는 다음과 같이 가져올 수 있습니다.

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

모듈은 다음을 사용하여 CommonJS로 가져옵니다. 필요하다 JavaScript 파일을 읽고 읽은 파일을 실행하고 반환하는 문 수출 물체. 그만큼 수출 개체는 모듈에서 사용 가능한 모든 내보내기를 포함합니다.

명명된 내보내기 또는 기본 내보내기를 사용하여 CommonJS 모듈 시스템에 따라 변수를 내보낼 수 있습니다.

명명된 내보내기

명명된 내보내기는 할당된 이름으로 식별되는 내보내기입니다. 명명된 내보내기는 기본 내보내기와 달리 모듈당 여러 내보내기를 허용합니다.

예를 들어:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

위의 코드 블록에서 두 개의 명명된 함수( 내 내보내기 그리고 다른 수출 )에 첨부하여 수출 물체.

마찬가지로 다음과 같이 함수를 내보낼 수 있습니다.

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

위의 코드 블록에서 수출 명명된 함수에 대한 개체입니다. 만 할당할 수 있습니다. 수출 를 통해 새로운 객체에 대한 객체 기준 치수 물체.

다음과 같이 시도하면 코드에서 오류가 발생합니다.

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

명명된 내보내기를 가져올 수 있는 두 가지 방법이 있습니다.

1. 모든 내보내기를 단일 개체로 가져오고 다음을 사용하여 개별적으로 액세스합니다. 점 표기법 .

예를 들어:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. 수출을 구조화하지 않음 수출 물체.

예를 들어:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

한 가지는 모든 가져오기 방법에서 공통적이라는 점입니다. 내보낼 때 사용한 이름과 동일한 이름을 사용하여 가져와야 합니다.

기본 내보내기

기본 내보내기는 선택한 이름으로 식별되는 내보내기입니다. 모듈당 하나의 기본 내보내기만 가질 수 있습니다.

예를 들어:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

위의 코드 블록에서 클래스( 푸 )를 재할당하여 수출 그것에 반대합니다.

기본 내보내기 가져오기는 원하는 이름을 사용하여 가져올 수 있다는 점을 제외하고 명명된 내보내기 가져오기와 유사합니다.

예를 들어:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar();

위의 코드 블록에서 기본 내보내기의 이름은 술집 , 원하는 이름을 사용할 수 있습니다.

ES6 모듈 시스템

ES6 모듈로 널리 알려진 ECMAScript Harmony 모듈 시스템은 공식 JavaScript 모듈 시스템입니다.

ES6 모듈은 브라우저와 서버에서 지원되지만 사용하기 전에 약간의 구성이 필요합니다.

브라우저에서는 다음을 지정해야 합니다. 유형 ~처럼 기준 치수 스크립트 가져오기 태그에서

이렇게:

//index.html 
<script src="./app.js" type="module"></script>

Node.js에서는 다음을 설정해야 합니다. 유형 에게 기준 치수 당신의 패키지.json 파일.

이렇게:

//package.json 
"type":"module"

명명된 내보내기 또는 기본 내보내기를 사용하여 ES6 모듈 시스템을 사용하여 변수를 내보낼 수도 있습니다.

명명된 내보내기

CommonJS 모듈의 명명된 가져오기와 유사하게 할당된 이름으로 식별되며 모듈당 여러 내보내기를 허용합니다.

예를 들어:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

ES6 모듈 시스템에서 명명된 내보내기는 변수에 접두사를 붙여 내보냅니다. 내보내다 예어.

명명된 내보내기는 CommonJS와 같은 방식으로 ES6의 다른 모듈로 가져올 수 있습니다.

프로그램을 다른 드라이브로 이동
  • 필요한 수출을 구조화하지 않음 수출 물체.
  • 모든 내보내기를 단일 개체로 가져오고 점 표기법을 사용하여 개별적으로 액세스합니다.

다음은 구조 해제의 예입니다.

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

다음은 전체 개체를 가져오는 예입니다.

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

위의 코드 블록에서 별표( * )는 '모두'를 의미합니다. 그만큼 ~처럼 키워드는 수출 이 경우 뒤에 오는 문자열에 대한 객체 푸 .

기본 내보내기

CommonJS의 기본 내보내기와 유사하게 선택한 이름으로 식별되며 모듈당 하나의 기본 내보내기만 가질 수 있습니다.

예를 들어:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

기본 내보내기는 다음을 추가하여 생성됩니다. 기본 키워드 뒤에 내보내다 키워드 뒤에 내보내기 이름이 옵니다.

기본 내보내기 가져오기는 원하는 이름을 사용하여 가져올 수 있다는 점을 제외하고 명명된 내보내기 가져오기와 유사합니다.

예를 들어:

//otherModule.js 
import Bar from "./main.js";

혼합 수출

ES6 모듈 표준을 사용하면 CommonJS와 달리 기본 내보내기와 명명된 내보내기를 하나의 모듈에 둘 수 있습니다.

예를 들어:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

모듈의 중요성

코드를 모듈로 나누면 읽기가 더 쉬워질 뿐만 아니라 재사용과 유지 관리가 더 쉬워집니다. JavaScript의 모듈은 또한 모든 모듈이 기본적으로 엄격 모드에서 실행되기 때문에 오류가 발생하기 쉬운 코드를 만듭니다.