[React]script모듈 & 번들러/바벨

script 모듈

이전의 브라우저에서는 모듈의 개념이 없어서 

브라우저에서는 필요한 모듈들을 네트워크를 통해 비동기적으로 다운로드 받고 나서야 사용이 가능했다.

코드를 작성할때에도 파일의 선언 순서에 따라 충돌이 발생할 수도 있기 때문에 주의가 필요했다. 

 

 

ES6 Module

2015년 JavaScript의 표준 모듈 시스템이 명세되었으나

일부 구버전 브라우저(IE)에서는 모듈이 나눠진 스크립트를 실행하지 못하여 스크립트를 처리하는 별도의 라이브러리가 필요.

---

번들러(bundler)

번들러는 파일(모듈)들을 하나로 만들어서 브라우저에서 실행 가능한 환경을 만들어주는 도구.

(런타임에 모듈을 가져오는 모듈 로더에 반해 빌드 시 모듈을 묶어버리기 때문에 추가적인 로드가 필요 없음)

 

번들러 도구

: webpack, rollup, parcel

각 도구마다 설정과 구동방식에 차이가 있음. ()

 

webpack

지정한 메인파일에서 시작해 import(require)로 선언된 모든 프로젝트의 의존성을 비교한 후 하나의 자바스크립트로 변환한다.

다른 번들러 도구에 비해 처리방식이 빠르고 직관적이며,

사용이 간단하고 안정성이 뛰어남.

React 파일인 .jsx파일도 변환이 가능하여 react에서는 주로 webpack을 사용.

 

---

Babel

컴파일 시 구형 브라우저에서 실행가능하도록 javascript파일로 변환해주는 도구

최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드를 변환(ES6 -> ES5)

function App() {
  return (
    <div>
      Hello <b>React</b>
    </div>
  );
}

 

function App(){
  return React.createElement("div", null, "Hello ", React.createElement("B", null, "React"));
}
 
 

---

참조 : wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html

        jusungpark.tistory.com/52