[OpenLayers] ol v5.3을 VSCode에서 사용하기

VSCode(VisualStudio Code)를 설치한다.
node.js를 설치한다.
콘솔에서 작업 디렉토리를 생성하고 이동한다.
아래의 명령을 입력하여 필요한 정보 입력(단순히 enter 키를 눌러 기본값으로 지정해도 됨)

npm init

아래의 명령을 입력하여 openlayers 패키지 설치

npm install ol

아래의 명령을 입력하여 parcel 패키지 설치(아직 명령창 닫지 말 것)

npm install --save-dev parcel-bundler

VSCode를 실행하고 작업 디렉토리를 오픈한다.
index.js 파일을 추가하고 아래처럼 입력한다.

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

index.html 파일을 추가하고 아래처럼 입력한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

package.json 파일에 아래의 내용을 추가한다.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "parcel index.html",
  "build": "parcel build --public-url . index.html"
}

앞서 열어 둔 명령창에서 다음을 입력한다.

npm start

VSCode에서 Debugger for Chrome 확장 기능을 설치한다.
VSCode에서 F5키를 눌러 Start Debugging을 실행하고, 실행 환경으로 Chrome을 선택한다.
.vscode라는 폴더 안에 launch.json 파일을 생성되는데, 이 파일을 연다.
내용 중 “url”: “http://localhost:8080″를 아래처럼 변경한다.
```
"url": "http://localhost:1234"
```
내용 중 “webRoot”: “${workspaceFolder}”를 아래처럼 변경한다.
```
"webRoot": "${workspaceFolder}/dist"
```

답글 남기기 응답 취소