프론트엔드 webpack + typescript 설정

오늘은 간단하게 프론트엔드에서 webpack + typescript를 설정하는 간단한 방법을 살펴보기로 합시다.

프론트엔드에서 typescript는 디버깅 측면에서 정말 중요한 부분인데 단순히 자바스크립트를 사용할 경우에 변수의 타입을 확인할 방법이 없기 때문에 undefined와 같은 값이 나타나게 됩니다.

따라서 최근에는 typescript를 무조건 써야하는 경우가 발생하고, 이는 유지보수측면에서도 상당한 이점을 가져옵니다.

이러한 typescript를 설정하기 위해서는 먼저 아래의 패키지를 설치합니다.

 

npm install --save-dev typescript ts-loader

 

tsconfig.json이라는 파일이 반드시 필요합니다.

tsconfig.json은 타입스크립트가 파일을 읽을 때 어떻게 파일을 읽을 것인지 알려주는 지침서같은 역할을 합니다.

저는 tsconfig.json을 다음과 같이 설정해주었습니다.

 

{
	"compilerOptions" : {
		"outDir": "./dist/", // 결과가 들어갈 디렉토리
		"baseUrl": ".", 
		"noImplicitAny": false, // any는 사용하지 않음
		"module": "commonjs", // node환경에서 적용
		"target": "es5", // es5로 트랜스파일
		"paths": { "*": ["node_modules/*"]},
		"jsx": "react",
		"esModuleInterop": true, // import-from를 사용하기 위해
		"allowJs": true // js도 허용하겠다
	},
	"include": ["src/**/*"], // 컴파일할 대상
	"exclude": ["node_modules"] // 컴파일에서 제외할 대상
}

 

또한 webpack에서도 추가 혹은 수정해야합니다.

 

	resolve: {
		extensions: ['.jsx', '.js', '.tsx', '.ts'] // tsx와 ts를 추가
	},
        ...

        // tsx를 번들링해줄 module 설정
	{
		test:/\.tsx?/,
		use: {
		     loader: 'ts-loader',
		},
		exclude: /node_moudles/
	},

 

babel도 추가해주어야 합니다.

 

 "@babel/preset-typescript" // typescript도 변환해주기 위해서 설정