노드의 CommonJS 및 ES 모듈js

작성자Kingsley Ubah✏️
현대 소프트웨어 개발에서 모듈은 소프트웨어 코드를 자체적으로 포함하는 블록으로 구성하는데 이런 블록은 공동으로 더욱 크고 복잡한 응용 프로그램을 구성한다.
브라우저 자바스크립트 생태계에서 자바스크립트 모듈의 사용은 import와 export 문장에 달려 있다.이러한 문은 각각 EMCAScript 모듈(또는 ES 모듈)을 로드하고 내보냅니다.
ES 모듈 포맷은 재사용을 위한 공식 표준 포맷으로 자바스크립트 코드를 포장한 것으로, 대부분의 현대 웹 브라우저는 이 모듈을 지원한다.
노드그러나 js는 기본적으로 CommonJS 모듈 형식을 지원합니다.CommonJS 모듈 사용require() 로드, 변수 및 함수 사용module.exports CommonJS 모듈에서 내보내기.
JavaScript 모듈 시스템이 표준화됨에 따라 ES 모듈 형식은 Node.js v8.5.0에 도입되었다.실험 모듈로서 노드에서 ES 모듈을 성공적으로 실행하려면 --experimental-modules 플래그가 필요합니다.js 환경.
하지만 버전 13.2.0부터 노드.js는 ES 모듈을 안정적으로 지원합니다.
본고는 이 두 모듈 형식의 사용법을 상세하게 소개하지 않고CommonJS와 ES모듈의 비교, 그리고 왜 그 중 하나를 사용하고자 하는지를 소개할 것이다.

CommonJS 모듈 및 ES 모듈 구문 비교

기본값은 Node입니다.js는 JavaScript 코드를 공통 js 모듈로 취급합니다.따라서 CommonJS 모듈은 모듈이 가져온 require() 문구와 모듈이 내보낸 module.exports 문구가 특징이다.
예를 들어, 이 모듈은 두 가지 함수를 내보내는 CommonJS 모듈입니다.

module.exports.add = function(a, b) {
        return a + b;
} 

module.exports.subtract = function(a, b) {
        return a - b;
} 

우리는 또한 공공 함수를 다른 노드로 가져올 수 있다.js 스크립트 사용require():

const {add, subtract} = require('./util')

console.log(add(5, 5)) // 10
console.log(subtract(10, 5)) // 5

더 깊은 것을 찾고 있다면tutorial on CommonJS modules, check this out.
한편, 라이브러리 작성자는 노드에서 ES 모듈을 간단하게 활성화할 수도 있습니다.파일 확장자를 .js에서 .mjs.로 변경한 js 패키지
예를 들어 다음과 같은 간단한 ES 모듈.mjs 확장자가 있는 모듈은 일반 사용자가 사용할 수 있는 두 가지 함수를 내보냅니다.

// util.mjs

export function add(a, b) {
        return a + b;
}

export function subtract(a, b) {
        return a - b;
}

그런 다음 import 문을 사용하여 두 함수를 가져올 수 있습니다.

// app.mjs

import {add, subtract} from './util.js'

console.log(add(5, 5)) // 10
console.log(subtract(10, 5)) // 5

프로젝트에서 ES 모듈을 활성화하는 또 다른 방법은 최근 파일"type: module"에 있는 필드package.json를 추가하는 것입니다.

{
  "name": "my-library",
  "version": "1.0.0",
  "type": "module",
  // ...
}

이 노드를 포함한다.js는 이 패키지의 모든 파일을 ES 모듈로 간주합니다. 파일 확장자를 .mjs 로 변경할 필요가 없습니다.할 수 있다learn more about ES modules here.
또는 를 설치하고 설정할 수 있습니다.React와 Vue 같은 프로젝트는 ES 모듈을 지원합니다Babel under the hood to compile the code.

ES 모듈 및 CommonJS 모듈을 사용하는 Node의 장점과 단점js

ES 모듈은 JavaScript의 표준이며 CommonJS는 노드의 기본 모듈입니다.js

ES 모듈 형식을 만드는 것은 JavaScript 모듈 시스템을 표준화하기 위한 것입니다.재사용을 위해 JavaScript 코드를 패키지화한 표준 형식이 되었습니다.
한편, CommonJS 모듈 시스템은 Node에 내장되어 있습니다.js.노드에 ES 모듈을 도입하기 전에js, CommonJS는 Node의 표준입니다.js 모듈.그래서 대량의 노드가 존재한다.CommonJS로 작성된 js 라이브러리 및 모듈입니다.
브라우저 지원에 있어서 모든 주요 브라우저는 ES 모듈 문법을 지원합니다. React와 Vue 등 프레임워크에서 import/export 를 사용할 수 있습니다.js.이 프레임워크들은 Babel과 같은transpiler를 사용하여 import/export 문법을 require()로 컴파일하는데 이것은 비교적 오래된 노드이다.js 버전 본체 지원.
ES 모듈 구문은 JavaScript 모듈의 표준 이외에도 require()에 비해 읽을 수 있습니다.클라이언트에서 주로 JavaScript를 작성하는 웹 개발자는 Node를 사용할 때 문제가 발생하지 않습니다.같은 문법 때문에 js 모듈입니다.

노드ES 모듈에 대한 js 지원

이전 노드.ES 모듈은 js 버전에서 지원되지 않습니다.

ES 모듈은 이미 자바스크립트의 표준 모듈 형식이 되었지만 개발자는 비교적 오래된 버전의 노드를 사용하는 것을 고려해야 한다.js는 지원이 부족합니다(특히 Node.js v9 및 이하 버전).
즉, ES 모듈을 사용하면 이전 버전의 Node와 애플리케이션이 호환되지 않습니다.CommonJS 모듈 (즉 require() 문법) 의 js만 지원합니다.
그러나 새로운 조건이 도출되면 우리는 이중 모드 라이브러리를 구축할 수 있다.이 라이브러리는 비교적 새로운 ES 모듈로 구성되어 있지만, 이전 노드가 지원하는 CommonJS 모듈 형식도 뒤로 호환됩니다.js 버전.
다시 말하면 우리는 동시 지원import과 require()의 라이브러리를 구축하여 호환되지 않는 문제를 해결할 수 있다.
다음 노드를 고려하십시오.js 항목:

my-node-library
├── lib/
│   ├── browser-lib.js (iife format)
│   ├── module-a.js  (commonjs format)
│   ├── module-a.mjs  (es6 module format)
│   └── private/
│       ├── module-b.js
│       └── module-b.mjs
├── package.json
└── …

package.json 내부에서 exports 필드를 사용하여 두 가지 다른 모듈 형식으로 공공 모듈(module-a을 내보낼 수 있으며 개인 모듈(module-b에 대한 접근을 제한할 수 있습니다.

// package.json
{
  "name": "my-library",         
  "exports": {
    ".": {
        "browser": {
          "default": "./lib/browser-module.js"
        }
    },
    "module-a": {
        "import": "./lib/module-a.mjs" 
        "require": "./lib/module-a.js"
    }
  }
}

my-library 패키지에 대한 다음 정보를 제공하여 지원되는 모든 곳에서 사용할 수 있습니다.

// For CommonJS 
const moduleA = require('my-library/module-a')

// For ES6 Module
import moduleA from 'my-library/module-a'

// This will not work
const moduleA = require('my-library/lib/module-a')
import moduleA from 'my-awesome-lib/lib/public-module-a'
const moduleB = require('my-library/private/module-b')
import moduleB from 'my-library/private/module-b'

exports의 경로 때문에 절대 경로를 지정하지 않고 공공 모듈을 가져올 수 있습니다require()..js와 .mjs를 포함하는 경로를 통해 우리는 호환되지 않는 문제를 해결할 수 있다.브라우저와 노드 등 서로 다른 환경을 위한 패키지 모듈을 만들 수 있습니다.개인 모듈에 대한 접근을 제한합니다.

업데이트된 노드입니다.ES 모듈은 js 버전에서 완벽하게 지원됩니다.

맨 밑에 있는 노드.ES 모듈은 js 버전에서 실험적으로 표시됩니다.이것은 이 모듈에 일부 기능이 부족하고 --experimental-modules 표지 뒤에 있다는 것을 의미한다.Node의 업데이트 버전입니다.js는 확실히 ES 모듈을 안정적으로 지원합니다.
그러나 Node에 대해서는 이 점을 기억하는 것이 중요하다.js는 모듈을 ES 모듈로 간주하려면 다음과 같은 작업 중 하나를 실행해야 한다. 모듈의 파일 확장자는 .js(CommonJS에서.mjs(ES 모듈에) 변환되거나 최근{"type": 파일에서 "module"}package.json 필드를 설정해야 한다.
이 경우 이 패키지의 모든 코드는 ES 모듈로 간주되며 import/export 문구가 아니라 require()를 사용해야 한다.

CommonJS는 모듈 가져오기의 유연성을 제공합니다.

ES 모듈에서는 파일 시작 부분에서만 import 문을 호출할 수 있습니다.다른 곳에서 호출하면 자동으로 표현식을 파일의 시작으로 옮기고 오류를 일으킬 수도 있습니다.
한편, require()를 함수로 운행할 때 해석한다.따라서 require()는 코드의 어느 곳에서든 호출할 수 있다.조건부 또는 동적으로 if 문장, 조건 순환, 함수 불러오는 모듈을 사용할 수 있습니다.
예를 들어, 다음과 같이 조건문에서 require()를 호출할 수 있습니다.

if(user.length > 0){
   const userDetails = require(‘./userDetails.js’);
  // Do something ..
}

여기에는 사용자가 있는 곳에서만 userDetails라는 모듈을 불러옵니다.

CommonJS 동기식 로드 모듈, ES 모듈 비동기식 로드

사용require()의 제한 중 하나는 모듈을 동기화하는 것이다.이것은 모듈이 하나씩 불러오고 처리된다는 것을 의미한다.
예상한 바와 같이, 이것은 수백 개의 모듈을 포함하는 대형 응용 프로그램에 성능 문제를 가져올 수 있습니다.이런 상황에서 비동기적인 행위를 바탕으로 import는 require()보다 우수할 수 있다.
그러나 몇 개의 모듈을 사용하는 소규모 응용 프로그램에 있어 require()의 동기화 특성은 큰 문제가 되지 않을 수 있다.

결론: CommonJS 또는 ES 모듈입니까?

이전 버전의 Node를 사용하는 개발자에게 적용됩니다.js, 새로운 ES 모듈을 사용하는 것은 실제와 부합되지 않습니다.
대략적인 지원으로 기존 프로젝트를 ES 모듈로 변환하면 응용 프로그램이 이전 버전의 Node와 호환되지 않습니다.CommonJS 모듈 (즉 require() 문법) 의 js만 지원합니다.
따라서 ES 모듈로 프로젝트를 마이그레이션하는 것은 별로 도움이 되지 않을 수 있습니다.
초보자들에게 ES모듈을 배우는 것은 유익하고 편리하다. 왜냐하면 자바스크립트로 클라이언트 (브라우저) 와 서버 쪽 (Node.js) 의 모듈을 정의하는 표준 형식이 되고 있기 때문이다.
새 노드에 사용됩니다.js 프로젝트, ES 모듈은 CommonJS의 대안을 제공합니다.ES 모듈 형식은 브라우저나 서버에서 실행할 수 있는 더 간단한 방법을 제공하기 위해 같은 구성의 자바스크립트를 작성하는 데 사용됩니다.
한마디로 EMCAScript 모듈은 JavaScript의 미래입니다.

200달러밖에 없어요.✔️ 생산 중의 실패와 느린 네트워크 요청을 감시하다

노드 기반 웹 응용 프로그램이나 사이트를 배치하는 것은 매우 쉽다.노드의 실례가 응용 프로그램에 계속 자원을 제공하도록 확보하는 것은 더 어려운 일이다.백엔드 또는 타사 서비스에 대한 요청이 성공했는지 확인하는 데 관심이 있으시다면try LogRocket

LogRocket 인터넷 응용 프로그램의 DVR처럼 당신의 사이트에서 발생한 모든 것을 기록합니다.문제가 발생한 네트워크 요청을 수집하고 보고하여 근본적인 원인을 추측하는 것이 아니라 신속하게 파악할 수 있습니다.
LogRocket은 웹 페이지의 불러오는 시간, 첫 번째 바이트의 시간, 느린 네트워크 요청, Redux, NgRx, Vuex 작업/상태를 기록하는 기기를 제공합니다.Start monitoring for free .