안녕하세요 피앰아이 유호석입니다.
오랜만에 포스팅을 하네요..
최근 웹게임 개발에 관심을 갖게 되어 남는 시간에 phaser.js를 다루고 있습니다.
게임 개발에서 기술은 부가적인 것 같습니다..
생각해야 할 게 너무 많아 맛만 보고 당분간 접어 놓을 생각입니다..
기회가 되면 phaser.js로 개발하는 간단한 튜토리얼을 나중에 포스팅할까 합니다
phaser.js를 다루다가 접하게된 아주 편한 bundler를 소개합니다 바로 parceljs입니다
parcel
https://ko.parceljs.org/
(한글 문서가 있으니 참고 하시면 되겠습니다.)
불꽃 튀게 빠르고 설정이 필요 없는 웹 애플리케이션 번들러
불꽃 튀게 빠르다니 너무 좋군요.. parcel이 해주는 역할은 다양한 assets을 번들해줍니다.
바로 예제갑니다
예제
fe에서 typescript를 쓰려고 합니다.
먼저 parcel을 설치해야겠죠
npm i -D parcel
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Babylon</title>
<style>
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="main.ts" type="module"></script>
</body>
</html>
main.ts
import * as BABYLON from 'babylonjs';
const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement;
if (canvas) {
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', 0, 0, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);
sphere.position.y = 1;
const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 6, height: 6 }, scene);
engine.runRenderLoop(() => {
scene.render();
});
window.addEventListener('resize', () => {
engine.resize();
});
}
babylon.js로 그림을 좀 그렸습니다.
다음 parcel로 index.html을 띄워보겠습니다
parcel index.html -p 8080
Codepen
codepen에선 parcel이 필요없으니 결과만 참고
See the Pen parcel by pmirnc (@pmirnc) on CodePen.
build
빌드도 너무 간결합니다
parcel build index.html
)
장점 정리
- 코드 분할
- HMR(핫 리로딩)
- 빠른 속도
- 다양한 애셋 지원
왜 이걸 이제 알았을까 하는 생각이 들 정도로 편리합니다.
그럼 전 20000
참고 문서