JavaScript 모듈 (ESM, CommonJS)을 사용하여 코드를 구성하려면 어떻게합니까?-JS 튜토리얼-php.cn

JavaScript 모듈 (ESM, CommonJS)을 사용하여 코드를 구성하려면 어떻게합니까?

ESM (ES Modules) 또는 CommonJS의 JavaScript 모듈을 사용하면 프로젝트를 작고 재사용 할 수 있으며 관리 가능한 작품으로 나눌 수있게하여 코드 구성을 크게 향상시킬 수 있습니다. 두 유형의 모듈을 사용하는 방법은 다음과 같습니다.

ES 모듈 (ESM) :
ESM은 JavaScript 모듈의 최신 표준입니다. ESM을 사용하려면 다음을 수행 할 수 있습니다.

파일 이름 지정 규칙 : 모듈 파일에 .js 또는 .mjs 사용하십시오. .mjs 확장은 기본적으로 ESM으로 아직 .js 지원하지 않는 환경에서 ESM을위한 것입니다.
내보내기 : 모듈에서 함수, 클래스 또는 변수를 내보내려면 export 키워드를 사용합니다. 예를 들어:

1
<code class="javascript">// math.js export function add(a, b) { return ab; } export const PI = 3.14;</code>
로그인 후 복사
가져 오기 : 다른 파일의 내보내기 품목을 사용하려면 import 명령문을 사용하십시오.

1
<code class="javascript">// main.js import { add, PI } from './math.js'; console.log(add(2, 3)); // Output: 5 console.log(PI); // Output: 3.14</code>
로그인 후 복사

commonjs :
CommonJS는 Node.js 환경에서 널리 사용됩니다. 사용 방법은 다음과 같습니다.

파일 이름 지정 규칙 : 모듈 파일에 .js 사용하십시오. commonjs는 node.js의 기본 모듈 시스템입니다.
내보내기 : 내보내기, module.exports 사용 : Exports :

1
<code class="javascript">// math.js function add(a, b) { return ab; } const PI = 3.14; module.exports = { add, PI };</code>
로그인 후 복사
가져 오기 : 가져 오기 위해 require 기능을 사용하십시오.

1
<code class="javascript">// main.js const { add, PI } = require('./math.js'); console.log(add(2, 3)); // Output: 5 console.log(PI); // Output: 3.14</code>
로그인 후 복사

이러한 모듈 시스템을 사용하면 코드를 논리적 부품으로 분할하여 유지 관리, 테스트 및 재사용을보다 쉽게 할 수 있습니다.

ESM과 CommonJS의 주요 차이점은 무엇이며 프로젝트 구조에 어떤 영향을 미칩니 까?

ESM과 CommonJ의 주요 차이점은 다음과 같습니다.

통사론:
- ESM은 import 및 export 키워드를 사용합니다.
- CommonJS는 require 및 module.exports 사용합니다.
로딩 메커니즘 :
- ESM은 비동기식이며 수입에 대한 정적 분석을 사용하여 번들러의 트리 흔들림과 최적화를 개선 할 수 있습니다.
- CommonJS는 동기식이며 동적 요구 시스템을 사용하여 원형 의존성을보다 쉽게 이끌어 낼 수 있습니다.
최상위 await :
- ESM은 최상위 await 지원하므로 비동기 기능으로 코드를 감싸지 않고 await 수 있습니다.
- CommonJS는 최상위 await 지원하지 않습니다.
모듈 해상도 :
- ESM은 다른 모듈 해상도 알고리즘을 사용하여 프로젝트 파일 시스템을 구성하는 방법에 영향을 줄 수 있습니다. 예를 들어 ESM은 디렉토리를 가져올 때 폴더에서 index.js 또는 index.mjs 찾습니다.
- CommonJS 해상도는 더 간단하며 일반적으로 node.js 경로 해상도 규칙을 따릅니다.

프로젝트 구조에 미치는 영향 :

모듈성 및 구성 : ESM은 정적 특성으로 인해보다 모듈 식 구조를 장려하여 클리너 및 유지 관리 가능한 코드베이스로 이어질 수 있습니다.
상호 운용성 : ESM을 사용하는 프로젝트는 특히 이전 라이브러리 또는 Node.js 버전과 함께 작업 할 때 CommonJS 모듈과의 상호 운용성을 처리해야 할 수도 있습니다.
번들링 및 빌드 도구 : ESM은 ESM 및 CommonJS에 대한 다양한 설정이있는 웹 팩 또는 롤업과 같은 빌드 및 번들링 도구를 구성하는 방법에 영향을 줄 수 있습니다.

프로젝트에서 JavaScript 모듈을 사용할 때 종속성을 효과적으로 관리하려면 어떻게해야합니까?

의존성을 효과적으로 관리하는 것은 건강하고 성능있는 프로젝트를 유지하는 데 중요합니다. 몇 가지 전략은 다음과 같습니다.

패키지 관리자 사용 :
- NPM 또는 원사와 같은 도구는 외부 종속성을 관리하는 데 도움이됩니다. 항상 package.json 사용중인 종속성 버전으로 최신 상태로 유지하십시오.
시맨틱 버전화 :
- SEMVER (Semantic Versionsing)를 사용하여 종속성 버전을 관리하십시오. 이 관행은 프로젝트에 대한 종속성 업데이트의 영향을 이해하는 데 도움이됩니다.
종속성 감사 :
- npm audit 또는 yarn audit 와 같은 도구를 사용하여 보안 취약점에 대한 종속성을 정기적으로 감사합니다.
피어 의존성 :
- 동료 의존성을 염두에 두십시오. 특히 동일한 라이브러리에 의존하지만 다른 버전에 의존하는 여러 패키지를 사용할 때 프로젝트 작동 방식에 영향을 줄 수 있습니다.
나무 흔들림 :
- ESM 및 최신 빌드 도구의 트리 흔들리는 기능을 활용하여 사용되지 않은 코드를 제거하여 번들 크기를 줄이고 성능을 향상시킬 수 있습니다.
종속성 시각화 :
- npm ls 또는 전용 시각화 도구와 같은 도구를 사용하여 종속성 트리를 이해하고 잠재적 인 문제 또는 불필요한 종속성을 식별하십시오.
지역 개발 :
- 가능하면 지역의 종속성 개발을 사용하여 원격 레지스트리에 게시 할 필요없이 빠르게 반복하고 변경하십시오.

JavaScript 모듈이 확장 가능하고 유지 관리 가능하도록하기 위해 어떤 모범 사례를 따라야합니까?

JavaScript 모듈이 확장 가능하고 유지 관리 가능하도록하려면 다음과 같은 모범 사례를 따르십시오.

단일 책임 원칙 :
- 각 모듈에는 단일 목적이나 책임이 있어야합니다. 이를 통해 이해, 테스트 및 유지하기가 더 쉬워집니다.
명확하고 설명적인 이름 :
- 모듈, 기능 및 변수에 대해 명확하고 설명적인 이름을 사용하십시오. 이것은 다른 개발자가 코드의 목적을 이해하는 데 도움이됩니다.
모듈화 및 재사용 :
- 응용 프로그램을 프로젝트 전체에서 재사용 할 수있는 소형 독립 모듈로 나눕니다. 이는 코드 복제를 줄이고 확장 성을 향상시킵니다.
일관된 수출 및 수입 스타일 :
- 모듈을 내보내고 가져 오기위한 일관된 스타일을 고수하십시오. 명명 또는 기본 내보내기를 선택하고 프로젝트 전체에서 균일하게 사용하십시오.
원형 의존성을 피하십시오.
- 원형 의존성을 피하기 위해 모듈을 구조화하여 코드로드 및 유지 관리에 문제가 발생할 수 있습니다.
가능한 경우 ES 모듈을 사용하십시오.
- 현대적인 기능과 향후 JavaScript 개발에 대한 더 나은 지원으로 인해 새로운 프로젝트에 대한 CommonJ보다 ES 모듈을 선호합니다.
테스트 및 라인 :
- 자동 테스트 및 라인을 구현하여 오류를 조기에 잡고 코드 품질을 보장합니다. 테스트를위한 Jest와 같은 도구와 Linting을위한 Eslint와 같은 도구를 사용하십시오.
선적 서류 비치:
- 모듈을 문서화하고 목적, 사용법 및 비각화 된 기능을 설명하십시오. 이것은 다른 팀원 (또는 미래)이 코드를보다 쉽게 이해하는 데 도움이됩니다.
버전 제어 :
- GIT와 같은 버전 제어 시스템을 사용하여 변경 사항을 추적하고 다른 사람과 협력하십시오. 이 관행은 확장 가능한 코드베이스를 유지하는 데 필수적입니다.
지속적인 통합 및 배포 (CI/CD) :
- 테스트, 빌딩 및 배포를 자동화하기 위해 CI/CD 파이프 라인을 설정하십시오. 이를 통해 일관성을 유지하고 모듈이 다른 환경에서 예상대로 작동하도록합니다.