기본 설정
# Node.js 설치
npm 명령 실행을 위함
# npm init -y
npm init는 package.json을 만들기 위한 명령이고 -y를 붙임으로써 별도의 입력 없이 기본 값으로 진행 시킴. package.json은 작성하고자 하는 프로젝트에 대한 설정 파일로 볼 수 있으며, 프로젝트 이름과 버전 등과 같은 설명과 프로젝트가 사용하는 라이브러리에 대한 정보 그리고 프로젝트 실행 등을 위한 명령에 대한 정보가 담겨있음. package.json 파일은 npm을 위한 파일임(VS.Code를 위한 것이 아님)
# npm install webpack webpack-cli –save-dev
# npm install typescript ts-loader –save-dev
# tsconfig.json 파일 생성 및 내용 작성
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"allowJs": true
}
}
# webpack.config.js 파일 생성 및 내용 작성
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.ts",
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
}
# src, dist 폴더 및 index.html(dist 폴더), index.ts(src 폴더) 파일 생성
# index.ts 코드 입력
# package.json 파일의 “scripts” 파트에 “bundle”: “webpack” 입력
{
..
"scripts": {
..
"bundle": "webpack",
},
..
}
# npm run bundle 실행
Typescript로 작성된 파일을 Javascript 파일로 트랜스파일링 시킴
자동 실행을 위한 설정
# package.json 파일의 “scripts” 파트에 “watch”: “webpack –watch” 및 “start”: “npm run bundle && npm run watch” 추가
{
..
"scripts": {
..
"bundle": "webpack",
"watch": "webpack --watch",
"start": "npm run bundle && npm run watch"
},
..
}
# VS.Code에서 Live Server 확장 기능 설치
# npm start 실행
이제부터 Typescript로 작성된 파일을 수정하면 Javascript 파일로 지동으로 트랜스파일링 시킴
# index.html 열고 GO LIVE 활성화
브레이크 디버깅
# VS.Code의 “실행 및 디버그” 클릭을 통해 launch.json을 생성 (크롬 선택)
# launch.json 파일에서 “url”의 값을 “http://127.0.0.1:5500/dist”으로 수정
{
..
"configurations": [
{
..
"url": "http://127.0.0.1:5500/dist",
..
}
]
}
babylonjs 라이브러리 설치
# npm install @babylonjs/core
# tsconfig.json에 “moduleResolution”: “node” 추가
{
"compilerOptions": {
..
"moduleResolution": "node"
}
}
위의 설정을 입력해야 babylonjs 모듈을 import할 때(예: import { Scene } from “@babylonjs/core”) 문제가 없음
최종 설정 파일 내용
# tsfonfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"allowJs": true,
"moduleResolution": "node"
}
}
# webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.ts",
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
}
# package.json
{
"name": "tstbabylonjs_ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "webpack",
"watch": "webpack --watch",
"start": "npm run bundle && npm run watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.4.1",
"typescript": "^4.8.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"@babylonjs/core": "^5.26.1"
}
}
# launch.json
{
// IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
// 기존 특성에 대한 설명을 보려면 가리킵니다.
// 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://127.0.0.1:5500/dist",
"webRoot": "${workspaceFolder}"
}
]
}