Typescript + webpack

npm install

앞으로의 프로젝트를 typescript로 개발하고 싶은 욕심이 생겼습니다. input과 output의 명확함도 그렇고, decorator 등 다양한 기능을 사용해 볼 수 있더군요.
저는 지속적으로 npm에 publish를 하고 있는데, 그 중 gpx 데이터를 cesium.js에 활용할 수 있도록 czml 데이터로 변경하는 플러그인을 개발하여 퍼블리싱 하고 있습니다.
해당 프로젝트는 data를 받아서 처리해야 하는 부분들이 많은데, 이 부분들을 typescript로 명확하게 바꾸고 싶었습니다.
그 첫번째로 간단하게 리뉴얼 1일차 typescript + webpack을 통한 환경 설정을 포스팅하고자 합니다.

Typescript 특징

1) 대형 프로젝트에 적합한 언어

• type을 사용함으로써 javascript 어플리케이션을 개발할때의 자료 타입의 정적 검사 및 코드 리팩토링과 같은 생산성 높은 개발이 가능
• 타입은 선택 사항이며 주석을 통해서 코드의 정적검증에 변화를 줄 수도 있음.
• 소프트웨어 구성요소간의 인터페이스를 정의하고 javascript 라이브러리의 동작 파악 가능

2) 최신 javascript 기술 적용

• ECMAScript 2015에서 비동기 함수 (async/await) 및 decorator 같은 기능을 포함함.
• ECMAScript3까지도 컴파일 가능

사용법

• 1. typescript, webpack , path설치

     npm install typescript webpack path --save

• 2. ts-loader 설치

     npm install ts-loader --save-dev

webpack 설정

webpack.config.js 설정

// webpack.config.js
var webpack = require('webpack');
var path = require('path');

module.exports = {
	entry: {
		'main': 'src/main.ts'
	},
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	devtool: 'source-map',
	module: {
		rules: [
			{
				test: /\.ts$/,
				use: ['ts-loader']
			}
		]
	}
};

src/main.ts 생성

'use strict';

const main = () => {
	console.log('hello world!');
};

export default main;

tsconfig.json 생성

{
	"compilerOptions": {
		"module": "commonjs",
		"target": "es5",
		"sourceMap": true
	},
	"exclude": [
		"node_modules"
	]
}

실행

webpack