[Web] Framework Build Tool

 

<설명>

  - 빌드 관리 도구

  - Source code를 실행시키는 application의 Building 프로세스를 자동케하는 program.

    ==> source code를 compile, test, code review 하여 실행가능한 app 으로 build.

  - 이 process는 compiling, linking, 실행가능한 형태로 code 를 packaging 하는 등의 작업을 행함.

  - Project 정보 관리, Test Build, 배포 등의 작업을 진행.

  - 외부 library를 참조하여 자동으로 다운로드 및 업데이트 관리.

  - Website의 복잡성이 늘어나며 따라오는 사이트의 size, 속도, 3rd party 의존성 관리 streamline 등을 Build Tool이 최적시킴.

 

---

 

<언어별 build tool>

[Java]

  1) Maven

    - 특징

      * Java의 대표 build tool이었던 Ant를 대체하기 위해 개발.

      * Project 외부 library를 더 쉽게 참조하도록 pom.xml 파일로 명시하여 dependency 관리

      * 참조한 외부 library와 관련한 다른 library로 자동으로 관리.

      * Ant에는 없던 Life Cycle 도입

 

  2) Gradle

    - 특징

      * Andrid Project의 표준 build system

      * Multi-Project build에 최적하여 설계

      * Maven에 비해 더 빠른 처리 속도

      * Maven에 비해 더 간결한 구성

      * Maven에 비해 대규모 Project 작업시 성능이 더 좋음

      * 설치 없이 사용 가능 (Gradle Wrapper)

 

---

 

[JavaScript]

  1) Webpack

    - 특징

      * ES module, Common JS, AMD module 을 bundle 시킴 (combined 상태에서도 가능)

      * runtime 으로 load 된 것으로 single bundle 이든 mutiple chunk 로든 생성 가능

      * Complie 과정에서 runtime 을 줄이는데 Dependency를 이용.

      * Compile하는 동안 Loader는 파일을 preprocess 가능.

      * Application 에 필요한건 뭐든지 하는 Highly Modular Plugin System

 

  2) Parcel

    - 특징

      * Bundle 시간이 매우 빠름 - Multicore 컴파일링, 빠른 rebuild 를 위한 Filesystem Cache 등

      * plugin 설치가 필요 없음

      * 자동으로 module을 변환함. 심지어 node_module 이여도!

      * Dynamic import() 를 이용하여, 환경설정 없이 code 분할

      * Hot Module 대체안을 위한 Build-in Support

      * 친화적인 Error Logging experience - 문제가 있는 code를 표시

   

  3) Esbuild

    - 특징

      * cache 없이도 매우 빠름. Webpack이 15s 나올 때, Esbuild는 0.63s

      * ES6, common JS modules

      * ES6 module 의 Tree shaking

      * JS 와 Go 를 위한 API

      *TypeScript, JSX 의 syntax

      * Source maps : source code 의 디버깅을 더 쉽게 함.

      * Minification : 압축. code의 기능을 변경하지 않고 source code에서 불필요한 문자를 모두 제거.

      * Plugins : build process의 다양한 부분에 code injection을 가능케 함.

 

    - JS 최고의 build tool 로 쓰이는 이유

      * 극단적으로 빠른 build

      * TypeScript, JS, JSON 의 Loader

      * Minification

      * Code-splitting 지원

      * Bundling

      * CJS, IIFE, ESM 등 다양한 output format 지원

      * Source map generation

      * JSX 의 Transpilation, 새로운 JS syntax를 ES6 로 맞춤.

       ==> Transpile : 한 언어로 쓰인 code를 비슷한 추상 level의 다른 언어로 쓰인 code 로 변환.

 

---

 

<출처 1> https://themeselection.com/javascript-build-tools/

<출처 2> https://www.youtube.com/watch?v=3Jp9kGDb01g

<출처 3>