BabylonJS TS开发环境配置

2019-01-19 本文已影响0人 gggab

2019年4月19日补充：

npm淘宝镜像

npm的官方镜像服务器在国内使用非常的慢，新的模版工程自动化生成工具中已经修改为了国内的淘宝镜像，该工具的git仓库地址在下面正文中。
命令行中输入以下命令修改淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后就可以使用cnpm命令来安装模块了：

cnpm install [name]

调试代码

vs code插件
1. Live Server
2. Debugger for Chrome
调试方法
1. 启动Live Server，安装好后可以在vs code窗口下方看到下图中的Go Live样式，点击即可启动Live Server。
2. 打开工程文件监视，打开webpack.config.js，将watch属性改为true，开启对工程文件对监视，这可以监控工程文件的变化，并自动进行编译。
3. 编译工程，打开watch后编译工程可以看到webpack is watching the files...的输出，表示该工程文件已经被监视，并且会发现此次编译不会终止，当代码发生变化并保存后会立刻重新编译。
4. 启用调试，第一次启动调试时会在工程文件中生成一个.vscode文件夹，该文件夹中会有一个launch.json的文件，前提是安装了debugger for Chrome插件。将该json中的url修改为Live Server的地址即可开始进行断点调试。

使用chrome进行移动端调试

详细说明可查看此网站

手机安装Chrome浏览器。
使用数据线连接到电脑上，并打开调试。
在电脑端的 Chrome 里，在地址栏输入 chrome://inspect。
开始调试，点击你希望调试的浏览器选项卡下面的 inspect。

Chrome手机端调试

2019年2月28日补充：
~~第二步中使用Node.js在安装依赖项时需要科学上网。~~(使用淘宝镜像后不需要)

正文

最近接触了Web3D引擎BabylonJS，引擎虽好但每次搭建TS的开发环境都十分繁琐，思来想去还是用批处理写个自动化的生产工具吧，一了百了。批处理以前没怎么用过，写的也是痛苦无比，而且不够灵活，虽然有大神告诉我可以写个简单的EXE来弄，但不会啊，这个留待后续研究吧，本着先实现在完善的想法，暂且先用批处理的凑活用吧。同时也把配置的步骤记录下。

环境要求：

平台：Windows，visual studio code（开发时用）
工具：Node.js 安装说明看这里

批处理工具：

这是一个自动化搭建TS开发工程的小工具，把该批处理工具放到一个空文件夹双击运行就可以了，环境搭建好后会运行一个示例工程，这就证明走通了，可以开发了。
批处理工具git地址

屠龙宝刀点击就送v0.1的效果图

配置步骤：

1.用vs code 打开一个空的文件夹在vs code终端中输入下面的命令生成package.json文件。

npm init -y

2.同样在vs code的终端中输入以下命令使用Node.js安装依赖项：typescript，webpack，ts-loader，webpack-cli

npm install --save-dev typescript webpack ts-loader webpack-cli

3.新建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"
};

4.新建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"
  }
}

5.安装babylon.js

npm install --save babylonjs

6.新建html文件，命名index.html，它是网页的入口会调起编译出来的index.js脚本

<!DOCTYPE html>
<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>

7.在根目录创建index.ts用来保存编写的ts代码
8.index.ts中导入BABYLON命名空间，以及可能会用到的变量

import * as BABYLON from 'babylonjs';
import { Engine, Scene, ArcRotateCamera, HemisphericLight, Vector3, MeshBuilder, Mesh } from "babylonjs";

9.在package.json的Script属性中添加build运行webpack，捆绑babylonjs文件，最终打包出来的js文件中将包含babylonjs引擎文件。

"scripts": {
        "build": "webpack"
},

10.点击菜单栏终端->运行任务->npm:build 或者在终端中输入npm run build构建js工程。

npm run build