comonjs 와 es6 의 모듈 화 메커니즘 은 어떤 차이 가 있 습 니까?

글 목록

명사 해석

cjs 와 es6 module 의 차이

CommonJs 는 변수의 복사 본 을 내 보 냅 니 다. ES6 Module 은 변수의 바 인 딩 (export default 은 특수 합 니 다)

을 내 보 냅 니 다.

CommonJs 는 단일 값 내 보 내기, ES6 Module 은 여러 개 내 보 내기

CommonJs 는 동적 문법 으로 판단 에 쓸 수 있 고 ES6 Module 정적 문법 은 맨 위 에 만 쓸 수 있다

CommonJs 의 this 와 ES6 Module 의 this

umd 통용

해석

cjs (comonjs) seaJs 와 node 환경 에서 사용 하 는 모듈 화 메커니즘.모듈 은 module. exports 를 통 해 대외 변수 나 인 터 페 이 스 를 내 보 내 고 require () 를 통 해 다른 모듈 의 출력 을 현재 모듈 역할 영역 에 가 져 와 야 합 니 다.모듈 로드 는 동기 화 됩 니 다.

amd 는 requireJs 가 제시 한 비동기 로드 모듈 규범 에 수반 된다.브 라 우 저 환경 에서 동기 화 로드 문 제 를 해결 하기 위해 적 용 됩 니 다.

es6 module es6 가 제시 한 모듈 로드 메커니즘.

cjs 와 es6 module 의 차이
CommonJs 는 변수의 복사 본 을 내 보 냅 니 다. ES6 Module 은 변수의 바 인 딩 을 내 보 냅 니 다. (export default 는 특수 합 니 다)
cjs 에서 대상 의 전달 은 a = b 와 같이 기본 유형 값 전달 이 고 대상 은 인용 전달 이다.한편, es6 module 에 서 는 export default 로 인용 하지 않 으 면 기본 유형 도 참조 하여 전달 합 니 다.export default 의 할당 값 은 a = b 와 같 습 니 다.
CommonJs 는 단일 값 내 보 내기 이 며, ES6 Module 은 여러 개 내 보 낼 수 있 습 니 다.
일반적으로 export default 을 사용 하고 export {a, b, c} 를 사용 하 는 것 을 권장 하지 않 습 니 다.
CommonJs 는 동적 문법 으로 판단 에 쓸 수 있 고 ES6 Module 정적 문법 은 맨 위 에 만 쓸 수 있 습 니 다.
정적 검사 에 편리 하 다.순환 참조 가 있 으 면 cjs 는 캐 시 에서 읽 을 수 있 고 읽 는 곳 이 어디 입 니까?module. exports. a 를 바 꿀 수 있 습 니 다.한편, es6 는 오 류 를 보고 하고 함수 의 방식 으로 만 값 을 읽 을 수 있 습 니 다. 함수 성명 이 파일 의 맨 위로 올 라 가기 때 문 입 니 다.
정적 검 사 는 나 무 를 흔 드 는 최적화 에 유리 하 다.
웹 팩 (현재 버 전, 4. x) 은 트 리 를 최적화 하려 면 es6 modules 로 작성 해 야 합 니 다.또한 웹 팩 에 포장 하기 전에 Babel 로 먼저 돌려 서 는 안 됩 니 다. 이것 은 사실 es6 의 import / export 문법 을 cjs 의 문법 으로 바 꾸 거나 presets 에 분명하게 쓰 기 때 문 입 니 다 "modules" false:.동시에 package. json 파일 에 side Effects 를 정확하게 써 야 합 니 다.
package. json 에 module 필드 를 추가 하여 es module 규범 파일 을 가리 킬 수 있 습 니 다. main - > CommonJs, 그러면 module - es module.웹 팩 과 rollup 은 모두 이 필드 를 지원 합 니 다.
CommonJs 의 this 와 ES6 Module 의 this
es6 의 module 은 기본적으로 엄격 한 모델 이기 때문에 다음 과 같은 결 과 를 얻 을 수 있 습 니 다.

<script type="module">
  function logThis() {
    console.log(this)
  }
  logThis()  //    undefined。
script>

node module 의 최 외층 코드 에서 this 는 module. exports 와 같다.그래서 console. log (this) 를 직접 인쇄 하면 {} 이 나 옵 니 다.화살표 함수 에 this 를 인쇄 하면 결과 도 마찬가지 입 니 다.
function 함수 에서 this 를 사용 하면 그 값 은 이 함수 가 어떻게 실행 되 는 지 결정 합 니 다.엄격 하지 않 은 모드 에서 함 수 를 직접 실행 합 니 다. this 는 global 대상 과 같 습 니 다.엄격 한 모드 에 서 는 undefined 와 같다.
브 라 우 저 에서 도 마찬가지다.화살표 함수 와 직접 console this, 결 과 는 모두 window 입 니 다.function 에서 this 를 사용 하면 엄격 하지 않 은 모드 에서 전역 에서 함 수 를 직접 실행 합 니 다. this 는 window 와 같 고 엄격 한 모드 에서 undefined 입 니 다.
stackoverflow 의 이 글: this behave differently in nodejs and browser 의 첫 번 째 대답 은 왜 그런 지 잘 설명 했다.브 라 우 저 와 nodejs 가 다른 점 은 브 라 우 저 에서 모든 script 은 window 에서 불 러 오고 nodejs 는 모든 script 파일 이 자신의 패키지 아래 (하나의 module 하나의 module) 에서 실 행 됩 니 다.Nodejs 는 js 파일 의 this 를 익명 함수 에 포장 하여 모든 파일 (file / module) 에 자신의 실행 컨 텍스트 를 만 듭 니 다.this 은 module scope 이 아니 라 global scope 에 있다.
함 수 를 호출 할 때 특정한 상하 문 을 지정 하지 않 으 면 함수 의 this 기본 값 은 전역 대상 을 가리킨다.nodejs 는 Global 이 고 브 라 우 저 는 window 입 니 다.엄격 한 모드 에서 모두 undefined 입 니 다.
umd 통용
포장 도구 에 umd 나 오 는 가방 을 지정 하면 보통 이 코드 를 볼 수 있 습 니 다.

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined'? module.exports = factory() :
  typeof define  === 'function' && define.amd? define(factory) : (global.libName = factory())
})(this, (function() { 'use strict'; }))

이 코드 의 역할 은 환경 을 판단 하여 각종 모듈 로드 방식 을 호 환 하 는 것 이다.