이번에 토이프로젝트를 위해 typescript 기초 세팅부터 할 수 있도록 준비 해보았다.
node intialization
npm init -y
package.json 파일이 생성되고 해당 프로젝트에서 nodejs 기반 프로젝트로 설정 하게 된다.
react
npm i --save react react-dom
react, react-dom 설치
타입 정의 파일
$ npm install --save @types/react @types/react-dom
Typescript 설치
npm -i --save-dev typescript
TS 초기화
npx typescript --init
초기화를 의미하는 --init 옵션을 붙여 실행하면 tsconfig.json
파일이 자동으로 생성된다. 리액트 jsx
코드를 사용하기 위해서는 compilorOptions의 jsx 속성에 "react"
값을 추가해야 해야한다. (기본값은 주석 처리 되어 있다)
"compilorOptions": {
"jsx": "react" // "preserve" => "react"
웹팩 빌드 환경 설정
먼저 타입스크립트 로더인 ts-loader
와 웹팩 패키지를 설치한다.
$ npm install --save-dev ts-loader webpack webpack-cli
webpack.config.js
파일을 만들어 아래 내용으로 웹팩 설정을 구성한다. (root Dir)
module.exports = {
mode: "development",
// 엔트리 포인트
entry: "./src/index.tsx",
// 빌드 결과물을 dist/main.js에 위치
output: {
filename: "main.js",
path: __dirname + "/dist",
},
// 디버깅을 위해 빌드 결과물에 소스맵 추가
devtool: "source-map",
resolve: {
// 파일 확장자 처리
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
// .ts나 .tsx 확장자를 ts-loader가 트랜스파일
{ test: /\.tsx?$/, loader: "ts-loader" },
],
},
}
엔트리 포인트(entry)를 src/index.tsx
로 설정한다.
빌드 결과(output)는 dist
폴더에 main.js
로 만들 것이다.
디버깅을 위해 결과물에 소스맵을 추가한다(devtool
). 특정 속성에서는 디버깅이 불가능하다
모듈이 타입스크립트 파일을 처리하기 위해 resolve.extensions
속성에 .ts, .tsx
확장자를 추가한다.
es6
코드를 바벨이 처리하는 것처럼 타입스크립트 코드를 ts-loader
가 처리하도록 설정했다. .ts
나 .tsx
파일을 ts-loader
가 해석하라는 설정이다.
이렇게 웹팩 설정을 마치고 빌드 스크립트를 package.json
에 등록한다.
{
"scripts": {
"build": "webpack"
}
}
다음 명령어로 빌드 해주면
$ npm run build // yarn build
dist
폴더에 main.js
과 main.js.map
파일이 생성된다.