파셀 환경에서의 타입스크립트 적용(parcel with typescript)

파셀환경에서의 타입스크립트를 적용하는 방법입니다.

프로젝트에서 파셀과 타입스크립트 환경은 미리 준비가 되어 있어야 합니다.

이번 내용은 오픈레이어스를(Openlayers) 타입스크립트 환경에서 개발한 내용입니다.

먼저 package.json 내용 입니다.

{
  "name": "open_layers",
  "version": "1.0.0",
  "description": "Open layers test project",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html --global gisMap ",
    "build": "parcel build --public-url . index.html --global gisMap "
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ol": "^6.4.3",
    "typescript": "^4.1.3"
  },
  "devDependencies": {
    "@types/node": "^14.14.14",
    "parcel-bundler": "^1.12.4"
  }
}

 

json 파일에서 스크립트(scripts)를 자세히 보시면 별도의 설정 없이 순수 파셀(parcel) 명령어만 적어진 것을 볼 수 있습니다.

* 타입스크립트 설치 : npm install -d typescript

* 타입스크립트 초기화 : tsc --init

 

스크립트(scripts)에서 --global이라는 옵션은 파셀에서 빌드(build) 또는 실행(run)을 하는 경우 module.exports 라는 명령어를 만나게 되면 다른 스크립트 영역에서 해당 기능을 사용 할 수 있도록 해 주는 옵션입니다.

말이 어려우면 아래 링크를 통해 내용을 확인 하시는 것도 좋습니다.

lts0606.tistory.com/299

파셀(parcel)을 활용하여 함수, 변수를 export 하기 (parcel export function)

 

json 파일에서 맨 하단에 @type/node 라는 모듈은 타입스크립트에서 module.exports 기능을 동작 할 수 있도록 지원하는 모듈입니다.

해당 모듈이 없다면 module.exports 부분에 빨강색 오류문구를 만날 수 있습니다.

* 설치 방법 : npm i --save-dev @types/node

타입스크립트에서 module이 뭔지 몰라 이러한 오류가 나타나는데, 친절하게도 해결법을 알려줍니다.

 

타입스크립트를 초기화(tst --init)를 하게되면 기본적인 옵션값들이 채워진 json파일이 생성됩니다.

해당 파일 이름은 tsconfig.json이며, 해당 설정 값에 여러 옵션을 줄 수 있습니다.

{
  "compilerOptions": {
    "module": "es2015",   -> 모듈을 의미 합니다.
    "target": "es6",  -> 문법 타겟을 의미 합니다.
    "moduleResolution": "node",  -> import, export에 대한 전략을 의미 합니다.
    "resolveJsonModule": true,  -> json 파일을 가져올 수 있게 해 줍니다.
    "esModuleInterop": true,    ->CommonJS스펙을 사용 가능하게 합니다.
    "outDir": "dist"   -> 배포할 경로를 의미 합니다.
  },
  "include": [   -> ts파일의 위치를 의미 합니다.
    "./*"
  ]
}

 

tsconfig.json에서 주로 사용되는 옵션을 적어 보았습니다.

설정이 완료되면 npm run start 또는 npm run build 등을 통해서 프로젝트를 구동 할 수 있습니다.

동작시킨 모습 입니다. global 옵션이름으로 gisMap이라고 주었습니다.

 

단계를 정리하여 보았습니다.

1. npm init을 통해 해당 프로젝트를 최초 구성 합니다.

2. 타입 스크립트를 설치 합니다. (npm install -d typescript)

3. 타입 스크립트를 초기화 합니다. (tsc --init)

4. module 기능을 사용하기 위해 추가 모듈을 설치 합니다. (npm i --save-dev @types/node)

5. 타입스크립트 설정을 프로젝트 환경에 맞추어 정리 합니다.

 

이상으로 파셀에서 타입스크립트 환경 적용에 대해서 살펴 보았습니다.

내용이 빈약(?) 하므로 추가 의견, 틀린부분이 있다면 알려주세요!