BabylonJS TS开发环境配置

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进行移动端调试

详细说明可查看此网站

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

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


正文

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

环境要求:

平台:Windows,visual studio code(开发时用)
工具:Node.js 安装说明看这里

批处理工具:

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

配置步骤:

  1. 用vs code 打开一个空的文件夹在vs code终端中输入下面的命令生成package.json文件。
npm init -y 
  1. 同样在vs code的终端中输入以下命令使用Node.js安装依赖项:typescript,webpack,ts-loader,webpack-cli
npm install --save-dev typescript webpack ts-loader webpack-cli
  1. 新建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"
};
  1. 新建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"
  }
}
  1. 安装babylon.js
npm install --save babylonjs
  1. 新建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>
  1. 在根目录创建index.ts用来保存编写的ts代码
  2. index.ts中导入BABYLON命名空间,以及可能会用到的变量
import * as BABYLON from 'babylonjs';
import { Engine, Scene, ArcRotateCamera, HemisphericLight, Vector3, MeshBuilder, Mesh } from "babylonjs";
  1. 在package.json的Script属性中添加build运行webpack,捆绑babylonjs文件,最终打包出来的js文件中将包含babylonjs引擎文件。
"scripts": {
        "build": "webpack"
},
  1. 点击菜单栏终端->运行任务->npm:build 或者在终端中输入npm run build构建js工程。
npm run build

你可能感兴趣的:(web3D,Babylonjs,web3D引擎)