[TIL]2022_07_24 [빌드 도구]

npm & yarn

npm
Node Package Manager

전세계적으로 가장 많은 이들이 사용하고 있는 자바스크립트 언어를 위한 Node.js의 기본 패키지 매니저다.

yarn
yarn은 페이스북에서 만든 자바스크립트 패키지 매니저다.

둘의 차이점은 무엇일까?

• 속도
  npm은 패키지를 한 번에 하나씩 순차적으로 설치합니다. 그에 비해 yarn은 여러 패키지를 동시에 가져오고 설치하도록 최적화되어 있어 패키지 설치 속도 측면에서 yarn이 npm보다 빠릅니다

  yarn > npm

• 보안
  yarn은 보안 측면에서 npm보다 더 안전한 것으로 알려져 있습니다. npm은 자동으로 패키지에 포함된 다른 패키지 코드를 실행합니다. 이로 인해 보안 시스템에 몇 가지 취약성이 발생하며 나중에 심각한 문제가 발생할 수 있습니다. 반면에 yarn은 yarn.lock 또는 package.json파일에 있는 파일만을 설치합니다. 보안은 yarn의 핵심 기능 중 하나이지만 최근 npm의 업데이트에서 npm의 보안 업데이트도 크게 향상되었습니다.

Webpack

webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 이다.

모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

간단하게 표현하자면 웹팩이란 여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러이다.

---

여러 파일을 합쳐주면 무엇이 좋아지는데?

• 옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.
• 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.
• 하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.

Webpack의 이해에 앞서 babel에 대한 이해가 필요하다.

Babel

간단히 말해서 Babel은 최신 ES6 버전을 구버전인 ES5로 변환해준다. 즉 트랜스파일러라 할 수 있다.

그렇다면 왜 변환을 해줘야하는가

최신 업데이트 중에 ES6버전은 큰 업데이트 부분을 차지한다.
크게 일어난 만큼 ES6를 지원해주는 브라우저가 있다. 그 중에서는 지금까지는 크롬, 사파이, 파이어폭스(98%)와 같은 에버그린 브라우저는 최신 업데이트 버전으로 지원을 해준다.
하지만 인터넷 익스플로러11을 사용하는 비율도 11% 정도나 되는데 지원을 하지 않는다. 그러므로 아직 구 버전을 사용하는 ES5버전으로 바꿔주어야 한다.
그래서 개발환경을 설정할 때, webpack이랑 babel로 기초 환경 설정을 잡고 개발을 해야 한다.

npm install dependency
적용하고자 하는 폴더에 webpack과 webpack-cli를 설치해준다.

npm init
npm i react react-dom
npm i -D webpack webpack-cli  //-D는 개발환경에서만 쓰인다는 것

바벨설치

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

babel-loader는 바벨이랑 웹팩을 연결해준다.
preset-env는 자동으로 옛날 브라우저들을 지원해준다.

---

다시 돌아와서 WebPack의 구성요소를 살펴보자

Webpack 구성요소

Entry

엔트리 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이다.
최초 진입점이 되는 대상 파일은 웹 애플리케이션의 전반적인 구조와 내용이 담겨있어여 한다.
엔트리를 설정하고 웹팩을 실행하면 모듈간의 의존관계가 생기는 파일이 빌드 된다.

Output

웹팩을 실행하여 빌드하고 난 후 결과물의 파일 경로를 의미한다.

Loader

웹팩이 애플리케이션을 해석할때 자바스크립트 파일이 아닌 HTML, CSS, Images, font 등을 변환할 수 있게 도와주는 속성이다.
엔트리나 아웃풋 속성과는 다르게 웹팩은 모든 파일을 모듈로 취급하기 때문에 로더를 이용해 다른 파일들을 웹팩이 이해할 수 있도록 변환해줘야한다.
그 안에 rules 속성을 통해 처리 규칙을 등록하고, test 항목에 정의된 정규식에 매칭되는 파일은 use 항목에 등록된 로더를 통해서 처리된다고 한다.

// 로더를 여러개 사용하는 경우 우측에서 좌측순으로 적용이 된다.
// sass-loader => css-loader => ts-loader
module: {
  rules: [
		{ test: /\\.ts$/, use: 'ts-loader' },
    {
      test: /\\.scss$/,
      use: ['css-loader', 'sass-loader']
    }
  ]
}

보통 사용되는 로더 종류는 아래와 같다.

CSS Loader
Babel Loader
Sass Loader
File Loader
Vue Loader
TS Loader

Plugin

웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다.

로더랑 역할을 비교해보자면 로더는 파일을 해석하고 변환하는 과정에 관여하며, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 볼 수 있다.

Mode

mode는 development와 production, none을 선택할 수 있다. 기본값은 production이며, 이는 배포용이고 최적화가 자동으로 적용된다. devlopment는 개발용이며 webpack dev server를 사용할 수 있다.

최신 빌드 도구

---

### Snowpack 스노우팩은 unbundled during development 즉 개발중에 번들링을 하지 않겠다는 컨셉의 프론트엔트 빌드툴이다. unbundled during development은 개발서버에서는 소스를 Babel이나 Typescript로 변환만 할 뿐 번들은 하지 않은 상태로 제공하는 것을 말하며, 이것이 개발 서버에서도 번들이 된 소스를 제공하는 다른 도구와 가장 큰 차이다.

https://velog.velcdn.com/images%2Fyrnana%2Fpost%2F2782023a-3028-48ba-b161-eaf5f10635d9%2Fimage.png

Webpack 과 가장 큰 차이점이다. webpack 같은 경우, 파일 하나가 변경될 경우 연관된 모든 파일을 다시 빌드하고 다시 번들링 해야 한다. 그래서 시간 복잡도를 O(n) 으로 가져가야 한다.
스노우팩은 개발중에 모든 파일들을 단일 파일로 빌드하고 esm 방식으로 import 한다. 만약 어떤 파일이 변경되면 그 파일만 새로 빌드된다. 즉 O(1) 빌드 시스템인 셈이다

esbuild

https://velog.velcdn.com/images%2Fyrnana%2Fpost%2Fdf775f40-b07f-4358-8924-aacd54440635%2Fimage.png

esbuild는 go로 쓰여진 자바스크립트 번들러로 자체 벤치마크상에서 webpack보다 100배 이상의 성능을 낸다고 내걸고 있다. 스노우 팩은 내부적으로 이 esbuild를 단일 파일빌더로 사용하고 있다.

하지만 현재 스노우팩은 사실상 개발 중단 상태라 많이 사용하지 않고 권장하지 않는 상태라고 한다.