Three.js 프로젝트 세팅하기 with TS

Three.js을 실습할 환경을 만들어 봅시다.

설치

npm install three --save-dev

npm install @types/three --save-dev

f1 을 누르고 ts 서버 다시 시작을 검색해 다시 시작해준다.

파일 구조는 다음구조를 참고해 만들어줍니다.  배표를 위한 dist 폴더와 소스코드가 들어가는 src 폴더를 만드네요.

|-- praThree
    |-- dist
        |-- client
            |-- index.html
        |-- server
    |-- node_modules
        |-- @types
            |-- three
                |-- (Several extra files and folders containing the Three.js definitions)
        |-- three
            |-- (Several extra files and folders containing the Three.js source code)
    |-- src
        |-- client
            |-- client.ts
            |-- tsconfig.json
        |-- server
    |-- package.json
    |-- package-lock.json

웹팩 세팅을 합니다. 5개(webpack, webpack-cli, webpack-dev-server, webpack-merge, ts-loader)를 설치합니다.

npm install webpack webpack-cli webpack-dev-server webpack-merge ts-loader --save-dev

• webpack: 코드 개발 및 프로덕션 버전으로 번들링하는 코어가 포함
• webpack-cli : 웹팩 실행하는 데 사용하는 명령줄 도구.
• webpack-dev-server : 개발 단계에서 코드 로드, *HMR 기능을 제공할 HTML 서버입니다.
• webpack-merge : 웹팩 구성을 여러 파일로 분할할 수 있는 웹팩 도구 라이브러리.
• ts-loader : TypeScript 파일을 처리하기 위한 모듈 규칙.

*Hot Module Replacement(HMR)는 모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거합니다. 

 

또한 ts-loader에서 사용할 수 있도록 node_modules 폴더에 TypeScript의 로컬 복사본이 필요합니다.

npm install typescript --save-dev

./src/client/webpack.common.js

const path = require('path')

module.exports = {
    entry: './src/client/client.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../../dist/client'),
    },
}

./src/client/webpack.dev.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const path = require('path')

module.exports = merge(common, {
    mode: 'development',
    devtool: 'eval-source-map',
    devServer: {
        static: {
            directory: path.join(__dirname, '../../dist/client'),
        },
        hot: true,
    },
})

package.json 파일에 해당 코드를 추가해주세요.

        "dev": "webpack serve --config ./src/client/webpack.dev.js",

하단 명령어를 사용하면  프로젝트가 실행됩니다. (야호!)

npm run dev

물론 

보일러플레이트도 있습니다. (하하)

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git ./example-1