내가 더 빨리 알았더라면 좋았을 것들… 자바스크립트 모듈

JavaScript 모듈에 대해 이해하는 데 시간이 걸렸다고 고백해야 합니다. 이것은 적어도 부분적으로는 CommonJS과 ECMAScript 2015(일반적으로 ES2015로 축약됨)의 두 가지 인기 있는 모듈 시스템이 있기 때문입니다.

ECMAScript 2015 표준은 CommonJS보다 최신 버전입니다. 개인적으로 나는 그것이 더 간단하다고 생각하고 가능한 한 선호하는 방식으로 사용합니다. 그러나 NPM의 많은 모듈은 여전히 ​​이전 스타일을 사용합니다.

한 가지 중요한 참고 사항 - 브라우저는 CommonJS가 아닌 ES2015만 지원합니다.

CommonJS

CommonJS는 2009년에 Mozilla 팀원이 JavaScript 기능을 통합하려는 시도로 시작했습니다. CommonJS은 단순한 모듈 이상을 다룹니다. 웹사이트를 확인하십시오.

수출

CommonJS 모듈에서 기호는 객체(이해하기 쉬운 이름exports )로 내보내집니다. 개체의 각 속성은 내보낸 기호입니다.

일반적인 개체 할당 규칙이 적용됩니다. 즉, 파일 내부에 있는 이름과 다른 이름으로 기호를 쉽게 내보낼 수 있습니다.

function sayHello(name) {
  console.log("Hello", name);
}

module.exports = {
  sayHello,
  anotherSayHello: sayHello
};

필요하다

그런 다음 전체 모듈 또는 해당 모듈의 일부 기호를 사용할 수 있습니다require.

const testModule = require("./module_name");
const { sayHello } = require("./module_name");

testModule.sayHello("world");
sayHello("second world");

NB: CJS 스타일 모듈에서 명명된 기호 가져오기는 Node 14에서만 도입되었으며 완벽하게 작동하지 않습니다. Node.js 내의 일부 휴리스틱에 의존합니다.

ES2015

내보내다

ES2015에서는 내보내기가 더 쉽습니다. export 키워드를 추가하기만 하면 항목(함수, 상수, 변수 등)을 내보낼 수 있습니다.

export function sayHello(name) {
  console.log("Hello", name);
}

export const myName = "Rumpelstiltskin";

또는 파일 끝에서 항목을 한꺼번에 내보낼 수 있습니다.

export { sayHello, myName };

수입

다른 많은 언어(Java, Python)와 마찬가지로 사용하려는 모듈 부분을 가져옵니다.

import { sayHello } from "./moduleName";

sayHello("world");

또는 네임스페이스를 유지하려는 경우:

import * as moduleStuff from "./moduleName";

moduleStuff.sayHello(moduleStuff.myName);

기본 내보내기

위의 대부분의 예에서는 모듈에서 특정 명명된 기호를 가져왔습니다.

import { sayHello } from "./module_name";

모듈에는 기본 내보내기가 있을 수 있으며, 이는 모듈에서 가져올 항목을 지정하지 않은 경우 가져오는 것입니다.

CommonJS

CJS 모듈은 실제로 하나의 단일 항목만 내보냅니다. 그런 의미에서 기본 내보내기만 있습니다. 내보내려는 항목이 개체의 속성이어야 하는 이유입니다.

ES2015

이 시스템을 사용하면 더 많은 유연성을 얻을 수 있습니다. 둘 이상의 항목을 내보낼 수 있으며 기본 항목으로 지정할 항목을 표시할 수 있습니다.

export default const theAnswer = 42;

사용자 주의

이것이 항상 좋은 것은 아닙니다. 무엇을 가져오고 있는지 완전히 확신할 수 없으며 원본과 완전히 다른(그리고 오해의 소지가 있는) 이름으로 가져올 수 있습니다.

예를 들어 사소한 모듈basicMaths을 사용하십시오.

export default sum(x, y) { return x + y; }

기본 내보내기는 무엇이든 가져올 수 있습니다.

import divide from "./basicMaths";

// This will not do what you expect.
divide(2, 4);

명명된 내보내기의 장점은 원하는 것을 정확하게 가져올 수 있다는 것입니다.

import { divide } from "./basicMaths";

// divide is empty, so this crashes (or doesn't build, depending on how
// good your tools are). Either way it's better than using the wrong 
// function.
divide(2, 4);

기타 읽기

Mozilla 개발자 네트워크page covering "native JavaScript modules"에는 자습서가 포함된 더 자세한 정보가 있습니다.

CommonJS 스타일 모듈에 대한 Node의 지원에서 Simon Plenderleithhas a good in-depth look.

학점

이미지: Laura C-F

https://www.deviantart.com/laura-c-f/art/Confused-Dog-286725830