반응형
모듈 번들러
모듈 번들러란?
- 모듈 번들러는 자바스크립트 모듈을 브라우저에서 실행할 수 있는 단일 자바스크립트 파일로 번들링할 때 사용되는 도구이다.
예시) wepback, rollup, fusebox, parcel
모듈 번들러는 왜 필요한가?
- 요즘은 아니더라도, 이전 브라우저들은 모듈 시스템을 지원하지 않았다.
- 코드의 종속성을 효율적이게 관리하고, 종속성 순서대로 모듈을 가져올 수 있다.
- asset(종속성 순서, image, CSS,,,)을 가져오는데 도움이 된다.
<html>
<script src="/src/foo.js"></script>
<script src="/src/bar.js"></script>
<script src="/src/baz.js"></script>
<script src="/src/qux.js"></script>
<script src="/src/quux.js"></script>
</html>
위의 파일로 구성된 어플리케이션을 빌드하려면 script tag를 통해 자바스크립트 파일을 html에 추가하고, 어플리케이션을 시작하기 위해서는 5개의 왕복 요청에 대한 http 요청이 필요하다.
하지만 모듈 번들로를 통해 , 이들을 모두 다음처럼 1개로 결합할 수 있다.
<html>
<script src="/dist/bundle.js"></script>
</html>webpack 방식으로 모듈을 번들하려면
- 모듈 맵을 사용한다.
- 함수를 사용하는 각 모듈을 wrapping 한다.(모듈 팩토리 기능)
- 모듈을 함께 묶는 runtime 코드를 만든다.
Webpack
모듈 번들러의 한 종류로, webpack은 의존 관계를 가지는 자바스크립트, CSS, 이미지 등의 리소스를 하나로 묶도록(번들링하도록) 도와준다. webpack의 사용 목적은 번들을 통한 성능 최적화이다.
Babel
Babel이란?
babel이란 자바스크립트 컴파일러로, 입력도 자바스크립트 코드고 출력도 자바스크립트 코드이. 엥? 그러면 왜쓸까요?? 그 이유는 버전때문이. 최신 버전의 자바스크립트 문법을 브라우저가 이해하지 못할 수도 있기 때문데, babel이 브라우저가 이해할 수 있는 문법으로 변환해주는 역할을 한다.
Babel-polyfill
babel을 사용한다고 해서 자바스크립트의 모든 최신 문법을 브라우저가 이해할 수 있지는 않다. 왜냐하면, babel은 문법을 변환해주는 역할만 하기 때문이다. 따라서, babel-polyfill을 사용한다면, 프로그램이 맨 처음 시작될 때 현재 브라우저에서 지원하지 않는 함수를 찾아서, 각 object의 prototype에 붙여준다. polyfill을 사요하기 위해서는 별도의 작업이 필요하다.
babel은 compile-time에 실행되고, bable-polyfill은 run-time에 실행된다.
출처
반응형
'Development' 카테고리의 다른 글
| S3 (0) | 2021.08.24 |
|---|---|
| React 앱을 S3+CloudFront로 배포하기(2) - CloudFront 설정 (4) | 2021.08.24 |
| React 앱을 S3+CloudFront로 배포하기(1) - S3 Bucket 생성 (4) | 2021.08.24 |
| 자바스크립트 환경변수 설정하기 (0) | 2021.08.23 |
| Npm vs Yarn (0) | 2021.08.22 |
