///////////////////////////////////////////////////////////

npm init

启动项目

npm run dev

///////////////////////////////////////////////////////////

1、npm init -y

#package.json

scripts改为:"dev": "vite"

2、安装vite：npm i vite -D

（建议node版本V14以上）

若无ts环境，安装：npm install -g typescript

////////////////////////////////////////////

tsc --out main.js ***.ts ***.ts ***.ts

////////////////////////////////////////////

#index.html

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="./main.js"></script>

<style>
    
    html, body {padding: 0;margin: 0;overflow: hidden; }
    
    canvas {width: 100%;height: 100%;} 
    
</style>

//----------------------------章节摘要---------------------------------//

///////ts1 编译命令/////////////////////////////////////

tsc --out ./src/main.js ./src/app.ts

///////ts2 编译命令/////////////////////////////////////

tsc --out ./src/main.js ./src/engine.ts ./src/gl.ts ./src/app.ts

///////ts3 编译命令/////////////////////////////////////

tsc --out main.js ./src/app.ts ./src/engine.ts ./src/core/gl.ts ./src/core/shader.ts

显示：

///////ts4 编译命令/////////////////////////////////////

抽象出了:glBuffer.ts

编译命令：tsc --out main.js ./src/app.ts ./src/engine.ts ./src/core/gl.ts ./src/core/shader.ts ./src/core/glBuffer.ts

///////ts4 改写为import引入////////////////////////////

将namespace改为import引入类，index.html直接引入ts文件，免执行编译命令，自动监听保存后自动刷新页面。

///////ts6////////////////////////////

改变视口：gl.viewport(-1, 1, 1, -1);