BabylonJS TS开发环境配置
2019年4月19日补充：
npm淘宝镜像
npm的官方镜像服务器在国内使用非常的慢，新的模版工程自动化生成工具中已经修改为了国内的淘宝镜像，该工具的git仓库地址在下面正文中。
命令行中输入以下命令修改淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后就可以使用cnpm命令来安装模块了：
cnpm install [name]
调试代码
-
vs code插件
- Live Server
- Debugger for Chrome
-
调试方法
- 启动Live Server，安装好后可以在vs code窗口下方看到下图中的Go Live样式，点击即可启动Live Server。
- 打开工程文件监视，打开webpack.config.js，将watch属性改为true，开启对工程文件对监视，这可以监控工程文件的变化，并自动进行编译。
- 编译工程，打开watch后编译工程可以看到webpack is watching the files…的输出，表示该工程文件已经被监视，并且会发现此次编译不会终止，当代码发生变化并保存后会立刻重新编译。
- 启用调试，第一次启动调试时会在工程文件中生成一个.vscode文件夹，该文件夹中会有一个launch.json的文件，前提是安装了debugger for Chrome插件。将该json中的url修改为Live Server的地址即可开始进行断点调试。
- 启动Live Server，安装好后可以在vs code窗口下方看到下图中的Go Live样式，点击即可启动Live Server。
使用chrome进行移动端调试
详细说明可查看此网站
- 手机安装Chrome浏览器。
- 使用数据线连接到电脑上，并打开调试。
- 在电脑端的 Chrome 里，在地址栏输入 chrome://inspect。
- 开始调试，点击你希望调试的浏览器选项卡下面的 inspect。
2019年2月28日补充：
第二步中使用Node.js在安装依赖项时需要科学上网。(使用淘宝镜像后不需要)
正文
最近接触了Web3D引擎BabylonJS，引擎虽好但每次搭建TS的开发环境都十分繁琐，思来想去还是用批处理写个自动化的生产工具吧，一了百了。批处理以前没怎么用过，写的也是痛苦无比，而且不够灵活，虽然有大神告诉我可以写个简单的EXE来弄，但不会啊，这个留待后续研究吧，本着先实现在完善的想法，暂且先用批处理的凑活用吧。同时也把配置的步骤记录下。
环境要求：
平台：Windows，visual studio code（开发时用）
工具：Node.js 安装说明看这里
批处理工具：
这是一个自动化搭建TS开发工程的小工具，把该批处理工具放到一个空文件夹双击运行就可以了，环境搭建好后会运行一个示例工程，这就证明走通了，可以开发了。
批处理工具git地址
配置步骤：
- 用vs code 打开一个空的文件夹在vs code终端中输入下面的命令生成package.json文件。
npm init -y
- 同样在vs code的终端中输入以下命令使用Node.js安装依赖项：typescript，webpack，ts-loader，webpack-cli
npm install --save-dev typescript webpack ts-loader webpack-cli
- 新建webpack.config.js文件并填写以下配置项index.ts是开发脚本，index.js是index.ts编译出来的js代码
const path = require("path");
module.exports = {
entry: './index.ts',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: [".ts"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" }
]
},
mode: "development"
};
- 新建tsconfig.json文件
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noResolve": false,
"noImplicitAny": false,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"experimentalDecorators": true,
"isolatedModules": false,
"lib": [
"dom",
"es2015.promise",
"es5"
],
"declaration": true,
"outDir": "./dist"
}
}
- 安装babylon.js
npm install --save babylonjs
- 新建html文件，命名index.html，它是网页的入口会调起编译出来的index.js脚本
<html>
<head>
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
style>
head>
<body>
<canvas id="renderCanvas">canvas>
<script src="dist/index.js">script>
body>
html>
- 在根目录创建index.ts用来保存编写的ts代码
- index.ts中导入BABYLON命名空间，以及可能会用到的变量
import * as BABYLON from 'babylonjs';
import { Engine, Scene, ArcRotateCamera, HemisphericLight, Vector3, MeshBuilder, Mesh } from "babylonjs";
- 在package.json的Script属性中添加build运行webpack，捆绑babylonjs文件，最终打包出来的js文件中将包含babylonjs引擎文件。
"scripts": {
"build": "webpack"
},
- 点击菜单栏终端->运行任务->npm:build 或者在终端中输入npm run build构建js工程。
npm run build