[Type Script] Webpack을 이용한 js/ts 번들링, 바벨 트랜스파일러 개념 및 설치

Webpack을 이용한 자바스크립트 번들링

실제 애플리케이션은 수백, 수천 개의 파일로 구성돼 있고 최소화, 최적화, 번들링 과정을 거쳐 최종 배포된다.

npm install webpack webpack-cli -g

-> 웹팩과 cli를 전역으로 설치한다.

 

package.json에서 devDependencies은 개발 의존성으로 이 패키지들은 배포 시 포함되지 않는다.

+ 공부하는 책에선 chalk 라이브러리를 사용했는데, 아무리 해도 오류가 떠 그냥 안 쓰기로 함

 

이렇게 변경 후 npm run bundleup 명령어를 실행하면 webpack-cli가 실행된다.

 

package.json이 위치한 경로에 webpack.config.js 파일을 만들어 위와 같이 작성한다.

그러면 출력 번들 이름이 index.bundle.js가 되고, 출력 번들 위치가 dist로 설정된다.

 

Node.js path 모듈을 사용해 __dirname 환경 변수로 절대 경로를 확인한다.
웹팩은 노드에서 실행되고 __dirname 변수는 webpack.config.js가 있는 디렉터리 위치를 저장한다.
path.resolve(__dirname, 'dist')는 프로젝트 루트 위치에 dist 서브 디렉터리를 생성하고 번들된 앱은 이 디렉터리에 들어간다.

 

* mode

: production, developer 모드가 있는데 프로덕션 모드는 용량 크기를 줄이고 런타임에 최적화되며 개발 전용 코드는 삭제된다.
개발 모드에선 컴파일이 실행되고 브라우저에서 코드를 디버깅할 수 있다.

 

+ 그냥 저거만 작성하면 린터에서오류가 떠서 eslint 설정을 변경해줌.
eslint no-undef: "off" // "@typescript-eslint/no-var-requires": "off"
또 이상한 오류가 뜨길래 webpack, webpack-cli를 모두 uninstall 하고 최신버전으로 다시 install했더니 오류 해결됨.

 

출력 내용을 보면 명령어를 실행하고 생성된 번들 파일과 소스코드를 보여준다.
생성된 번들 파일은 메인 청크 또는 번들이라고 부른다.
지금은 번들 파일이 하나지만 규모가 큰 프로젝트는 번들도 모듈로 분할되며 여러 번들을 빌드하도록 웹팩을 구성할 수 있다.

 

Node.js 런타임을 사용해 코드를 실행했지만, 웹의 경우 웹팩 개발 서버로 웹 페이지를 서비스할 수 있다.
따라서 webpack-dev-server 패키지를 의존성으로 설치해보자.

npm install webpack-dev-server -D

그 다음, package.json 내 scripts에 "start": "webpack-dev-server"를 추가해준다.
그리고 index.js 파일에 아래와 같이 작성한다.

document.write('Hello World!');

그 후 webpack.config.js 파일에

mode:'development',
    devServer:{
        contentBase:'.'
    }

이렇게 수정해준다. mode를 프로덕션에서 개발 모드로 바꾸고 devSerever를 추가했다.
또한 devServer에서 webpack-dev-server 옵션을 구성할 수 있다. -> 웹팩 공식 문서에서 확인 가능
contentBase를 사용해 현재 디렉터리 내 파일을 제공하도록 한다.

 

근데 contentBase라는 것은 쓸 수 없다고 에러가 뜬다.
그래서 구글링을 해보니 웹팩 최신버전에선 contentBase가 아닌 static으로 설정해줘야 한다고 한다.

devServer:{
        static:'./',
        compress: true,
        port: 8080,
    }

-> 이렇게 해주면 정상적으로 작동된다.

 

index.html

<script src="../dist/index.bundle.js"></script>

-> index.bundle.js 호출

npm run bundleup -> 새로운 터미널 열기 -> npm start

 

Webpack을 이용한 타입스크립트 번들링

npm i ts-loader

-> 타입스크립트 로더 설치

 

"devDependencies": {
    ...
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.5",
    "webpack": "^5.0.0-rc.6",
    "webpack-cli": "^4.0.0-rc.1",
    "webpack-dev-server": "^4.7.4"
  }

-> 이런 식으로 추가

 

일반적으로 빌드 자동화 도구는 빌드 프로세스 중에 필요한 추가 작업을 제공한다.
웹팩은 빌드를 커스터마이징 할 수 있는 로더와 플러그인을 제공한다. 웹팩 로더는 한 번에 한 파일만 처리하지만 플러그인은 파일 그룹으로 처리할 수 있다.
웹팩 로더는 소스파일을 입력으로 사용하고 다른 파일을 출력으로 생성하는 변환기이다.

 

tsconfig.json 파일을 추가해 타입스크립트가 컴파일할 수 있도록 한다.

{
    "compilerOptions": {
        "target": "es2018",
        "moduleResolution": "node"
    }
}

ECMA 2018 스펙으로 변환하고, Node.js 방식 모듈 해석을 사용한다.
moduleResolution 옵션은 import 구문이 있는 경우 tsc에 모듈을 해결하는 방법을 알려준다.
예를 들어 import { a } from 'moduleA'라는 구문이 있다면 tsc는 moduleA 위치를 알아야한다.

모듈 해석엔 Classic과 Node 두 방법이 있다 Classic 해석은 tsc가 moduleA.ts에서 moduleA의 정의를 찾고 moduleA.d.ts에서 타입 정의를 찾는다. Node 방식 해석은 node_modules 디렉터리에서 모듈을 찾는다.

module.exports = {
    ...
    module:{
        rules: [ // 모듈 규칙(로더 구성, 파서 옵션 등)
            {
                test:/\.ts$/, // 확장명이 .ts인 파일에 적용
                exclude: /node_modules/, // node_modules 내 ts 파일을 무시한다.
                use: 'ts-loader' // 기존 tsconfig.json의 옵션을 사용해 ts를 컴파일
            },
        ],
    },
    resolve:{
        extensions:['.ts', '.js'] // ts 파일을 가져오기 위해 resolve 프로퍼티에 .ts 확장자를 추가
    },
    ...
}

-> webpack.config.js 파일에 위 코드를 추가하자.
.ts 확장자 파일은 ts-loader를 사용하고, node_modules 디렉터리 내 .ts 파일은 무시하고 컴파일할 필요가 없다고 웹팩에게 지시하는 것이다.
또한 html, css, 이미지 등을 위한 로더도 사용할 수 있다.

 

+ require 오류 : script 구문에 type="module"을 추가해주고, .bundle.js 파일 위에 import {require} from '../src/index.js'를 추가해주면 오류 해결

 

바벨 트랜스파일러

바벨이란?

: 모든 브라우저가 ECMA 스크립트의 모든 기능을 지원하지 않기에 발생하는 크로스 브라우징 이슈를 해결해주는 js 트랜스파일러이다.

 

어느 브라우저는 ES2018 이하를 지원하지만 다른 브라우저는 ES5만 지원한다.
바벨은 최신 js 코드를 이전 버전으로 바꿔준다.
tsc를 사용하면 특정 ES를 변환 타겟으로 지정할 수 있지만 바벨은 세분화된 기능을 선택해 변환할 수 있다.
바벨은 트랜스파일링할 세부 기능을 선택하고 이를 지원할 수 있어 매우 유연하다.

바벨 내 많은 플러그인은 특정 기능을 변환하는데 사용되지만 각각 기능마다 플러그인을 찾고 맵핑하려면 시간이 많이 걸린다.
때문에 바벨 플러그인을 묶어 프리셋으로 만들었다.
프리셋 환경변수 preset-env로 ES 기능과 앱이 지원해야할 브라우저 대상을 지정할 수 있다.

https://babeljs.io/repl

위 사이트에 들어가 TARGETS를 > 2%, ie 11, safari > 9로 지정하고 화살표 함수 코드를 간단하게 써보면 코드를 변환해준다.
바벨에서 코드를 시장 점유율이 2% 이상인 모든 브라우저, 인터넷 익스플로러 11 및 사파리 9에서 실행되도록 변환함을 의미한다.

바벨을 사용해 프로그래밍 언어를 최신 js, ts, 커피스크립트, 플로우 등으로 변환할 수 있다.
바벨을 사용해 ts를 변환하면, tsc와 달리 타입 검사가 되지 않는다. 바벨은 ts 컴파일러 모든 기능을 지원하지 않는다. 바벨은 ts 코드를 파싱하고 js 문법으로 생성해주는 일만 한다.

 

왜 ts 컴파일러를 쓰지 않고 ts를 js코드로 변환하는 트랜스파일러를 알아야할까

: 많은 프로젝트가 js로 작성된 모듈과 ts로 작성된 모듈을 함께 쓰기 때문이다.
이 경우 바벨은 개발-배포 과정에서 이미 사용 중일 것이다.
바벨은 ts로 리액트 개발을 시작한 개발자들에게 인기가 많다.

바벨은 npm 명령어로 전역, 지역으로 설치할 수 있지만 프로젝트 디렉터리 내 지역으로 패키지를 설치하는 게 좋다. 만약 다른 컴퓨터에서도 npm install 명령어로 모든 의존성을 동일하게 설치할 수 있기 때문이다.

 

npm i @babel/core @babel/cli @babel/preset-env

-> 순서대로 바벨 트랜스파일러, 커맨드라인 인터페이스, 프리셋 패키지이다.

 

담소

오랜만에 카공하니까 아주 좋네여.. 집중 잘 돼서 엄청 좋은 듯! 근데 히터 좀 틀어주세요... 이디야...ㅠㅠ