Babylon.js를 TypeScript로 작성하고 webpack을 사용하여 WebGL을 사용할 때 보일러 플레이트
10079 단어 Babylon.jswebpackTypeScript
개요
가정 독자
TypeScript에서 Babylon.js를 사용하고 싶은 분
npm
전제
node, npm을 사용할 수 있어야합니다.
사용하는 npm 모듈은 다음과 같습니다.
"babylonjs": "^4.0.3",
"babylonjs-gui": "^4.0.3",
"babylonjs-materials": "^4.0.3",
"ts-loader": "^6.0.4",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.8"
사용하는 소스
아래에 넣었습니다. 항목 작성 시점의 태그는 0.0.1입니다.
webpack
움직이려면
git clone https://github.com/hrkt/babylonjs-typescript-webpack-boilerplate.git
npm install
npm run watch
브라우저에서 index.html을 열면 아래 그림과 같은 화면이 보일 것입니다.
htps : // 기주 b. 이 m / hrkt / 바 by ぉn jsty ぺsc 리 pt ぇ b パ ク ボ ぇ rp ぁ 테 / ぇ 아세 s / 타 g / 0.0.1
설명
기본적으로 "
"의 내용을 이용하고 있습니다.
변경점에 대해서, 적절히 「(차분)」로서 보충합니다.
tsconfig.json
(차분)
- TypeScript 용 구성 파일의 tsconfig.json에서 compilerOptions에서 "module": "es2015"입니다.
- 대상으로 하는 파일, 하지 않는 파일에 대해서, 각각 include와 exclude의 항목으로 지정하고 있습니다.
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "es2015",
"outDir": "js",
"sourceMap": true,
"types": [
"babylonjs",
"babylonjs-gui",
"babylonjs-materials"
]
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.js"
]
}
webpack.config.js
(차분)
- WebPack용 구성 파일인 webpack.config.js는 node_modules 아래의 파일을 다른 번들로 빌드하는 설정을 포함합니다.
- 처음에 필요한 모듈의 require를 수행하고 있습니다.
const path = require('path')
const webpack = require("webpack")
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "initial",
}
}
}
},
mode: "development",
entry: {
app: './src/app.ts'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
devtool: 'source-map',
plugins: [
],
module: {
rules: [{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}]
}
}
그리기 소스
htps // c c. 바 by js. 코 m / 후 아츠레 s / n pm_ 쏘 rt 상단에 샘플이 있습니다.
(차분)
- 묘화용 클래스(MyScene으로 했습니다)를 별도 파일로 하고, app.js에서는 묘화용 클래스의 로드와 초기화만 실시하고 있습니다.
import MyScene from './my-scene'
window.addEventListener('DOMContentLoaded', () => {
// Create the game using the 'renderCanvas'.
let game = new MyScene('renderCanvas');
// Create the scene.
game.createScene();
// Start render loop.
game.doRender();
});
결론
대충 만들고 나서, 뭐, 이런 것은 여러가지 사람이 하고 있을 것이다, , 라고 생각해 검색해 보면, 역시 복수 건 있었습니다.
Google에서 처음 3건 정도를 아래에 전기해 둡니다.
git clone https://github.com/hrkt/babylonjs-typescript-webpack-boilerplate.git
npm install
npm run watch
기본적으로 "
"의 내용을 이용하고 있습니다.변경점에 대해서, 적절히 「(차분)」로서 보충합니다.
tsconfig.json
(차분)
- TypeScript 용 구성 파일의 tsconfig.json에서 compilerOptions에서 "module": "es2015"입니다.
- 대상으로 하는 파일, 하지 않는 파일에 대해서, 각각 include와 exclude의 항목으로 지정하고 있습니다.
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "es2015",
"outDir": "js",
"sourceMap": true,
"types": [
"babylonjs",
"babylonjs-gui",
"babylonjs-materials"
]
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.js"
]
}
webpack.config.js
(차분)
- WebPack용 구성 파일인 webpack.config.js는 node_modules 아래의 파일을 다른 번들로 빌드하는 설정을 포함합니다.
- 처음에 필요한 모듈의 require를 수행하고 있습니다.
const path = require('path')
const webpack = require("webpack")
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "initial",
}
}
}
},
mode: "development",
entry: {
app: './src/app.ts'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
devtool: 'source-map',
plugins: [
],
module: {
rules: [{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}]
}
}
그리기 소스
htps // c c. 바 by js. 코 m / 후 아츠레 s / n pm_ 쏘 rt 상단에 샘플이 있습니다.
(차분)
- 묘화용 클래스(MyScene으로 했습니다)를 별도 파일로 하고, app.js에서는 묘화용 클래스의 로드와 초기화만 실시하고 있습니다.
import MyScene from './my-scene'
window.addEventListener('DOMContentLoaded', () => {
// Create the game using the 'renderCanvas'.
let game = new MyScene('renderCanvas');
// Create the scene.
game.createScene();
// Start render loop.
game.doRender();
});
결론
대충 만들고 나서, 뭐, 이런 것은 여러가지 사람이 하고 있을 것이다, , 라고 생각해 검색해 보면, 역시 복수 건 있었습니다.
Google에서 처음 3건 정도를 아래에 전기해 둡니다.
Reference
이 문제에 관하여(Babylon.js를 TypeScript로 작성하고 webpack을 사용하여 WebGL을 사용할 때 보일러 플레이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hrkt/items/17d2833ff3e3a4e158be텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
