[Type Script] Javascript, Typescript와 바벨 사용하기, Webpack-Babel-Typescript 사용하기

자바스크립트와 바벨 사용

npm init -y

-> package.json 추가

 

package.json

{
  ...
  "scripts": {
    "babel" : "babel src -d dist"
  },
  ...
  "dependencies": {
    "@babel/cli": "^7.17.0",
    "@babel/core": "^7.17.0",
    "@babel/preset-env": "^7.16.11"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.0",
    "@babel/core": "^7.17.0",
    "@babel/preset-env": "^7.16.11"
  }
}

babel을 설치하면 위와 같이 package.json에 의존성이 추가된다.
package.json이 있는 위치에 .babelrc 라는 파일을 만들고 아래와 같이 작성한다.

{
    "presets": [
        "@babel/preset-env"
    ]
}

-> ES2015, 2016, 2017에 추가된 기능은 ES5 버전으로 변환된다.

npm install 로 의존성을 추가하고 npm run babel 명령어를 실행해보자.
그럼 dist라는 폴더 안에 변환된 index.js가 있고, 코드를 확인해보면 "use strict"; 라는 행이 추가되고 const가 var로 바뀐다.

node dist/index.js 명령어를 실행하면 바벨이 변환한 프로그램이 실행된다.
출력 : Transpiled with Babel

바벨이 특정 브라우저 버전에 작동하는 코드를 생성하기 위해선 .browserslistrc 파일이 필요하다.

 

.browserslistrc

last 2 chrom versions
last 2 firefox versions

파이어폭스와 크롬 모두 const 키워드를 지원하기 때문에 const가 var로 변환되지 않는다.

타입스크립트와 바벨 사용

새로운 디렉터리(babel-typescript)를 만들고 ./src/index.ts에 아래와 같이 작성한다.

const message = "Transpiled with Babel";
console.log(message);

 

package.json

{
  ...
  "scripts": {
    "babel" : "babel src --out-dir dist --extensions \".ts,.tsx\" --source-maps inline"
  },
  ...
  "dependencies": {
    "@babel/cli": "^7.17.0",
    "@babel/core": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-typescript": "7.16.7"
  }
}

-> babel을 의존성으로 추가하고 package.json 파일에 위와 같이 작성한다.
--extensions '.ts' 옵션으로 바벨이 타입스크립트 파일을 읽을 수 있도록 설정했다.
일반적으로 프리셋은 여러 플러그인으로 구성되지만, preset-typescript는 @babel/plugin-transform-typscript 한 가지로만 구성된다.
@babel/plugin-transform-typscript는 타입스크립트 코드를 자바스크립트 코드로 변환하지만 타입스크립트 컴파일러는 아니다. 바벨은 타입스크립트 코드를 지울 뿐이다. 타입 검사를 하지 않기 때문에 타입스크립트 컴파일보다 훨씬 더 빠르다.

* tsc는 타입 검사의 역할만 하고 컴파일하지 않는다. 대신 바벨이 컴파일 역할을 한다.

"check_types" : "tsc --noEmit src/index.ts"
-> package.json의 scripts에 위 코드를 추가한다.
그 후 아래 명령어를 실행해보자.

npm run check_types
npm run babel

--noEmit 옵션은 check_types 이후 babel을 실행하므로 index.js를 출력하지 못하게 한다.
index.ts에 컴파일 오류가 있으면 빌드 프로세스가 실패하고 바벨이 실행되지 않는다.

 

.babelrc 파일에 @babel/preset-typescript 를 추가한다.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]
}

 

js와 다른 점을 비교해 정리하자면

• 바벨을 실행하는 명령어에 --extensions '.ts' 옵션을 추가했다.
• package.json에 타입스크립트 개발 의존성을 추가했다.
• .babelrc에 "@babel/preset-typescript"를 추가했다.

index.ts를 변환하기 위해 package.json에 있는 npm 스크립트를 실행한다.

npm run babel
node dist/index.js

-> dist 폴더 index.js가 생성되고 index.js를 실행했다.

 

Webpack-Babel-Typescript 사용

바벨은 번들러가 아닌 트랜스파일러이다.
웹팩, 롤업, 브라우저리파이 등 다양한 번들러가 있지만 웹팩을 사용할 것이다.
새로운 프로젝트를 만들고 src 폴더 안에 index.ts를 만들어 아래와 같이 작성한다.

const message = 'Built with Babel bundled with Webpack';
console.log(message);

그리고 아래 명령어를 실행한다

npm init -y
npm i @babel/core @babel/preset-env babel-loader webpack webpack-cli

-> 전과 달리 웹팩 바벨 로더 babel-loader를 추가하고 명령줄로 바벨을 실행하지 않을 것이므로 babel-cli를 제거했다. 그리고 웹팩은 번들링 과정에서 babel-cli 대신 babel-loader를 사용한다.
또한 이번에는 babel-loader가 .ts 파일을 읽도록 바꾸겠다.

 

webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'index.bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    target:'node',
    mode:'production',
    module:{
        rules:[
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    resolve:{
        extensions:['.ts', '.js']
    },
    
    devServer:{
        static:'./',
        compress: true,
        port: 8080,
    }
}

-> 위와 같이 작성 후 package.json의 scripts에 "bundleup": "webpack"을 추가하고
npm run bundleup 명령어를 실행하면 dist 폴더 안에 index.bundle.js가 생성되는 걸 볼 수 있다.
node dist/index.bundle.js 를 실행하면 정상적으로 출력된다.

 

담소

아 드디어 웹팩쓰와 바벨쓰를 끝냈다.

하다보니 이걸 왜 쓰는지 알게 된 느낌? 확실히 편한 것 같다.